HTML5技术

css3动画animation - danran68(18)

字号+ 作者:H5之家 来源:H5之家 2016-10-29 13:00 我要评论( )

1 .animation{ width:150px; height:145px; position:relative; margin:0 auto; transition:all 0.5s linear} 2 .animation p{ background:url(d_03.png) no-repeat; width:150px; height:145px; cursor:pointer; a

1 .animation{ width:150px; height:145px; position:relative; margin:0 auto; transition:all 0.5s linear} 2 .animation p{ background:url(d_03.png) no-repeat; width:150px; height:145px; cursor:pointer; animation:anita 2s linear 1s infinite; -webkit-animation:anita 2s linear 1s infinite} 3 .animation span{ display:block; text-align:center; position:absolute; left:0%; right:0; top:38%; bottom:0; margin:auto} 4 .animation:hover{ color:red; transform:rotate(360deg) scale(1.2)} 5 @keyframes anita{ 6 0%{ transform:rotate(0deg);} 7 100%{transform:rotate(360deg);} 8 } 9 @-webkit-keyframes anita{ 10 0%{ transform:rotate(0deg)} 11 100%{ transform:rotate(360deg)} 12 } animation动画

View Code

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • css3 text-shadow字体阴影讲解 - danran68

    css3 text-shadow字体阴影讲解 - danran68

    2016-10-25 15:00

  • 3d转换-正方体-Html5Css3-遁地龙卷风 - 遁地龙卷风

    3d转换-正方体-Html5Css3-遁地龙卷风 - 遁地龙卷风

    2016-10-25 11:00

  • css3 3d效果及动画学习 - 禾女小姐

    css3 3d效果及动画学习 - 禾女小姐

    2016-10-16 16:00

  • css3径向渐变详解-遁地龙卷风 - 遁地龙卷风

    css3径向渐变详解-遁地龙卷风 - 遁地龙卷风

    2016-10-15 13:13

网友点评
o