Recently, when I turned on my computer, I could see that new users of Geek Academy have free VIP for one month, so I went in and took a look. I won’t talk about its courses here. I saw this effect on the actual combat path map page:
#It’s a bit like a timeline, and every piece of mouse hovering has a drop-down effect to expand and introduce the screenshot information, and the effect is pretty good. But it seems that this effect is not very flexible for dynamic addition, because the height is not as flexible as the width, so you have to add it one by one. So many of them are made for display effect.
Of course, I also created some simpler similar effects based on this idea, mainly the overall layout effect. I will not imitate each specific piece of content, and I also added an opening animation myself. Make it more fun...
Let’s take a look at the effect first:
The effect is probably like this. Without further ado, let’s go directly to the topic:
HTML structure:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
The HTML structure is simplified here. The .time class is represented on the right, .timeLeft is represented on the left, and then just add some margins. , I deleted the content in each piece.
CSS style code is as follows:
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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
|
This CSS style code is for reference only. It is not very practical and has not been organized. The main thing is to understand the animation. The effect also depends on the overall layout. good luck!
The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.
For more articles related to CSS3 implementation of timeline effects, please pay attention to the PHP Chinese website!