首页 > Web开发 > 详细

CSS3伪类实现动画旋转效果

时间:2016-08-07 23:25:08      阅读:700      评论:0      收藏:0      [点我收藏+]
一个简单的动画效果demo,keyframes为关键帧,图片贴在代码下方。利用了伪类实现css3动画效果,初学者可以看一下,恩。
<!
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述"> <title>css3 animation</title> <style> *{margin:0px;padding:0px;}/*去除默认外边距、内边距*/ 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{/*选中input框自动旋转*/ animation:clockwise 1s steps(30) infinite; } /*自定义动画:名称 动一次时间 多少步执行完 无限重复*/ input:checked ~ span{ display:none; } @keyframes clockwise{/*顺时针旋转*/ 0%{ background-position:0px 0px; } 100%{ background-position:-8192px 0px; } } .anticlockwise:hover ~ .rotate{ animation:anticlockwise 1s steps(30) infinite; } .clockwise:hover ~ .rotate{ animation:clockwise 1s steps(30) infinite; } @keyframes anticlockwise{/*逆时针旋转*/ 0%{ background-position:-8192px 0px; } 100%{ background-position:0px 0px; } } </style> </head> <body> <!--选中自动播放--> <input id="auto" class="auto" type="checkbox" checked / > <label class="auto-rotate" for="auto">Auto &#x21bb;</label><br/> <!-- 右箭头 --> <span class="anticlockwise">&#x2190;</span> <!-- 左箭头 --> <span class="clockwise">&#x2192;</span> <div class="rotate"></div> </body> </html>技术分享

 

CSS3伪类实现动画旋转效果

原文:http://www.cnblogs.com/jikaiyang/p/5747575.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!