HTML基础第八课（定时器，动画）

最新推荐文章于 2023-07-15 00:54:34 发布

wangsongll

最新推荐文章于 2023-07-15 00:54:34 发布

阅读量385

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/wangsongll/article/details/79592549

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、定时器

两种定时器：
a:一次性定时器，只会执行一次---setTimeout
setTimeout(function(){
    console.log("执行了f1");
     },1000)
b.循环定时器----setIntervval
var timer = setInterval(function(){
        console.log("我是循环定时器");
     },2000);

     清除定时器
     var first = document.getElementById('first');
    first.onclick = function(){
        var move = setInterval(function(){
            first.style.left = first.offsetLeft +5 +"px";
            if(first.offsetLeft>=500){
                clearInterval(move);
            }
        },20)
    }

二、动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        .redDiv{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 0px;
/*            动画名称*/
            animation-name: run;
/*            动画的时长*/
            animation-duration:1s;
/*            动画运动的方式
            */
            animation-timing-function:linear;
/*            动画的延迟*/
            animation-delay: 1s;
/*            infinite 无限（动画的次数）*/
            animation-iteration-count:1;
/*            动画方向
            reverse反向
            normal 正常
            alternate 1/3/5..正向 2/4/6反向
            alternate-reverse 1/3/5..反向  2/4/6正向
            */
            animation-direction: normal;
/*            animation-fill-mode
            forwards 动画结束的时候停留在当前位置（动画之后）
            backwards动画结束的时候回到原来的位置,
            在动画延迟期间，元素的位置在动画起始的位置（动画之前）

            both:上面两个都有

            */
            animation-fill-mode:both;

/*            animation: ;*/
/*            -webkit-animation:;*/
/*            -moz-animation:;*/

        }
        @keyframes run{
/*
            from{
                left: 0px;
            }
            to{
               left: 500px;
                background-color: aqua;
            }*/
             0%{
                left: 0px;
            }
            25%{
                left: 250px;
            }
            70%{
                left: 250px;
            }
            100%{
               left: 500px;
                background-color: aqua;
            }
        }

    </style>
</head>
<body>
    <div class="redDiv"></div>
</body>
<script>

    </script>
</html>

wangsongll

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML基础第八课（定时器，动画）

一、定时器两种定时器：a:一次性定时器，只会执行一次---setTimeoutsetTimeout(function(){ console.log("执行了f1"); },1000)b.循环定时器----setIntervvalvar timer = setInterval(function(){ console.log("我是循环定时器"); ...
复制链接

扫一扫