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

This article mainly introduces css3 animation how to add a variety of transformation effects, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Html Code:

Css Code:

# submenu {

Width:100px

Height:60px

Margin:100pxauto

Background-color:#eee

Border:2pxsolidgreen

-webkit-transition:1sease-in-out

-moz-transition:1sease-in-out

-o-transition:1sease-in-out

Transition:1sease-in-out

}

# submenu:hover {

Background-color:#fc3

-webkit-transform:rotate (360deg) scale (2)

-moz-transform:rotate (360deg) scale (2)

-o-transform:rotate (360deg) scale (2)

-ms-transform:rotate (360deg) scale (2)

Transform:rotate (360deg) scale (2)

}

Note that IE10 does not use the conversion prefix now, but the transformation still requires-ms-.

This means that when you hover the mouse over the box, it will change the color, rotate and scale in one second.

Description:

The transform attribute controls the rotation, scaling, moving, and tilting of elements.

The transition attribute realizes the transition effect of the element, allowing the element to move from one state to another.

For compatibility, you need to use the prefix:-webkit-,-moz-,-o-,-ms-.

Thank you for reading this article carefully. I hope the article "how to add a variety of transformation effects to css3 animation" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.