HTML连载72-动画效果及其他属性

最新推荐文章于 2021-05-26 23:31:54 发布

睿里睿气

最新推荐文章于 2021-05-26 23:31:54 发布

阅读量170

点赞数 1

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44630050/article/details/104645276

版权

HTML 专栏收录该内容

86 篇文章 2 订阅

订阅专栏

一、动画效果
1.过渡与动画相类似，都需要三要素，那么他们的区别在哪里呢？
答：过渡必须是人为的触发才会执行动画，动画不需要人为的触发就可以自动执行动画。
2.相同点：
（1）过度和动画都是用来给元素添加动画的；（2）过渡和动画都是系统新增的一些属性；（3）过渡和动画都需要满足三要素才会有动画效果
3.动画的三要素
（1）告诉系统需要执行哪个动画；

animation-name:动画名称;

（2）告诉系统我们需要自己创建一个自定义名称的动画

@keyframs  动画名称{
    from{
    }
    to{
    }
}

（3）动画持续的时长

animation:时间；/*这里的时间可以使用秒做单位*/

    <style>
        *{
            padding:0;
            margin:0;
        }
        div{
            width:100px;
            height: 50px;
            background-color: red;
            
            animation-name:lnj;
            animation-duration: 1s;
        }
        @keyframes lnj {
            from{
                margin-left:0;
            }
            to{
                margin-left:500px;
            }
        }
.........省略代码........
<div></div>

72.1

二、动画模块其他属性

   <style>
        *{
            padding:0;
            margin:0;
        }
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            animation-name:sport;
            animation-duration: 1s;
            animation-delay:1s;/*动画执行前的延迟时间*/
            animation-timing-function:linear;/*动画持续的速度函数类型*/
            animation-iteration-count:3;/*动画执行的次数*/
            animation-direction:alternate;/*动画执行循环往复，循环往复一次是算两次动画效果的，如果使用normal，那么就是重复动画而已，默认是此值*/
            animtion-play-state:running;/*默认是running,也就是执行动画*/
        }
        @keyframes sport {
            from{
                margin-left:0px;
            }
            to{
                margin-left:500px;
            }
        }
        div:hover{
            /*告诉系统当前动画是否需要暂停*/
            animation-play-state:paused;
        }
.........省略代码.......
<div></div>

72.2
三、动画效果其他属性下
通过我们的观察，动画是有一定的状态的
（1）等待状态；（2）执行状态；（3）结束状态

animation-fill-mode:none;

属性值有四种
none:不做任何的改变；
forwards:让元素结束状态保持动画的最后一帧的样式
backwards:让元素等待状态的时候显示动画的第一帧的样式
both:两个属性值的效果都显示。

    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width: 100px;
            height: 50px;
            background-color: red;
            animation-name:sport;
            animation-duration:2s;
        }
        @keyframes sport {/*这里的百分比代表占用的时间*/
            0%{
                margin-left:0px;
                margin-top:0px;
            }
            10%{
                margin-left: 300px;
                margin-top:0px;
            }
            20%{
                margin-left:300px;
                margin-top:300px;
            }
            30%{
                margin-left:0px;
                margin-top:300px;
            }
            100%{
                margin-left:0px;
                margin-top:0px;
            }
        }

        .box2{
            width: 100px;
            height: 50px;
            background-color: red;
            margin:100px auto;
            animation-name:sport2;
            animation-duration:2s;
            animation-fill-mode:backwards;
            animation-delay:2s;
        }
        @keyframes sport2 {
            0%{
                tranform:rotate(10deg);
            }
            25%{
                transform:rotate(45deg);
            }
            50%{
                transform:rotate(79deg);
            }
            100%{
                transform:rotate(160deg);
            }
        }
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>

72.3

四、源码：
D175_CartoonModule.html
D176_OtherAttrubuteOfAnimationModule.html
D176_OtherAttributeOfAnimationModule2.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D175_CartoonModule.html
https://github.com/ruigege66/HTML_learning/blob/master/D176_OtherAttrubuteOfAnimationModule.html
https://github.com/ruigege66/HTML_learning/blob/master/D176_OtherAttributeOfAnimationModule2.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
72.4

睿里睿气

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML连载72-动画效果及其他属性

一、动画效果1.过渡与动画相类似，都需要三要素，那么他们的区别在哪里呢？答：过渡必须是人为的触发才会执行动画，动画不需要人为的触发就可以自动执行动画。2.相同点：（1）过度和动画都是用来给元素添加动画的；（2）过渡和动画都是系统新增的一些属性；（3）过渡和动画都需要满足三要素才会有动画效果3.动画的三要素（1）告诉系统需要执行哪个动画；animation-name:动画名称;（2...
复制链接

扫一扫