css3中的动画

最新推荐文章于 2024-07-22 19:12:50 发布

BMG-Princess

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量270

点赞数

分类专栏：前端-动画文章标签： css 动画

本文链接：https://blog.csdn.net/Hei_lovely_cat/article/details/103361256

版权

前端-动画专栏收录该内容

3 篇文章 0 订阅

订阅专栏

动画序列案例命令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 动画序列 */
        /* 1. 可以做多个状态的变化  keyframes 关键帧*/
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总得时间（我们这个案例10s）的划分 */
        @keyframes move{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(1000px,0);
            }
            50%{
                transform: translate(1000px,500px);
            }
            75%{
                transform: translate(0,500px);
            }
            100%{
                transform: translate(0,0);
            }
        }
        div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>`

在这里插入图片描述

元素使用动画

div{
                width:200px;
                height:200px;
                background-color:aqua;
                margin:100px auto;
                /*调用动画*/
                animation-name：动画名称；
                /*持续时间*/
                animation-duration：持续时间；
            }`

动画常用属性
动画简写属性

animation ： 动画名称 持续时间  运动开始  播放次数  是否反方向  动画起始或者结束的状态；
animation: myfirst 5s linear   2s   infinite   alternate;
简写属性里面不包含 animation-play-state
暂停动画 ： animation-play-state: puased; 经过和鼠标经过等其他配合使用
想要动画走回来， 而不是直接跳回来： animation-direction  ：  alternate
盒子动画结束后，停在结束位置 ： animation-fill-mode ： forwards

热点图动画

   body {
    background-color: white;
   }
   
   .map {
    position: relative;
    width: 747px;
    height: 616px;
    background: url(images/map.png) no-repeat;
    margin: 0 auto;
   }
   
   .city {
    position: absolute;
    top: 227px;
    right: 193px;
    color: #fff;
   }
   
   .tb {
    top: 500px;
    right: 80px;
   }
   
   .gz {
    top: 532px;
    right: 171px;
   }
   /*中心圆点*/
   .dotted {
    width: 8px;
    height: 8px;
    background-color: #09f;
    border-radius: 50%;
   }
   
   .city div[class^="pulse"] {
    /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    box-shadow: 0 0 12px #009bfd;
    border-radius: 50%;
    animation: pulse 1s linear infinite;
   }
   
   .city div.pulse2 {
    animation-delay: 0.4s;
   }
   
   .city div.pulse3 {
    animation-delay: 0.6s;
   }
   
   @keyframes pulse {
    0% {}
    50% {
     /* transform: scale(5); 我们不要用scale 因为它会让阴影变大 */
     width: 30px;
     height: 30px;
     opacity: 1;
    }
    75% {
     width: 45px;
     height: 45px;
     opacity: 0.6;
    }
    100% {
     width: 60px;
     height: 60px;
     opacity: 0;
    }

<div class="map">
   <div class="city">
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
   </div>
   <!--<div class="city tb">
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
   </div>
   <div class="city gz">
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
   </div>-->
  </div>

在这里插入图片描述

速度曲线细节

animation-timing-function ： 规定动画的速度曲线，默认是“ease”

在这里插入图片描述

div{
            overflow: hidden;
            font-size: 40px;
            width: 0;
            height: 30px;
            background-color: greenyellow;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要再写 ease 或者 linear 了 */
            animation: w 4s steps(5) forwards;
        }
        @keyframes w{
            0%{
                width: 0;
                height: 50px;
            }
            100%{
                width: 200px;
                height: 50px;
            }