Home > Developer > JavaScript
Windmill Rotation Code
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8" />5 <title></title>6 <styletype= "Text/css">7 /*Create an animated name*/8 @keyframes Rotate{ 9 0% {Ten Transform:Rotate (0deg);/*Rotate*/ One A /*The Matrix () method requires six parameters, including mathematical functions that allow you to: rotate, scale, move, and skew elements. Ask the teacher if you have any questions*/ - /*-webkit-transform:matrix (0,0.5,0,10,20,20);*/ - } the 100%{ - /*Rotate*/ - Transform:Rotate (360deg); - } + } - Img:hover{ + /* A @keyframes Specify animations. at animation The shorthand properties of all animated properties, except for the Animation-play-state property. - animation-name Specifies the name of the @keyframes animation. - animation-duration The seconds or milliseconds it takes to complete a cycle. The default is 0. - animation-timing-function Specifies the speed of the animation, the default is "ease" constant is linear. - Animation-delay Specifies when the animation starts. The default is 0. - Animation-iteration-count Specifies the number of times the animation is played, the default is 1, not limited to infinite. in animation-direction Specifies whether the animation will play backwards in the next cycle. The default is "normal", reverse alternate. - animation-play-state Specifies whether the animation is running or paused. The default is "running" and stop paused. to Animation-fill-mode Specifies the state outside the animation time of the object. + * */ - the /*animation-name:rotate; * animation-duration:2s; $ animation-timing-function:linear;Panax Notoginseng animation-delay:0s; - Animation-iteration-count:infinite; the Animation-direction:normal; + animation-play-state:running;*/ A the /*Animation attribute value Uniform syntax*/ + Animation:rotate 1.5s linear 0s infinite normal running; - } $ img{ $ animation-play-state:paused; - width:500px; - Height:500px; the } - Wuyi </style> the </Head> - <Body> Wu <imgsrc= "Img/fengche2.png"> - </Body> About </HTML>
Windmill Rotation Effect
Some of the CSS3 special Effects JavaScript Window object Timer delay timer etc. ing ...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
