CSS 内容总结(七)动画

最新推荐文章于 2024-08-18 23:13:10 发布

辛跃

最新推荐文章于 2024-08-18 23:13:10 发布

阅读量70

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_47735503/article/details/114415461

版权

CSS 内容总结

1.动画的基本使用

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

先定义动画

用@keyframes定义动画（类似定义类选择器）

@keyframes 动画名称{
    0%{
        width:100px;
    }
    100%{
        width:200px;
    }
}
/*from to 也可*/
@keyframes 动画名称{
    from{
        width:100px;
    }
    to{
        width:200px;
    }
}

再使用（调用）动画

div{
    animation-name:动画名称;
    animation-duration:持续时间s;
}

    @keyframes move {
      0% {
        transform: translate(100px, 0);
      }

      100% {
        transform: translate(1000px, 0);
      }
    }

    .box {
      animation-name: move;
      animation-duration: 2s;
      width: 200px;
      height: 200px;
      background-color: rgb(30, 156, 97);
      transition: all 1s;
      /* transform-origin: left bottom; */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

2.动画序列

可以做多个状态的变化

@keyframes 动画名称{
    0%{
        width:100px;
    }
    25%{
        width:200px;
    }
    50%{
        width:300px;
    }
    75%{
        width:200px;
    }
    100%{
        width:100px;
    }
}

3.动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必须）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0.（必须）
animation-timing-function	规定动画的速度曲线，默认是ease
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite循环播放
animation-direction	规定动画是否在下一周期逆向播放，默认是normal，alternate逆向播放
animation-play-state	规定动画是否正在运行或暂停。默认是“running”，还有“paused”
animation-fill-mode	规定动画结束后状态，保持forwards，回到起始backwards

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

在这里插入图片描述

steps():搭配 white-space：nowrap、overflow：hidden 实现打字机效果

4.动画属性简写

animaton：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态

animaton：move 2s linear 0s infinite alternate forwards

5.综合案例

大数据热点图

<!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>Document</title>
  <style>
    @keyframes move {
      0% {
        width: 6px;
        height: 6px;
        opacity: 1;
      }

      70% {
        width: 40px;
        height: 40px;
        opacity: .5;
      }

      100% {
        width: 70px;
        height: 70px;
        opacity: 0;
      }
    }

    .box {
      position: relative;
      width: 702px;
      height: 521px;
      background: url(img/dsj.png) no-repeat;
      margin: auto;
    }

    .box .city {
      position: absolute;
      top: 188px;
      right: 198px;
      color: #fff;
    }

    .city .dian {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #09f;
    }

    .city div[class^='a'] {
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      box-shadow: 0 0 12px #09f;
      animation: move 1s linear infinite;
    }

    .city div.a_second {
      animation-delay: .4s;
    }

    .city div.a_third {
      animation-delay: .8s;
    }

    .box .tw {
      top: 410px;
      right: 107px;
    }

    .box .gz {
      top: 445px;
      right: 199px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="city">
      <div class="dian"></div>
      <div class="a_first"></div>
      <div class="a_second"></div>
      <div class="a_third"></div>
    </div>
    <div class="tw city">
      <div class="dian"></div>
      <div class="a_first"></div>
      <div class="a_second"></div>
      <div class="a_third"></div>
    </div>
    <div class="gz city">
      <div class="dian"></div>
      <div class="a_first"></div>
      <div class="a_second"></div>
      <div class="a_third"></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>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    @keyframes move {
      from {
        background-position: 0 0;
      }

      to {
        background-position: -1600px 0;
      }
    }

    @keyframes move2 {
      from {
        transform: translate(0, 0);
      }

      to {
        transform: translate(90%, 0);
      }
    }

    body {
      background-color: rgb(218, 132, 132);
    }

    div {
      position: relative;
      width: 400px;
      height: 100px;
      background: url(img/20200609222052986.png)no-repeat;
      overflow: hidden;
      animation: move .4s steps(4) infinite, move2 3s ease forwards;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

辛跃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 内容总结(七)动画

CSS 内容总结1.动画的基本使用2.动画序列3.动画常用属性4.动画属性简写5.综合案例1.动画的基本使用动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果先定义动画用@keyframes定义动画（类似定义类选择器）@keyframes 动画名称{ 0%{ width:100px; } 100%{ widt
复制链接

扫一扫