Some time ago made a lot of small partners backgammon games are let and then make a private chat, today a small circle web front end apes share a lecturer for the CSS3 animation exercises Case: With CSS3 to be watches, want to play junior partner remember to run it Yo.
After the self-study CSS3 properties, we carried out a small case with a comprehensive practice, this case is mainly animation application, we can go do watch a word with pure css animation.
First we prepare to lay out what HTML:
The following is probably the way through the CSS setting out timepiece.
{.clock
/ * create a circular box as dial /
width: 200px;
height: 200px;
margin: Auto 100px;
position: relative;
border: 10px Solid # 000;
border-RADIUS: 50%;
}
.clock div: NTH- Child (-n + 6) {
/ select the first sub-element 6 made in table 6 as the scale lines /
width: 6px;
height: 200px;
background-Color: #aaa;
position: Absolute;
left: 50%;
margin- left: -3px;
}
/ allow incremental rotation of the six lines of 30 * /
.clock div: Child-Nth (. 1) {
Transform: Rotate (30deg);
}
.clock div: Child-Nth (2) {
Transform: Rotate (60deg);
}
.clock div: Child-Nth (. 3) {
transform: rotate(90deg);
background-color: #333;
}
.clock div:nth-child(4) {
transform: rotate(120deg);
}
.clock div:nth-child(5) {
transform: rotate(150deg);
}
.clock div:nth-child(6) {
transform: rotate(0deg);
background-color: #333;
}
/ * Center dots /
.cent {
width: 20px;
height: 20px;
background-Color: # 000;
border-RADIUS: 50%;
position: Absolute;
Z-index:. 3;
left: 50%;
Top: 50 %;
margin: -10px 0 0 -10px;
Z-index: 2;
}
/ intermediate portion of the covered wire, so that the line becomes the mark * /
.cover {
width: 180px;
height: 180px;
border-RADIUS: 50%;
Color-background: #fff;
position: Absolute;
left: 50%;
Top: 50%;
margin: 0 -90px -90px 0;
}
followed by the center dot and the mask, it looks like a dial.
Then we can prepare hands and animation.
/* 时针制作 /
.hour {
width: 6px;
height: 50px;
background-color: #000;
position:absolute;
left: 50%;
top:100px;
margin-left: -3px;
animation: clockrotate 43200s steps(43200) infinite linear;
transform-origin: top center;
}
/ 分针制作 /
.minute {
width: 60px;
height: 6px;
background-color: #555;
position:absolute;
left:40px;
top:50%;
margin-top: -3px;
animation: clockrotate 3600s steps(3600) infinite;
transform-origin: center right;
}
/ 秒针制作 /
.seconds {
width: 4px;
height: 70px;
background-color:red;
position: absolute;
left:50%;
top:30px;
margin-left: -2px;
animation: clockrotate 60s steps(60) infinite ;
transform-origin: bottom center;
}
/ 设置动画序列 */
@keyframes clockrotate {
form{
}
to {
transform: rotate(360deg);
}
}
Each needle is disposed animation rotated 360 degrees, according to the time, minutes, seconds animation execution time and calculating the number of steps required for completion, add infinite infinite execution, Also note that the central point of rotation of the hands is provided.
Above is a small ape circle teacher training for CSS3 animations Case: With CSS3 watches to be introduced, I believe you also have some understanding of the web front end, if you encounter a problem you can not ape the small circle to find the answer, which has the latest and most comprehensive video tutorials for you to learn, as long as you want to learn to program here has.