Home > Developer > Web Develop
: The hover pseudo-class selector can be used for all selectors (only the properties of the selector are executed on hover)
New transition module in CSS3: Transition Property (attribute) duration (time spent by transition effect) timing-function (time curve of transition effect) delay (transition effect when) shorthand: Transition: Transition Attribute Transition time transition delay (!!) If you have more than one set of properties to change, you can write a few groups directly by separating them with commas if you have the same rules: All 5s means 5s complete
Three elements: must attribute changes must tell the system which property changes must tell the system to change the length of time
To implement multiple property change effects, separate them with commas
When designing a transition effect: 1: Write the basic interface, regardless of the transition
2: Modify the properties we need to modify
3: Add a transition to the attribute element that we think needs to be modified
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Transition module</title>6 <style>7 *{8 padding:0;9 margin:0;Ten } One Div{ A Background-color:Red; - width:100px; - Height:50px; the /*tell the system that the property needs to perform the transition effect*/ - Transition-property:Width,background-color; - /*tell the system how long the transition effect lasts*/ - transition-duration:3s,3s; + /*tell the system how many seconds to delay before it changes .*/ - Transition-delay:1s,1s; + } A Div:hover{ at width:300px; - Background-color:#5bc0de; - } - ul{ - List-style:None; - width:500px; in Height:100px; - Background-color:Yellow; to } + Li{ - width:50px; the Height:20px; * Background-color:Red; $ Transition-property:Width,background-color;Panax Notoginseng transition-duration:3s,3s; - } the Ul:hover Li{ + width:500px; A Background-color:#5bc0de; the } + . Box1{ - transition-timing-function:Ease; $ } $ . Box2{ - transition-timing-function:ease-in; - } the . Box3{ - transition-timing-function:Ease-out;Wuyi } the . Box4{ - transition-timing-function:Ease-in-out; Wu } - . Box5{ About transition-timing-function:Linear; $ } - - - </style> A </Head> + <Body> the - <Div></Div> $ <BR> the <ul> the <Liclass= "Box1">Box1</Li> the <Liclass= "Box2">Box2</Li> the <Liclass= "Box3">Box3</Li> - <Liclass= "Box4">Box4</Li> in <Liclass= "Box5">Box5</Li> the </ul> the </Body> About </HTML>
CSS Animation transition module
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
