found a similar effect on the Internet:
,
switching effect and caterpillar switching effect (the width of the underscore from tab1 to tab2,tab1 is gradually shorter, and the width of the underscore of tab2 is gradually longer). There is no idea for the time being.
the biggest feature of the caterpillar effect is its silky fluency, that is, it is always "a caterpillar" running under the label. I have read this article before, but it is not slippery. Then I came up with an idea, but it felt too out of the mainstream. And the complete effect can only be written in sass or less.
for example: there are now 5 tags, and I precisely control the length of each li tag. Then I just need to set the pseudo element after, under the first tag as a "caterpillar". When I mouse over the second tab, I use transform to move the position of the after so that it is just below the second tab. This method is still very troublesome, and the problem of positioning may be taken into account. At the same time, it seems that the back and forth direction cannot be controlled, and each tag hover must be judged.
Previous: How to send a message notification to the front end by flask
Next: Express cross-domain request. Chrome cannot display set-cookie?.
I have made an one-time dynamic effect, and there is no way to change it back to recycling. I read the official vue documentation and couldn t find the method I wanted. <!DOCTYPE html> <html lang="en"> <head> <meta ...
<button class="btn anviz-btn-primary footer-search-btn" data-class=""><i class="footer-icon icon-more_line">< i>< button> <button class="btn anviz-btn-primary footer-search-btn" data-clas...
<button> <i class="material-icons"> favorite_border < i>< button> I use Google s material icon just to make my text appear below, and icon gets big . how to center its text vertically? ...
what is the default for css if you do not specify line-height? Is it equal to font-size? Sometimes it feels like setting it manually to be the same as font-size is not the same as letting him not set it by default. ...
IE HTML <ul class="amin"> <li class="amin_list"> <img src="@ common img wave.png" style="width:100vw;" alt="" srcset=""> < li> <li class=&q...
effect is such a loading animation :not:required the complete source code is as follows: <span class="spinner-loader">Loading< span> @-moz-keyframes spinner-loader { 0% { -moz-transform: rotate(0deg); transform: rota...