• CSS3提高： CSS3 动画

    动画

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

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

    动画的基本使用

    制作动画分为两步：

    1.先定义动画

    2.再使用（调用）动画

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

    1. @keyframes 动画名称 {
    2.    0%{
    3.         width:100px;
    4.    }  
    5.    100%{
    6.         width:200px;
    7.    }
    8. }

     动画序列

    0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

    在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

    动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

    请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style>
    10.         /* from to 等价于  0% 和  100% */
    11.         /* @keyframes move {
    12.             from {
    13.                 transform: translate(0, 0);
    14.             }
    15.             to {
    16.                 transform: translate(1000px, 0);
    17.             }
    18.         } */
    19.         /* 动画序列 */
    20.         /* 1. 可以做多个状态的变化 keyframe 关键帧 */
    21.         /* 2. 里面的百分比要是整数 */
    22.         /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */
    23.         
    24.         @keyframes move {
    25.             0%{
    26.                 transform: translate(0,0)
    27.             }
    28.             25%{
    29.                 transform: translate(1000px,0)
    30.             }   
    31.             50%{
    32.                 transform: translate(1000px,500px)
    33.             }
    34.             75%{
    35.                 transform: translate(0,500px)
    36.             }
    37.             /* 不加100% 那个会不是自己回去的 而是重新开始了 */
    38.             100%{
    39.                 transform: translate(0,0)
    40.             }
    41.         }
    42.         
    43.         div {
    44.             width: 100px;
    45.             height: 100px;
    46.             background-color: pink;
    47.             animation-name: move;
    48.             animation-duration: 10s;
    49.         }
    50.     </style>
    51. </head>
    52.  
    53. <body>
    54.     <div>
    55.  
    56.     </div>
    57. </body>
    58.  
    59. </html>

    2. 元素使用动画

    1. div {
    2.        width: 200px;
    3.        height: 200px;
    4.        background-color: aqua;
    5.        margin: 100px auto;
    6.        /* 调用动画 */
    7.        animation-name: 动画名称;
    8.        /* 持续时间 */
    9.        animation-duration: 持续时间;
    10.     }

     动画跟我们2d转换很相似，但功能更加强大，例如打开页面就实现自动移动，2d转换就实现不了

     动画常用属性

    属性

    描述

    @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：动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态;

    animation: myfirst 5s linear 2s infinite alternate; 

    1. /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    2.             animation: move 2s linear 0s 1 alternate forwards;

     这代码效果跟上面的是一样的，但是要注意的顺序还有影响的 例如持续时间和何时开始 都是时间，那么写在前面的肯定为持续时间，前面俩个属性一定要写 name duration

     简写属性里面不包含 animation-play-state

    暂停动画：animation-play-state:   puased;   经常和鼠标经过等其他配合使用

    想要动画走回来 ，而不是直接跳回来：animation-direction   ：  alternate

    盒子动画结束后，停在结束位置：  animation-fill-mode  ：   forwards

    案例：热点图案例

    就是放4个div

     这个的原因是3个pulse叠在一起了，所有要用绝对定位，不占位置 

    布局效果

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         body{
    10.             background: #333;
    11.         }
    12.         .map{
    13.             width: 747px;
    14.             height: 617px;
    15.             background: url(media/map.png) no-repeat;
    16.             margin: 0 auto;
    17.             position: relative;
    18.             
    19.         }
    20.         .city{
    21.             top: 227px;
    22.             right: 193px;
    23.             position: absolute;
    24.             color: #fff;
    25.             
    26.         }
    27.         .dotted{
    28.             border-radius: 50%;
    29.             width: 8px;
    30.             height: 8px;
    31.             background-color: #09f;
    32.         }
    33.         .city div[class^="pulse"]{
    34.             /* 保证小波纹在父元素里面水平垂直居中 放大之后向四周发散 */
    35.             position: absolute;
    36.             width: 8px;
    37.             height: 8px;
    38.             top: 50%;
    39.             left: 50%;
    40.             transform: translate(-50%,-50%);
    41.             box-shadow:  0 0 12px #009dfd;
    42.             border-radius: 50%;
    43.  
    44.         }
    45.     </style>
    46.     
    47. </head>
    48. <body>
    49.     <div class="map">
    50.         <div class="city">
    51.             <!-- 小点 -->
    52.             <div class="dotted"></div>
    53.             <!-- 波纹 -->
    54.             <div class="pulse1"></div>
    55.             <div class="pulse2"></div>
    56.             <div class="pulse3"></div>
    57.         </div>
    58.     </div>
    59. </body>
    60. </html>

     pulse2被划掉了，这是因为权重不一样 

     完整代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         body{
    10.             background: #333;
    11.         }
    12.         .map{
    13.             width: 747px;
    14.             height: 617px;
    15.             background: url(media/map.png) no-repeat;
    16.             margin: 0 auto;
    17.             position: relative;
    18.             
    19.         }
    20.         .city{
    21.             top: 227px;
    22.             right: 193px;
    23.             position: absolute;
    24.             color: #fff;
    25.             
    26.         }
    27.         .tb{
    28.             top: 500px;
    29.             right: 80px;
    30.         }
    31.         .gz{
    32.             top: 532px;
    33.             right: 173px;
    34.         }
    35.         .dotted{
    36.             border-radius: 50%;
    37.             width: 8px;
    38.             height: 8px;
    39.             background-color: #09f;
    40.         }
    41.         .city div[class^="pulse"]{
    42.             /* 保证小波纹在父元素里面水平垂直居中 放大之后向四周发散 */
    43.             position: absolute;
    44.             width: 8px;
    45.             height: 8px;
    46.             top: 50%;
    47.             left: 50%;
    48.             transform: translate(-50%,-50%);
    49.             box-shadow:  0 0 12px #009dfd;
    50.             border-radius: 50%;
    51.             animation: pulse 1.2s linear infinite;
    52.         }
    53.         .pulse2{
    54.             animation-delay: 0.4s !important;
    55.         }
    56.         .pulse3{
    57.             animation-delay: 0.8s !important;
    58.            
    59.         }
    60.         @keyframes pulse{
    61.             0%{
    62.  
    63.             }
    64.             70%{
    65.                 /* transform: scale(); 我们不要用这个 这会导致阴影也会变大 */
    66.                 width: 40px;
    67.                 height: 40px;
    68.                 opacity: 1;
    69.             }
    70.             100%{
    71.                 width: 70px;
    72.                 height: 70px;
    73.                 opacity: 0;
    74.             }
    75.         }
    76.     </style>
    77.     
    78. </head>
    79. <body>
    80.     <div class="map">
    81.         <div class="city">
    82.             <!-- 小点 -->
    83.             <div class="dotted"></div>
    84.             <!-- 波纹 -->
    85.             <div class="pulse1"></div>
    86.             <div class="pulse2"></div>
    87.             <div class="pulse3"></div>
    88.         </div>
    89.         <div class="city tb">
    90.             <!-- 小点 -->
    91.             <div class="dotted"></div>
    92.             <!-- 波纹 -->
    93.             <div class="pulse1"></div>
    94.             <div class="pulse2"></div>
    95.             <div class="pulse3"></div>
    96.         </div>
    97.         <div class="city gz">
    98.             <!-- 小点 -->
    99.             <div class="dotted"></div>
    100.             <!-- 波纹 -->
    101.             <div class="pulse1"></div>
    102.             <div class="pulse2"></div>
    103.             <div class="pulse3"></div>
    104.         </div>
    105.     </div>
    106. </body>
    107. </html>

    速度曲线细节

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

    值

    描述

    linear

    动画从头到尾的速度是相同的。匀速

    ease

    默认。动画以低速开始，然后加快，在结束前变慢。

    ease-in

    动画以低速开始。

    ease-out

    动画以低速结束。

    ease-in-out

    动画以低速开始和结束。

    steps()

    指定了时间函数中的间隔数量（步长）

    steps()就是你要用几步来完成你的动画

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style>
    10.         div {
    11.             overflow: hidden;
    12.             font-size: 20px;
    13.             width: 0;
    14.             height: 30px;
    15.             background-color: pink;
    16.             /* 让我们的文字强制一行内显示 */
    17.             white-space: nowrap;
    18.             /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
    19.             animation: w 4s steps(10) forwards;
    20.         }
    21.         
    22.         @keyframes w {
    23.             0% {
    24.                 width: 0;
    25.             }
    26.             100% {
    27.                 width: 200px;
    28.             }
    29.         }
    30.     </style>
    31. </head>
    32.  
    33. <body>
    34.     <div>世纪佳缘我在这里等你</div>
    35. </body>
    36.  
    37. </html>

     

      案例：奔跑的熊大

    感觉是关键帧动画

     图片的大小为1600px---100px 所以我们设置了一个div200px-100px刚好挡住了

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style>
    10.         body {
    11.             background-color: #ccc;
    12.         }
    13.         
    14.         div{
    15.             position: absolute;
    16.             width: 200px;
    17.             height: 100px;
    18.             background: url(media/bear.png) no-repeat;
    19.             /* 我们元素可以添加多个动画，用逗号分各 */
    20.             animation: bear 1s steps(8) infinite,move 3s forwards;
    21.         }
    22.         @keyframes bear{
    23.             0%{
    24.                 background-position: 0 0;
    25.             }
    26.             100%{
    27.                 background-position: -1600px 0;
    28.             }
    29.         }
    30.         @keyframes move{
    31.             0%{
    32.                 left: 0;
    33.             }
    34.             100%{
    35.                 /* margin-left: -100px; */
    36.                 transform: translate(-50%);
    37.                 left: 50%;
    38.             }
    39.         }
    40.     </style>
    41. </head>
    42.  
    43. <body>
    44.     <div></div>
    45. </body>
    46.  
    47. </html>

  • 相关阅读:
    即时通讯开发如何设计一个百万级的消息推送
    第二篇 渲染框架2.x
    基于JAVA开发使用IDEA兼容Eclipse的动漫视屏网站
    72道Java线程面试题，一题一答案，不搞花里胡哨
    Hadoop分布式文件系统——HDFS
    FPGA设计-HDMI1接口设计开发
    第2章 Java基础
    【AI副业指南】用AI做心理测试图文号，单月稳赚7000+（附详细教程）
    开发仿抖音APP遇到的问题和解决方案
    ＜C++＞ 模板-上
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/127638534