How to achieve dynamic effects with only HTML and CSS?
As for animation, it is well known that JavaScript and Flash are the mainstream of animation. Although the transition of CSS3 is not as professional as the first two, it is precisely because CSS3 processes less data that its transition is smoother than dove.
Today let's look at:
1, Transition
Properties:
1,transition-property
2. Transition duration (the default value is 0. At this time, the change is instantaneous, and there is no transition effect)
3,transition-timing-function
4,transition-delay
Function:
1. Specifies the CSS properties to transition
2. Specify the time (s) it takes to complete the transition
3. Specify transition function
It includes liner: uniform velocity
Ease in: deceleration
Ease out: accelerate first and then decelerate
4. Specifies the delay time (s) for the start of the transition
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
#container{
width:100px;
height:100px;
background:blue;
#container:hover{
cursor: pointer;
left: 100px;
border-radius: 50%;
background: red ;
}
}
.box{
position: absolute;
top: 20px;
left:20px;
width:100px;
height:100px;
background:blue;
transition: all 5s ease ;
}
.box:hover{
cursor: pointer;
left: 100px;
border-radius: 50%;
background: deeppink;
/* border-radius: 50%;
transition-property: left;
transition-duration: 10s;
transition-timing-function: ease;
transition-delay: 2s;*/
}
</style>
</head>
<body>
Note: since the transition can only be realized by user operation, use: hover. If you want multiple elements to have transition attributes, use ALL. Like the background we wrote together, it can be written separately or together.
2, Conversion
1. Move
The unit deg is implemented by using rotate()
Syntax format: transform: rotate(45deg) 45 degrees
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotation of transformation</title>
<style>
.box{
position: absolute;
left:200px;
top:200px;
width:200px;
height:200px;
background-color: deeppink;
transform-origin: 10px 10px;
transform: rotate(45deg) ;
}
</style>2. Spin
By using transform, the displacement, rotation and scaling of elements can be realized
Displacement: transform: translate()
Rotation; transform: rotate()
Scaling: transform: scale()
The displacement needs to be determined by x and y coordinates. The syntax format is:
transform:translate(x,y); transform:translateX(n); transform:translateY(n)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movement of conversion</title>
<style>
.box{
width:100px;
height:100px;
border: 1px solid black;
background-color: deeppink;
}
div#div2{
transform: translate(50px,100px) ;
/* transform: translateX(50px);
transform: translateY(100px) ;*/
background-color: blue;
}
</style>3. Zoom
Zoom uses the transform: score () syntax format: Transform: score (1,1) enlarges both the width and height. Transform: score (2) is equivalent to that score (2,2). If score (2,2) is greater than 1, it is enlarged and less than is reduced.
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scaling of conversion</title>
<style>
div{
position: absolute;
width:100px;
height:100px;
background-color: deeppink;
}
</style>3, Animation
Although transition enjoys silkiness, its disadvantages are very obvious:
1. It needs to be triggered by the user through specific operations
2. transition is one-time and cannot be repeated unless a specific departure is continued
3. It can only define the beginning and end, and the intermediate process cannot be defined
In this helpless situation, animation was born! It can not only display the animation effect through each frame, but also call each frame perfectly. Animation is a function in css. The biggest difference from transition is that animation can achieve more changes, more control, automatic playback and other functions. If animation is used, the browser should be the highest version. When animation is used, use @ keyframes as key frames and build sample rules by percentage.
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animation 1</title>
<style>
.box{
position: absolute;
left:100px;
top:10px;
width:100px;
height:100px;
background-color: deeppink;
}
.box:hover {
animation: move 2s;
}
/*Define animation*/
@keyframes move {
from{
left :10px;
}
to{
left:100px;
}
}
</style>Properties:
1. Animation name (none is the default, no animation effect)
2. Animation duration (default = 0, no animation effect)
3. Animation timing function (ditto)
4,animation-delay
5. Animation iteration count (1 is the default value and infinite is infinite cycles)
6. Animation direction (the default is normal)
7. Animation state (default running playback, pause)
8. Animation fill mode (the default value is none, forwards returns to the key frame, and backwards returns to the first frame)
Function:
1. Specifies the name of the keyframe animation
2. Specifies the animation playback time
3. Set animation playback mode
4. Set start time
5. Set the number of cycles
6. Animation playback direction
7. Play status, play or pause
8. Out of play properties