CSS3伪类实现动画旋转效果

最新推荐文章于 2023-05-22 19:49:17 发布

dizhi9505

最新推荐文章于 2023-05-22 19:49:17 发布

阅读量282

点赞数

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

版权

一个简单的动画效果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>

转载于:https://www.cnblogs.com/jikaiyang/p/5747575.html

dizhi9505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3伪类实现动画旋转效果

一个简单的动画效果demo，keyframes为关键帧，图片贴在代码下方。利用了伪类实现css3动画效果，初学者可以看一下，恩。<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Key...
复制链接

扫一扫