发布时间:2019-07-04 10:05:31编辑:auto阅读(2007)
知识点:
css3动画
transition
/*旋转动画*/ @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} }
效果:
源码:
-----------------------
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片过渡缩放</title> <style> /*通用样式*/ *{margin: 0;padding: 0;} /*自定义样式*/ .img{margin-left: 25px;margin-top: 50px;margin-right: 25px; transition: all 2s ease; } .img:hover{ z-index: 10; border: 1px dashed #ff0000; -webkit-transform: rotateY(360deg); transform: scale(1.51,1.51) rotate(360deg); } .ta_c{text-align: center; width: 99%; } /*旋转动画*/ @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } </style> </head> <body> <div class="ta_c"> <img src="img/1.jpg" width="25%" class="img" /> <img src="img/2.jpg" width="25%" class="img" /> <img src="img/3.jpg" width="25%" class="img" /> <img src="img/4.png" width="25%" class="img" /> <img src="img/5.jpg" width="25%" class="img" /> <img src="img/6.jpg" width="25%" class="img" /> </div> </body> </html>
上一篇: Akka 3 Akka actor 与
下一篇: 2016年3月7日作业
46464
44349
35802
33358
28058
24624
23551
18763
18019
16705
4526°
5086°
4618°
4757°
5422°
4383°
4435°
4980°
4875°
6126°