This example mainly uses transition to realize that after the mouse is moved in, the label is gradually highlighted, and there is a gradual process. Specific approach: Execute background-color, color and other attributes as an animation.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mouse over text to highlight</title>
<style type="text/css">
at the{
width: 400px;
list-style: none;
line-height: 2rem;
color: black;
transition: background-color 1s linear,color 1s linear;
-webkit-transition: background-color 1s linear,color 1s linear;
-moz-transition: background-color 1s linear,color 1s linear;
-o-transition: background-color 1s linear,color 1s linear;
}
li: hover {
background-color: #FF3d67;
color: blue;
}
</style>
</head>
<body>
<ul>
<li>1. The king of the moon in the Qin Dynasty came to the world</li>
<li>2. The bright moon in the Qin Dynasty crossed the sea</li>
<li>3. Qin Shi Mingyue's Princes and Hundreds of Schools</li>
</ul>
</body>
</html>
Effect comparison
 |
 |