跟随我在oracle学习php（14）
CSS3的@keyframes用法詳解:
此屬性與animation屬性是密切相關的，關于animation屬性可以參閱CSS3的animation屬性用法詳解一章節。
?
一.基本知識:
keyframes翻譯成中文，是"關鍵幀"的意思，如果用過flash應該對這個比較好理解，當然不會flash也沒有任何問題。
使用transition屬性也能夠實現過渡動畫效果，但是略顯粗糙，因為不能夠更為精細的控制動畫過程，比如只能夠在指定的時間段內總體控制某一屬性的過渡，而animation屬性則可以利用@keyframes將指定時間段內的動畫劃分的更為精細一些。
?
語法結構:
?
@keyframes animationname {keyframes-selector {css-styles;}}
參數解析:
1.animationname:聲明動畫的名稱。
2.keyframes-selector:用來劃分動畫的時長，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。
"from" 和 "to"的形式等價于 0% 和 100%。
建議始終使用百分比形式。
?
二.代碼實例:
?
實例一:
?
復制代碼
復制代碼
<!DOCTYPE html> ??
<html> ??
<head> ??
<meta charset=" utf-8">
<title></title> ??
<meta name="author" content="http://www.softwhy.com/" /> ??
<style type="text/css"> ?
div{
??width:100px;
??height:100px;
??background:red;
??position:relative;
?????
??animation:theanimation 5s infinite alternate;
??-webkit-animation:theanimation 5s infinite alternate ;
??-moz-animation:theanimation 5s infinite alternate ;
??-o-animation:theanimation 5s infinite alternate ;
??-ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
??from {left:0px;}
??to {left:200px;}
}
@-webkit-keyframes theanimation{
??from {left:0px;}
??to {left:200px;}
}
@-moz-keyframes theanimation{
??from {left:0px;}
??to {left:200px;} ?
}
@-o-keyframes theanimation{
??from {left:0px;}
??to {left:200px;} ?
}
@-ms-keyframes theanimation{
??from {left:0px;}
??to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
復制代碼
復制代碼
上面代碼實現了簡單的動畫，下面簡單做一下分析:
1.使用@keyframes定義了一個名為theanimation的動畫。
2.@keyframes聲明的動畫名稱要和animation配合使用。
3.from to等價于0%-100%，所以就是規定5s內做了一件事情。
?
實例二:
?
復制代碼
復制代碼
<!DOCTYPE html> ??
<html> ??
<head> ??
<meta charset=" utf-8"> ??
<meta name="author" content="http://www.softwhy.com/" /> ??
<title></title> ?
<style type="text/css"> ?
div{
??width:100px;
??height:100px;
??background:red;
??position:relative;
?????
??animation:theanimation 4s infinite alternate;
??-webkit-animation:theanimation 4s infinite alternate ;
??-moz-animation:theanimation 4s infinite alternate ;
??-o-animation:theanimation 4s infinite alternate ;
??-ms-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{
??0%{top:0px;left:0px;background:red;}
??25%{top:0px;left:100px;background:blue;}
??50%{top:100px;left:100px;background:yellow;}
??75%{top:100px;left:0px;background:green;}
??100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
??0% {top:0px;left:0px;background:red;}
??25%{top:0px;left:100px;background:blue;}
??50%{top:100px;left:100px;background:yellow;}
??75%{top:100px;left:0px;background:green;}
??100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
??0%{top:0px;left:0px;background:red;}
??25%{top:0px;left:100px;background:blue;}
??50%{top:100px;left:100px;background:yellow;}
??75%{top:100px;left:0px;background:green;}
??100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
??0%{top:0px;left:0px;background:red;}
??25%{top:0px;left:100px;background:blue;}
??50%{top:100px;left:100px;background:yellow;}
??75%{top:100px;left:0px;background:green;}
??100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
轉載于:https://www.cnblogs.com/RighTgraM/p/10699977.html
總結
以上是生活随笔為你收集整理的跟随我在oracle学习php（14）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Apache PDFBox 存在高危 X
- 下一篇： 《网络攻防实践》第七周作业