<table class="text"&gt;<tbody><tr class="li1"&gt;

<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

            向右 *{margin: 0;padding: 0} ul{         height: 60px;         width: 800px;         font-size: 0;         position: relative; } ul .move{     position: absolute;     border-top: 4px solid #E53C3C;     left: 0;     top: 57px;         -webkit-transition: left 0.4s ease-in-out;     -moz-transition: left 0.4s ease-in-out;     transition: left 0.4s ease-in-out; } ul li:nth-child(1):hover~.move{     left: 0; } ul li:nth-child(2):hover~.move{     left: 20%; } ul li:nth-child(3):hover~.move{     left: 40%; } ul li:nth-child(4):hover~.move{     left: 60%; } ul li:nth-child(5):hover~.move{     left: 80%; } /*nth-of-type*/        

               
• eeee
               
• eeee
               
• eeee
               
• eeee
               
• eeee
               
•        

  颜色渐变 ul li{     display: inline-block;     width: 20%;     text-align: center;         font-size: 50px ;     -webkit-transition:color 0.4s ease-in-out;     -moz-transition:color 0.4s ease-in-out;     transition:color 0.4s ease-in-out; } ul li:hover{     color: #F04C57; }        

               
• eeee
               
• eeee
               
• eeee
               
• eeee
               
• eeee
               
•        

原文链接：https://www.f2er.com/note/422053.html