In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-03 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article mainly introduces "css3 how to achieve magnification and rotation animation effect". In daily operation, I believe many people have doubts about how to achieve magnification and rotation animation effect in css3. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt that "css3 how to achieve magnification and rotation animation effect"! Next, please follow the editor to study!
Methods: 1, use the animation attribute to bind the element to the animation; 2, use the @ keyframes animation name {50% {width: magnified width value; height: magnified height value; transform:rotate (rotation angle);}} "statement to control the action of the animation to achieve magnifying rotation.
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
Css3 to realize magnifying and rotating animation effect
In html, you can use the animation attribute and "@ keyframes" to create an animation of the element zooming in on the rotation. The width and height attributes are used in the animation to control the magnification of the element; transform:rotate () controls the rotation of the element.
Implementation code:
Div {width: 50px; height: 50px; background: red; margin: 100px; animation: mymove 5s infinite;-webkit-animation: mymove 5s infinite / * Safari and Chrome * /} @ keyframes mymove {50% {width: 150px; height: 150px; transform: rotate (360deg) } @-webkit-keyframes mymove {/ * Safari and Chrome * / 50% {width: 100px; height: 100px Transform: rotate (360deg);}}
At this point, on the "css3 how to achieve magnifying rotation animation effect" on the end of the study, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.