animation动画

最新推荐文章于 2022-11-25 14:52:08 发布

晨曦06

最新推荐文章于 2022-11-25 14:52:08 发布

阅读量87

点赞数

分类专栏： animation动画文章标签： css3 animation

本文链接：https://blog.csdn.net/m0_53266704/article/details/117523431

版权

animation动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里我们写了一个css3的动画，写了一个小效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            cursor: pointer;
            text-align: center;
            line-height: 190px;
            font-size: 18px;
            color: white;

            /*兼容*/
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;

            background: lightcoral;
            position: absolute;
            top: 0;
            left: 0;
            //动画：演示10s 2s轻松进入无限交替运行；
            animation: demo 10s 2s ease-in-out infinite alternate running;
        }
        //关键帧演示
        @keyframes demo {
            0% {
                top: 0;
                left: 0;
                background: lightblue;
                border-radius: 50px
            }

            25% {
                top: 0;
                left: 500px;
                background: lightgreen;
                border-radius: 20px
            }

            50% {
                top: 500px;
                left: 500px;
                background: lightseagreen;
                border-radius: 70px
            }

            75% {
                top: 500px;
                left: 0px;
                background: lightsalmon;
                border-radius: 100px
            }

            100% {
                top: 0;
                left: 0;
                background: lightcoral;
                border-radius: 30px
            }
        }
        #box.click {
            //动画播放状态：暂停；
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div id="box">
        点我暂停
    </div>
    <script>
        // 点击元素暂停动画，再次点击继续动画
        var oBox = document.getElementById('box');
        var active = true;
        oBox.onclick = function () {
            if (active) {
                this.className = 'click';
                active = false
            } else {
                this.className = '';
                active = true;
            }
        }
    </script>
</body>
</html>

出来的是个动图，博主不会弄动图所有有的想看可以直接赋值代码看效果哦

晨曦06

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
animation动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 200px; height: 200px; margin: 0 auto; c.
复制链接

扫一扫