Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Today, when I opened B station to learn, I found the special effects of the button back to the top very interesting, so I did something (as we all know, B station is a learning website

​

It is marked with blue square box, literally search point what to delimit can see quietly stay in the corner of the small rocket 🚀.

Back to the top effect is more common, but after hover can see the small rocket ready to start, it is very interesting to realize a little curious about this, so I opened the console began to touch fish 🐟 (learn

​

Above is the hover state, you can see two styles of rocket-Con and fly, and in fly you can see an animation, so the situation is relatively clear

When you open the image link, it shows you an image like this

​

Go to Source to see the implementation of fly

​

To sum up, animation controls the position of picture display to display dynamic effects

Instead of writing an extra style, use CSS Hover

.com { background-image: url("https://static.hdslb.com/bl2se/images/rocket_top.png"); width: 150px; height: 175px; }.com:hover {animation: fly 0.4s steps(1) infinite; background-image: url("https://static.hdslb.com/bl2se/images/rocket_frame.png"); } @keyframes fly { 0% { background-position-x: 0; } 25% { background-position-x: -150px; } 50% { background-position-x: -300px; } 75% { background-position-x: -450px; } to { background-position-x: -600px; }}Copy the code

There are a lot of fun things you can do in this way. (After thinking about it, I realized that there was no such long picture in my hand, so I used GIF to practice

So one as the original display (not hover state)​

A long graph is used in hover state​

Then calculate the width, height and distance as shown below

<body> <div class="com"></div> </body> <style> .com { background-image: url("./none.png"); width: 150px; height: 175px; } /*. Fly {} */.com:hover {animation: fly 0.6s steps(1) infinite; background-image: url("./hover.png"); } @keyframes fly { 0% { background-position-x: 0; } 12.5% {background-position-x: -200px; } 25% { background-position-x: -400px; } background-position-x: -600px; } 50% { background-position-x: -800px; } 62.5% {background-position-x: -1000px; } 75% { background-position-x: -1200px; } 87.5% {background-position-x: -1400px; } to { background-position-x: -1600px; } } </style>Copy the code

The result is a GIF feel, and the speed can be adjusted in THE CSS itself

It’s a little bit easier to implement, a little exercise

​