用纯CSS打造旋转的圆形图片的方法
上次看到一个博客的LOGO图片很好看，一个旋转的圆形人物图片，但是我看他用了大量的JS代码来渲染这个效果。
其实这种方式纯CSS3是完全可以实现，我们只需要考虑清楚我们的思路。
1、圆形图片
我们这里使用了一张哈弗H2的图片。
然后把图片写成圆形。
1 2 3 | height: 300px; width: 300px; border-radius: 150px; |
2、将图片旋转
这里我们使用了动画keyframes，将图片不停的自转。
1 | animation: 9.5s linear 0s normal none infinite rotate; |
3、图片外面遮罩
这里我们使用了遮罩层将我们上面的图片遮罩起来，这样子就看到了一个旋转的图片在一个灰色的背景上面。
1 | <div class="cover"></div> |
下面是所有的代码，和演示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <style> @-webkit-keyframes rotate{ from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(360deg)} } @-moz-keyframes rotate{ from{-moz-transform:rotate(0deg)} to{-moz-transform:rotate(360deg)} } @-ms-keyframes rotate{ from{-ms-transform:rotate(0deg)} to{-ms-transform:rotate(360deg)} } @-o-keyframes rotate{ from{-o-transform:rotate(0deg)} to{-o-transform:rotate(360deg)} } .image{ background-image: url('https://www.aimks.com/wp-content/uploads/2013/09/h22.jpg'); background-repeat: no-repeat; animation: 9.5s linear 0s normal none infinite rotate; -webkit-animation:9.5s linear 0s normal none infinite rotate; height: 300px; width: 300px; border-radius: 150px; position: absolute; top: 74px; left: 73px; z-index: 0; } .cover{ background:#eee; height:430px; width:430px; position:absolute; } </style> <div> <div class="cover"></div> <div class="image"> </div> </div> |
代码预览
HTML5中Canvas绘图各种基本图形的方法 MAC下secureCRT无法保存密码的原因
