Animation
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <style>@keyframes Colorchange{0% {color:Red; }20%{Color:Yellow; }50%{Color:Aquamarine; }80%{Color:Beige; }100%{Color:Chartreuse; }} P{font-size:50px; /*Animation name*/Animation-name:Colorchange; /*Animation Duration*/animation-duration:3s; /*Animation Speed Curve*/animation-timing-function:Linear; /*Animation delay Time*/Animation-delay:2s; /*number of animation plays Infinite Unlimited plays*/Animation-iteration-count:2; /*whether the animation plays backwards in the next*/ /*animation-direction:alternate;*/Animation-fill-mode:forwards; } </style> <title>Animation</title></Head><Body><P>Jerry Education</P></Body></HTML>
Run effect is font color
Mouse Touch Slide Bar
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <style>#container{width:200px;Height:50px;Background-color:#cccccc; }#top{width:150px;Height:100%;float: Right;Background-color:#F2AD0A; }#hidden{width:150px;Height:0px;Background-color:#4D2E83;position:relative;Top:50px;transition:All 1s ease;Overflow:Hidden; }#top: hover #hidden{Height:300px; } </style> <title>The teacher made the bar</title></Head><Body><DivID= "Container"> <DivID= "Top"> <DivID= "hidden"> <ul> <Li>Asfdasdf</Li> <Li>Sdfasdf</Li> <Li>Asdfjl</Li> </ul> </Div> </Div></Div></Body></HTML>
Operation diagram:
After the cursor moves to the orange area: a slide bar appears
Animation of CSS