CSS3伪类实现动画旋转效果

时间：2016-08-07 23:26:11 阅读：988 评论：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）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行