a simple animation effect demo,keyframes a keyframe, and the picture is pasted underneath the code. Using pseudo-class to achieve CSS3 animation effect, beginners can look at, uh.
<! DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "UTF-8"> <Metaname= "Keywords"content= "keywords"> <Metaname= "Description"content= "description"> <title>CSS3 Animation</title> <style> *{margin:0px;padding:0px;}/*remove default margin, padding*/Body{width:272px;margin:0 Auto;}. Auto{Margin-top:40px;}. Auto-rotate{Color:#333;Font-weight:Bold;font-family:Sans-serif; }span{font-size:40px;Color:#000;Font-weight:Bold;font-family:Sans-serif;cursor:Pointer;}. anticlockwise{float: Left;}. Clockwise{float: Right}. Rotate{width:273px;Height:273px;margin:Auto;background:URL ("1.jpg") no-repeat;}input:checked ~. Rotate{/*Check the input box to rotate automatically*/Animation:clockwise 1s steps (infinite); } /*Custom Animation: The name moves one time how many steps to complete infinite repetition*/input:checked ~ span{Display:None; }@keyframes Clockwise{/*Clockwise rotation*/0%{background-position:0px 0px; }100%{background-position:-8192px 0px; }}. anticlockwise:hover ~. Rotate{Animation:anticlockwise 1s steps (infinite); }. clockwise:hover ~. Rotate{Animation:clockwise 1s steps (infinite); }@keyframes anticlockwise{/*counter-clockwise rotation*/0%{background-position:-8192px 0px; }100%{background-position:0px 0px; } } </style> </Head> <Body> <!--Check Auto Play - <inputID= "Auto"class= "Auto"type= "checkbox"checked/> <labelclass= "Auto-rotate" for= "Auto">Auto & #x21bb;</label><BR/> <!--RIGHT ARROW - <spanclass= "Anticlockwise">& #x2190;</span> <!--left ARROW - <spanclass= "Clockwise">& #x2192;</span> <Divclass= "Rotate"></Div> </Body></HTML>
CSS3 pseudo-class for animated rotation effect