Shulou(Shulou.com)06/02 Report--

This article mainly shows you how to use CSS to realize menu button animation, the content is simple and easy to understand, organized clearly, I hope to help you solve doubts, let Xiaobian take you to study and learn "how to use CSS to realize menu button animation" this article bar.

HTML

//vue Change class by clicking on an event

CSS

.burger{ cursor:pointer; display:inline-block; margin:7px6px00; outline:none; } .burgerp{ width:30px; height:4px; margin-bottom:6px; background-color:rgb(51,51,51); transform:rotate3d(0,0,0,0); } .burger.transformp{ background-color:transparent; } .burger.transformp:first-of-type{ top:10px; transform:rotate3d(0,0,1,45deg) } .burger.transformp:last-of-type{ bottom:10px; transform:rotate3d(0,0,1,-45deg) } .burger.transformp:first-of-type,.burger.transformp:last-of-type{ transition:transform.4s.3sease,background-color250msease-in; background:#00c1de; } .burgerp:first-of-type,.burgerp:last-of-type{ transition:transform.3sease.0s,background-color0msease-out; position:relative; }

Only transition can also achieve the effect of animation. By setting the changes of different attributes and mastering the time of change and delay, you can make the animation have sequence.

CSS selectors can be divided into three categories, namely id selector, class selector, label selector. There are many combinations between them, such as descendant selectors, child selectors, pseudo-class selectors, universal selectors, group selectors, and so on

The above is about "how to use CSS to achieve menu button animation" content, if the article is helpful to you and feel well written, please share with your friends to learn new knowledge, if you want to know more related knowledge content, please pay more attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.