动画的基本使用

最新推荐文章于 2024-03-28 10:35:58 发布

march on_6

最新推荐文章于 2024-03-28 10:35:58 发布

阅读量1.4k

点赞数 2

文章标签：动画 css3 css

本文链接：https://blog.csdn.net/yyh619/article/details/122728462

版权

—— animation调用

定义及语法

使用：用@keyframes定义动画，属于CSS3范畴；

格式：

 @keyframes 动画名称  {
         from / 0% {
                 起始态；
          }
          n% {
              中间态（可多个）；
          }
          to / 100% {
                 末尾态；
          }
     }

动画的调用

调用：用animation属性调用，属于CSS语法；

格式：

在对应的div内部填写：

div{

animation-name:动画名称；

animation-duration：持续时间（s）；

}

重点注意

定义时，百分比要为整数；
对应百分比就是 总时间的划分 。
运用多组动画时，由于层叠性，在调用下要用逗号隔开。

常用属性

@keyframes —— 规定动画；
animation-name —— 动画名称；
animation-timing-function —— 速度曲线 — — 默认：ease、匀速：linear、间隔步长：steps（n）,可制作打字机、动图效果;
animation-duration —— 动画一个周期花费时间；
animation-delay —— 动画何时开始 — — 默认：0s；
animation-iteration-count —— 动画播放次数 — — 默认：1次、无限次：infinite；
animation-direction —— 动画下一周期播放方向 — — 默认：normal、逆播放：alternate；
animation-play-state —— 规定动画运行或停止 — — 默认：running、暂停：paused，通常与hover共用；
animation-fill-mode —— 动画结束后状态 — — 默认：backwards、停此处：forwards。

调用速写

（重点）animation : name duration timing-function （linear匀速） delay（延迟几秒） iteration-count（循环次数） direction（结束时方向）fill-mode（结束后位置）;

典型例子

波点效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>月光波点</title>
</head>
<style>
    .container{
        width: 1000px;
        height: 600px;
        background: url(图片地址) no-repeat center/100% 100%;
        position: relative;
    }
    
    .main{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 265px;
        left: 465px;
    }

    .wave{
        width: 43px;
        height: 45px;
        box-shadow: 0 0 12px rgb(146, 155, 168);
        position: absolute;
        right: 50%;
        bottom: 50%;
        transform: translate(50%,50%);
        border-radius: 50%;
        animation: wave 1s infinite;
    }

    .main .a-2{
        animation-delay: 0.3s;
    }

    @keyframes wave {
        0% {}
        70% {
            width: 80px;
            height: 80px;
            opacity: 1;
        }
        100% {
            width: 120px;
            height: 120px;
            opacity: 0;
        }
    }

</style>
<body>
    <div class="container">
        <div class="main">
            <div class="wave a-1"></div>
            <div class="wave a-2"></div>
        </div>
    </div>
    
</body>
</html>

放映图标效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知否放映图标</title>
</head>
<style>
    .container-box{
        height: 300px;
        width: 300px;
        overflow: hidden;
    }
    .box{
        height: 72px;
        width: 150px;
        border:3px solid  rgb(14, 201, 226);
        margin: 100px auto;
        border-radius: 20px;
        position: relative;
        animation: opacity 1s linear  infinite alternate forwards;
    }
    .triangle{
        height: 0;
        width: 0;
        border: solid;
        border-color: rgba(0, 0, 255, 0) rgba(0, 0, 255, 0) white rgba(0, 0, 255, 0);
        border-width: 53px 43px;
        position: absolute;
        right: 50%;
        bottom: -36px;
        transform: translate(50%,0);
        animation: move 1s linear  infinite alternate forwards;
}

    .triangle::after{
        content: "";
        height: 0;
        width: 0;
        border:solid;
        border-color: rgba(0, 0, 255, 0) rgba(0, 0, 255, 0) rgba(23, 201, 224, 0.534) rgba(0, 0, 255, 0);
        border-width: 39px 31px;
        position: absolute;
        right:50%;
        bottom:-45px;
        transform: translate(50%,0);
    }
    @keyframes move {
        0%{

        }
        100%{
            bottom: -18px;
        }
    }

    @keyframes opacity {
        0%{
            background-color: rgba(0, 0, 255, 0);
        }
        100%{
            background-color: rgba(58, 194, 228, 0.377);
        }
    }
</style>
<body>
    <div class="container-box">
        <div class="box">
        <div class="triangle"></div>
        </div>
    </div>
</body>
</html>

打字机及循环移动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机及循环移动效果</title>
</head>
<style>
    .container{
        height: 30px;
        border-radius: 10px;
        border: 1px ridge cadetblue; 
        font-size:20px;
        font-family: 翩翩体-简;
        /* 共15个字，分15步 */
        animation: main 3s steps(15) forwards,move 20s linear 1s infinite alternate;
        overflow: hidden;
    }

    @keyframes main {
        0%{
            width: 0px;
        }
        100%{
            /* 每个字20px，则共需300px。 */
            width: 300px;
        }
    }

    @keyframes move {
        from {
            transform: translate(0,0) rotate(0deg);
        }
        25%{
            transform: translate(1000px,0) rotate(90deg);
        }
        50%{
            transform: translate(1000px, 600px) rotate(180deg);
        }
        75%{
            transform: translate(0,600px) rotate(270deg);
        }
        to{
            transform: translate(0,0) rotate(360deg);
        }
    }

    .container:hover{
        /* 触碰停止效果 */
        animation-play-state: paused;
    }
</style>
<body>
    <div class="container">
        我是图图小淘气，面对世界很好奇
    </div>
</body>
</html>

— — — — 完结

march on_6

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
动画的基本使用

—— animation调用目录定义及语法动画的调用重点注意常用属性调用速写典型例子波点效果放映图标效果打字机及循环移动效果定义及语法使用：用@keyframes定义动画，属于CSS3范畴；格式：@keyframes 动画名称 { from / 0% { 起始态； } n% { 中间态（可多个）； ...
复制链接

扫一扫