前端HTML5CSS3动画

最新推荐文章于 2023-07-21 19:31:10 发布

天主极乐大帝

最新推荐文章于 2023-07-21 19:31:10 发布

阅读量775

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42218868/article/details/88762849

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>

        /*


  animation 	所有动画属性的简写属性，除了 animation-play-state 属性。 	3
animation-name 	规定 @keyframes 动画的名称。 	3
animation-duration 	规定动画完成一个周期所花费的秒或毫秒。默认是 0。 	3
animation-timing-function 	规定动画的速度曲线。默认是 "ease"。 	3
animation-delay 	规定动画何时开始。默认是 0。 	3
animation-iteration-count 	规定动画被播放的次数。默认是 1。 	  3次  infinite 无限
animation-direction 	规定动画是否在下一周期逆向地播放。默认是 "normal"。alternate  反向播放
animation-play-state 	规定动画是否正在运行或暂停。默认是 "running"。 	3
animation-fill-mode 规定对象动画时间之外的状态。*/
       .box {
           height: 300px;
           width: 300px;
           background-color: lime;
           /*动画  先定义后使用*/
           /*动画属性 animation:动画名字  动画持续时间s  延时时间 s  运动曲线  往返运动 */
           /*动画属性 animation:动画名字  动画持续时间S 延时时间S 运动曲线 往返运动*/
           animation: donghua 3s  linear 0.5s  infinite  ;
       }
            /*执行几次是指单向运动，往算一次，沿原路线返回也算一次，
            动画结束后直接返回原状态不是往返运动*/
            /*只有在执行多次时才能做往返运动 */
        /*不做往返运动时不论执行多少次都是单向运动*/
        @keyframes  donghua{
            0%{
                margin-left: 0;
                margin-top: 0;
            }


        /*linear直线的 linear*/

            /*0% 最初
            20% 50% 75%
            100% 最终
            */
         25%{
             margin-top: 300px;
             margin-left: 300px;
         }
            50%{
                margin-left: 600px;
                margin-top: 0;
            }
            100%{
                margin-left: 900px;
                margin-top: 300px;
            }
        }
                /*background-color: #a71d5d;*/

                /*border-radius: 30px;*/
                /*border: 2px solid black;*/

                /*transform: translateX(400px);*/
                /*border-radius: 50%;*/

    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>`在这里插入代码片`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>/*
animation 	所有动画属性的简写属性，除了 animation-play-state 属性。 	3
animation-name 	规定 @keyframes 动画的名称。 	3
animation-duration 	规定动画完成一个周期所花费的秒或毫秒。默认是 0。 	3
animation-timing-function 	规定动画的速度曲线。默认是 "ease"。 	3
animation-delay 	规定动画何时开始。默认是 0。 	3
animation-iteration-count 	规定动画被播放的次数。默认是 1。 	  3次  infinite 无限
animation-direction 	规定动画是否在下一周期逆向地播放。默认是 "normal"。alternate  反向播放
animation-play-state 	规定动画是否正在运行或暂停。默认是 "running"。 	3
animation-fill-mode 规定对象动画时间之外的状态。*/
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /*动画  先定义后使用*/
            /*动画属性 animation:动画名字  动画持续时间s  延时时间 s  运动曲线  往返运动 */
            animation: ani  3s  linear 2 alternate ;
            /*animation动画 animation  alternate交替轮流alternate alternate*/
            /*infinite无限的无穷的infinite infinite infinite infinite infinite*/
            /*infinite无限的 infinite infinite infinite infinite infinite*/
        }
        @keyframes ani {
            /*keyframes关键帧keyframes keyframes关键帧keyframes*/
            /*0% 最初
            20% 50% 75%
             100% 最终
            */
            /*%指运行到什么时候实现该效果，从动画开始时就执行,执行到%之几之后，这几个属性就不在执行*/
            0% {
                background-color: #a71d5d;
            }
            20% {
                border-radius: 30px;
                border: 2px solid black;
            }
            50% {
                transform: translateX(400px);

                border-radius: 50%;
                /*radius半径radius radius border边界border  border*/
                /*transform使变形使转换  translate转化 translateX(400PX)转化到X轴坐标400*/
            }
            100% {
                transform:translateX(400px);
                opacity: 0.3;
                /*opacity不透明 opacity*/
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

天主极乐大帝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端HTML5CSS3动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$美少女战士$</title> <style> /* animation 所有动画属性的简写属性，除了 animation-...
复制链接

扫一扫