上次看到一个博客的 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.weimahe.com/wp-content/uploads/2024/10/12326-Z50DKs.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>
