CSS3 to create a constantly rotating CD cover

Initially see this effect is in a music station, Http://jing.fm, this site interface did very good, music is also very style. When I first entered this site is most interested in the middle of the constantly rotating disc cover, want to know how it works, and how it can also be placed on the homepage of my website to increase the effect, the specific effect can go to jing.fm to see, with Sina Weibo account can login.

The effect I extracted only contained part of the code that made it rotate, and did not include the middle pause button, where I could see the demo and the source code.

The pictures and CSS code in the demo were all extracted from jing.fm, and I just made some simplifications. Moreover, because I just touch the webpage not too long, a lot of things still can not get a deep understanding, the present first share some simple content.

Will css people from the source can understand the way it works, I only explain some of my own learning process has doubts in the place, if you do not understand can leave a message.

First, originally a rectangular disc cover how to be embedded in a circular area

This is the least I know of the problem, how can use CSS to embed graphics into a shape, and later study the picture found it is a middle skeleton of the PNG graphics on the top, put the cover on the bottom layer, using position:absolute to locate, Put the CD cover in the middle of the cutout so it looks like it's embedding the cover in the background.

Second, how to make the background graphic above the CD cover

Look at the picture to find that the so-called background graphic is only part of it, use Z-index to adjust its level, so that the CD cover layer down, so background graphics on the CD cover.

Third, how to keep the CD cover automatically rotate

This is the point. When studying CSS3, it was found that a transform effect could rotate the graph, and the center of rotation could be specified (the center of rotation is, of course, the centre of the graph, so there is no need to specify it), using Transform:rotate (360deg) to rotate the graph one week, But it's not going to keep spinning. When using Firebug to look at the elements inside the jing.fm style, find a animation can control the rotation but copied down but does not play a role.

Later view W3school on the CSS3 tutorial learned that animation should be and keyframe matching, on the animation need to specify the name of the effect. Continue to find the CSS style of jing.fm, finally found the key code, namely:

1	@keyframes rotate{

2	from{-webkit-transform:rotate(0deg)}

3	to{-webkit-transform:rotate(360deg)}

4

}

The animation effect is called this rotate. Animation There is an option to control the number of times the effect cycle, of course, set into an infinite loop on the line. The overall code is as follows:

Css

1	@-webkit-keyframes rotate{

2	from{-webkit-transform:rotate(0deg)}

3	to{-webkit-transform:rotate(360deg)}

4

}

5	@-moz-keyframes rotate{

6	from{-moz-transform:rotate(0deg)}

7	to{-moz-transform:rotate(360deg)}

8

}

9	@-ms-keyframes rotate{

10	from{-ms-transform:rotate(0deg)}

11	to{-ms-transform:rotate(360deg)}

12

}

13	@-o-keyframes rotate{

14	from{-o-transform:rotate(0deg)}

15	to{-o-transform:rotate(360deg)}

16

}

17

18

.tupain{

19	background-image: url(img/cd.jpg);

20	background-repeat: no-repeat;

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

22	-webkit-animation:9.5s linear 0s normalnoneinfinite rotate;

23	height: 300px;

24	width: 300px;

25	position: absolute;

26	top: 74px;

27	left: 73px;

28	z-index: 0;

29

}

30

31

.zhezhao{

32	background:url(img/playerMask.png) no-repeat;

33	height:430px;

34	width:430px;

35	z-index:1;

36	position:absolute;

37

}

Html

1

<div>

2	<divclass="zhezhao"></div>

3	<divclass="tupian"></div>

4

</div>

This article fixed link: http://blog.icewingcc.com/css3-rotate-cdcover.html | ice Wing Blog

CSS3 to create a constantly rotating CD cover