HTML/CSS
用纯CSS打造圆形图片旋转的方法
PetitQ
上次看到一个博客的 LOGO 图片很好看，一个旋转的圆形人物图片，但是我看他用了大量的 JS 代码来渲染这个效果。其实这种方式纯 CSS3 是完全可以实现，我们只需要考虑清楚我们的思路。
1、圆形图片
我们这里使用了一张哈弗 H2 的图片。
然后把图片写成圆形。
也想出现在这里？联系我们吧
height: 300px;
width: 300px;
border-radius: 150px;
2、将图片旋转
这里我们使用了动画 keyframes，将图片不停的自转
animation: 9.5s linear 0s normal none infinite rotate;
3、图片外面遮罩
这里我们使用了遮罩层将我们上面的图片遮罩起来，这样子就看到了一个旋转的图片在一个灰色的背景上面。
<div class="cover"></div>
下面是所有完整的代码：
<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.22vd.com/wp-content/uploads/2018/11/2018110811355585.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>
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
