HTML之动画

最新推荐文章于 2024-01-15 13:51:55 发布

Mr_White01

最新推荐文章于 2024-01-15 13:51:55 发布

阅读量632

点赞数 1

分类专栏： html5 文章标签： html

本文链接：https://blog.csdn.net/Mr_White01/article/details/72860213

版权

1.关键帧动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div2{
                margin: 100px 200px;
                width: 200px;
                height: 200px;
                background: black;
                position: relative;
                animation: move 5s infinite;
            }
            .div1{
                height: 100px;
                width: 100px;
                margin: 200px auto;
                line-height: 100px;
            }
            @keyframes move{
                /*from{left: 0px;top: 0px;}
                to{left: 500px;top: 0px;background: white;}*/
                0%{
                    left: 0px;top: 0px;
                }
                25%{
                    left: 500px;top: 0px;background:  white;
                }
                50%{
                    left: 500px;top: 500px;background:  white;
                }
                75%{
                    left: 0px;top: 500px;background:  white;
                }
                100%{
                    left: 0px;top: 0px;background:  white;
                }
            }
            /*@keyframes:关键帧;
            move:动画名称;
            {}需要改变的样式;
            from/0%:开始值;
            to/100%:结束值;*/
        </style>
    </head>
    <body>
        <div class="div1"><img src="img/mp33341098_1443159964766_1_th.jpeg"/></div>
        <div class="div2"><img src="img/ATWJ$F_Z)MZE%W[[AD37{FU.jpg"/></div>
    </body>
</html>

2.animation

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            @keyframes changcolor{
                from{
                    background: dodgerblue;
                    margin-left: 0px;
                    transform: rotateZ(0deg);
                }
                to{
                    background: blueviolet;
                    margin-left:

最低0.47元/天解锁文章

Mr_White01

关注

1
点赞
踩
2

收藏

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

1.关键帧动画<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div2{ margin: 100px 200px; w
复制链接

扫一扫