用纯CSS打造旋转的圆形图片的方法

2017年9月23日 MK CSS 0 阅读 5354次

上次看到一个博客的LOGO图片很好看，一个旋转的圆形人物图片，但是我看他用了大量的JS代码来渲染这个效果。

其实这种方式纯CSS3是完全可以实现，我们只需要考虑清楚我们的思路。

1、圆形图片
我们这里使用了一张哈弗H2的图片。

然后把图片写成圆形。

height: 300px;
width: 300px;
border-radius: 150px;

2、将图片旋转

这里我们使用了动画keyframes，将图片不停的自转。

animation: 9.5s linear 0s normal none infinite rotate;

3、图片外面遮罩

这里我们使用了遮罩层将我们上面的图片遮罩起来，这样子就看到了一个旋转的图片在一个灰色的背景上面。

下面是所有的代码，和演示。

代码预览

<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.limingkai.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>

css, 动画, 旋转

HTML5中Canvas绘图各种基本图形的方法 MAC下secureCRT无法保存密码的原因