The following article uses a case to introduce how to use CSS3 to create simple animations. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Recommendation: css video tutorial
1.Easy loading
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @keyframes myfirst
{
from{transform: rotate(0deg)}to{transform: rotate(360deg)}
}
.loading{
animation: myfirst 1.5s infinite linear;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top:16px solid blue;
width: 120px;
height: 120px;
}
<div class = "loading" ></div>
|
Copy after login
2.Easy Progress bar
1 2 3 4 5 6 7 8 | .move {
width: 0px;
height: 10px;
animation: moveHover 5s infinite linear;
}
<div class = "move" ></div>
|
Copy after login
3. Transition attribute
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .change
{
transition: width 2s;
font-size: 10px;
width: 100px;
height: 20px;
background: yellow;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
.change:hover
{
width: 500px;
}
<div class = "change" >鼠标滑过</div>
|
Copy after login
1 2 3 4 5 6 7 8 9 10 11 | .bigger{
font-size: 20px;
width: 0;
height: 0;
background: #2A9F00;
transition: transform 5s;
}
.bigger:hover{
transform: scale(10);
}
<div class = "bigger" >大</div>
|
Copy after login
For more programming-related knowledge, please visit:Introduction to Programming! !
The above is the detailed content of Through cases, learn how to create simple animations with CSS3. For more information, please follow other related articles on the PHP Chinese website!