你的位置:首页 > 软件开发 > 网页设计 > CSS3的几个标签速记3

CSS3的几个标签速记3

发布时间:2016-07-12 21:00:32
transition:CSS3过渡 css3里很好的一个标签,可以非常方便的完成需要很多JS才能完成的动态效果例语法:transition:width 2S,height 2S,transform 2S;CSS3动画@keyframes:使一种样式逐渐变为另一种样 ...

transition:CSS3过渡     css3里很好的一个标签,可以非常方便的完成需要很多JS才能完成的动态效果

例语法:transition:width 2S,height 2S,transform 2S;

CSS3动画

@keyframes:使一种样式逐渐变为另一种样式的过程

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style>  5 div 6 { 7 width:100px; 8 height:100px; 9 background:red;10 position:relative;11 animation-name:myfirst;12 animation-duration:5s;13 animation-timing-function:linear;14 animation-delay:2s;15 animation-iteration-count:infinite;16 animation-direction:alternate;17 animation-play-state:running;18 /* Safari and Chrome: */19 -webkit-animation-name:myfirst;20 -webkit-animation-duration:5s;21 -webkit-animation-timing-function:linear;22 -webkit-animation-delay:2s;23 -webkit-animation-iteration-count:infinite;24 -webkit-animation-direction:alternate;25 -webkit-animation-play-state:running;26 }27 28 @keyframes myfirst29 {30 0%  {background:red; left:0px; top:0px;}31 25% {background:yellow; left:200px; top:0px;}32 50% {background:blue; left:200px; top:200px;}33 75% {background:green; left:0px; top:200px;}34 100% {background:red; left:0px; top:0px;}35 }36 37 @-webkit-keyframes myfirst /* Safari and Chrome */38 {39 0%  {background:red; left:0px; top:0px;}40 25% {background:yellow; left:200px; top:0px;}41 50% {background:blue; left:200px; top:200px;}42 75% {background:green; left:0px; top:200px;}43 100% {background:red; left:0px; top:0px;}44 }45 </style>46 </head>47 <body>48 49 <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>50 51 <div></div>52 53 </body>54 </html>

原标题:CSS3的几个标签速记3

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。