明凯博客

关注网站技术,一个特立独行的程序员

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

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

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

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

然后把图片写成圆形。

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('http://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>

代码预览

, ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注