郑州Web前端进阶教程之Vue中动画效果实现方法

联网更迭迅速，Web前端作为热门编程语言也在不断的更新升级，面对这样的趋势，你不学习就是在变相的倒退，距离高薪就会越来越远。为了能够在激烈的职场竞争中保持主动权，很多人选择学习进阶，接下来千锋郑州老师就给大家分享Vue中动画效果的实现方法。

　　1、哪些元素/那些组件适合在那些条件下实现动画效果?

条件渲染(使用v-if)：v-if是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。包括3种指令用法：v-if=(true/false)/v-else/v-else-if=(true/false)

条件展示(使用v-show)：相比v-if，v-show简单得多——元素始终被编译并保留，只是简单地基于CSS切换。简单来说，v-if有更高的切换开销，v-show有更高的初始化渲染开销，所以需要频繁的切换使用v-show，如果项目运行时条件切换少，就用v-if。

动态组件：主要是使用keep-alive。动态切换掉的组件(非当前显示的组件)是被移除掉了，如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。

组件根节点：每个元素都是一个节点，每段文字也是一个节点，甚至注释也都是节点。一个节点就是页面的一个部分。如果把页面看成一颗倒着的树，根实例就是根，可以理解为入口，组件们就是枝干。

2、Vue中动画的实现方式有四种：CSS动画、使用animate.css动画库、使用JS钩子函数、使用velocity js动画库。今天的郑州Web前端进阶教程主要讲解CSS动画，代码如下：

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

如果你想了解更多Vue相关的知识点或者Web前端进阶教程资料，可以关注“千锋郑州校区”微信公众号，定期发布技术文章和行业咨询!

. CSS 动画有哪些? transition过渡与animation动画的区别是什么？

1. transition 过渡
2. transform 变形
3. animation 关键帧动画

2. 首先介绍各个动画的语法+属性

2.1 transition 过渡

1. 语法:
   1. transition: property duration timing-function delay
      1. transition: 属性是个复合属性
      2. transition-property: 规定设置过渡效果的 css 属性名称
      3. transition-duration: 规定完成过渡效果需要多少秒或毫秒
      4. transition-timing-function: 指定过渡函数, 规定速度效果的速度曲线
      5. transition-delay: 指定开始出现的延迟时间
2. 默认值分别为: all 0 ease 0;
   1. 注: transition-duration 时长为 0, 不会产生过渡效果

3. 改变多个 css 属性的过渡效果时, 代码示例:
   1.  a {
         transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
       }
4. 子属性:
   1. transition-property
      1. transition-property: none |all |property;
         1. 值为 none 时, 没有属性会获得过渡效果
         2. 值为 all 时, 所有属性都将获得过渡效果
         3. 值为指定的 css 属性应用过渡效果, 多个属性用逗号隔开
     2. color : background-color, border-color, color, outline-color ;
     3. length : 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,
     4. integer : 离散步骤（整个数字）, 在真实的数字空间, 以及使用 floor()转换为整数时发生 如: outline-offset,z-index
     5. number : 真实的（浮点型）数值, 如:zoom,opacity,font-weight
     6. rectangle : 通过x, y, width 和 height（转为数值）变换，如: crop
     7. visibility : 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility
     8. shadow : 作用于color, x, y 和 blur（模糊）属性,如：text-shadow
     9. background-image : 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画。
   2. transition-duration
     1. transition-duration: time;
        1. 该属性主要用来设置一个属性过渡到另一个属性所需的时间, 也就是从旧属性过渡到新属性花费的时间长度, 俗称持续时间
   3. transition-timing-function
     1. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
        1. 该属性指的是过渡的 “缓动函数” 。 主要用来指定浏览器的过渡速度, 以及过渡期间的操作进展情况, 解释下:
        2. 注意: 值 cubic-bezier(n,n,n,n) 可以定义自己的值, 如 cubic-bezier(0.42,0,0.58,1)
   4. transition-delay
      1. 这个属性没什么说的了, 就是过渡效果开始前的延迟时间, 单位秒或者毫秒

2.2 transform 变形

1. 可以利用 transform 功能来实现文字或图像的 旋转、缩放、倾斜、移动 这四种类型的变形处理
   1. 旋转 rotate
      1. 用法: transform: rotate(45deg);
      2. 共一个参数 “角度”, 单位 deg 为度的意思, 正数为顺时针旋转, 负数为逆时针旋转, 上述代码作用是顺时针旋转45度
   2. 缩放 scale
      1. 用法: transform: scale(0.5)  或者  transform: scale(0.5, 2);
      2. 一个参数时: 表示水平和垂直同时缩放该倍率
      3. 两个参数时: 第一个参数指定水平方向的缩放倍率, 第二个参数指定垂直方向的缩放倍率 。
   3. 倾斜 skew
      1. 用法: transform: skew(30deg)  或者 transform: skew(30deg, 30deg);
      2. 一个参数时: 表示水平方向的倾斜角度 。
      3. 两个参数时: 第一个参数表示水平方向的倾斜角度, 第二个参数表示垂直方向的倾斜角度 。
      4. skew 的默认原点 transform-origin 是这个物件的中心点
   4. 移动 translate
      1. 用法: transform: translate(45px)  或者 transform: translate(45px, 150px);
      2. 一个参数时: 表示水平方向的移动距离;
      3. 两个参数时: 第一个参数表示水平方向的移动距离, 第二个参数表示垂直方向的移动距离 。
2. 基准点 transform-origin
   1. 在使用 transform 方法进行文字或图像的变形时, 是以元素的中心点为基准点进行的 。 使用 transform-origin 属性, 可以改变变形的基准点 。
   2. 用法: transform-origin: 10px 10px;
   3. 表示相对左上角原点的距离, 单位 px, 第一个参数表示相对左上角原点水平方向的距离, 第二个参数表示相对左上角原点垂直方向的距离;
   4. 两个参数除了可以设置为具体的像素值, 其中第一个参数可以指定为 left、center、right, 第二个参数可以指定为 top、center、bottom。
3. 多方法组合变形
   1. 用法: transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
   2. 这四种变形方法顺序可以随意, 但不同的顺序导致变形结果不同, 原因是变形的顺序是从左到右依次进行

2.3 animation 关键帧动画

1. 在 CSS3 中创建动画, 您需要学习 @keyframes 规则 。
2. @keyframes 规则用于创建动画 。 在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。
3. 必须定义动画的名称和时长 。 如果忽略时长, 则动画不会允许, 因为默认值是 0。
4. 请用百分比来规定变化发生的时间, 或用关键词 "from" 和 "to", 等同于 0% 和 100% 。
5. 语法
   1. animation: name duration timing-function delay iteration-count direction;
     1. animation-name    规定需要绑定到选择器的 keyframe 名称
     2. animation-duration   规定动画完成一个周期所花费的秒或毫秒。默认是 0。
     3. animation-timing-function    规定动画的速度曲线。 默认是 "ease"。
     4. animation-delay    规定动画何时开始 。 默认是 0。
     5. animation-iteration-count    规定动画被播放的次数 。 默认是 1。
     6. animation-direction    规定动画是否在下一周期逆向地播放 。 默认是 "normal"; alternate (轮流),。
        1. alternate (轮流): 动画播放在第偶数次向前播放, 第奇数次向反方向播放 (animation-iteration-count 取值大于1时设置有效
        2. 语法: animation-direction: alternate;
   2. animation-play-state   规定动画是否正在运行或暂停 。 默认是 "running" 播放; paused 暂停播放 。
        1. 语法: animation-play-state: paused;
   3. animation-fill-mode   属性规定动画在播放之前或之后, 其动画效果是否可见; 规定对象动画时间之外的状态; none | forwards | backwards | both 。
        1. none:        不改变默认行为 (默认, 回到动画没开始时的状态) 。
        2. forwards:    当动画完成后，保持最后一个属性值（在最后一个关键帧中定义) (动画结束后动画停留在结束状态) 。
        3. backwards:  在 animation-delay 所指定的一段时间内, 在动画显示之前, 应用开始属性值 (在第一个关键帧中定义) （动画回到第一帧的状态）。
        4. both:        向前和向后填充模式都被应用 （根据 animation-direction 轮流应用 forwards 和 backwords 规则）。
        5. 语法:        animation-fill-mode: forwards
   1. 0% 是动画的开始, 100% 是动画的完成。

3. 接下来是常见的面试题目以及实现代码

3.1 transition 示例一

<!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>CSS 动画- transition </title>
</head>
<style>
* {
  padding: 0;
  margin: 0;
}
/* CSS实现示例 */
.w_tran-css {
  width: 350px;
  height: 350px;
  background: url('./images/1-2-https原理.jpg') no-repeat center;
  transition: all 1s ease-in-out;
  background-size: 110%;
  border: 5px solid slateblue;
}
.w_tran-css:hover {
  background-size: 120%;
  border: 5px solid skyblue;
}

</style>
<body>
  <div class="w_tran-css">
    <p>transition 动画 --- 测试背景图中的动画效果</p>
  </div>
</body>
</html>

展示效果如图所示:

3.2 transition 示例二

<!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>CSS 动画 - transition</title>
</head>
<style>
* {
  margin: 0;
}
.w_outer {
  display: flex;
  justify-content: center;
  background-color: skyblue;
  height: 100vh;
}
nav {
  display: flex;
  width: 80%;
  height: 40px;
  gap: 40px;
}

a {
  flex: 1;
  background-color: #333;
  color: #fff;
  border: 1px solid;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease-out;
}

a:hover, a:focus {
  background-color: steelblue;
  color: #333;
}
</style>
<body>
  <div class="w_outer">
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact Us</a>
      <a href="#">Links</a>
    </nav>
  </div>
</body>
</html>

展示效果如图所示:

3.3 transform 示例一

<!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>CSS 动画 - transform</title>
</head>
<style>
* {
  padding: 0;
  margin: 0;
}
/* 简单示例-1 */
.w_outer {
  width: 300px;
  border: 120px solid red;
}
#btn {
  display: inline-block;
  width: 300px;
  height: 300px;
  border: 1px solid blue;
  position: relative;
  cursor: pointer;
}
.ball {
  border-radius: 25px;
  width: 50px;
  height: 50px;
  background: rgb(17, 8, 8);
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

/* 简单示例-1 */
.w_img {
  width: 300px;
  /* transform 设置动画时, 需要配合 transition 来设置过渡时间*/
  transition: 1s;
}
.w_img:hover {
  transform: rotate(90deg);
  transform-origin: 0, 0 ;
}

/* 简单示例-3 */
.w_trans-3 {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

</style>
<body>
  <!-- 示例一 -->
  <div class="w_outer">
    <div id="btn">
      <p>transform --- 动画 Click anywhere to move the ball</p>
      <div id="foo" class="ball"></div>
    </div>
  </div>
  <!-- 示例二 -->
  <img class="w_img" src="./images/1-https-注释.png" alt="">

  <!-- 示例三 -->
  <div class="w_trans-3">transform - 设置变形</div>
</body>
<script>
var f=document.getElementById('foo');
var far=document.getElementById('btn')
far.onclick=function(ev, obj){
  f.style.transform='translateY('+(ev.clientY - 25 - this.offsetLeft)+'px)';
  f.style.transform +='translateX('+(ev.clientX - 25 - this.offsetTop)+'px)';
};
</script>
</html>

展示效果如图所示:

3.4 transform 示例二

<!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>CSS 动画 - transform -- 经典旋转正方体</title>
</head>
<style>

  ul{
    position: relative;
    height: 500px;
    width: 500px;
    list-style: none;
    margin: 100px auto;
    transform-style: preserve-3d;
    animation: ani 4s linear 0s infinite;
  }
  li{
    position:absolute;
    height: 500px;
    width: 500px;
    font-size: 32px;
    text-align: center;
    line-height: 500px;
    backface-visibility: hidden;
  }


  .w_noodle-1 {
    background-color:  green;
    transform: translateZ(250px);
  }
  .w_noodle-2 {
    background-color: yellow;
    transform: rotateY(90deg) translateZ(250px);
  }
  .w_noodle-3 {
    background-color: orange;
    transform: rotateX(90deg) translateZ(250px);
  }
  .w_noodle-4 {
    background-color: red;
    transform: rotateX(-90deg) translateZ(250px);
  }
  .w_noodle-5 {
    background-color:blue;
    transform: rotateY(-90deg) translateZ(250px);
  }
  .w_noodle-6 {
    background-color:purple;
    transform: rotateX(180deg) translateZ(250px);
  }

  @keyframes ani{
    100%{
      transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
  }
</style>
<body>
<ul>
  <li class="w_noodle-1">1</li>
  <li class="w_noodle-2">2</li>
  <li class="w_noodle-3">3</li>
  <li class="w_noodle-4">4</li>
  <li class="w_noodle-5">5</li>
  <li class="w_noodle-6">6</li>
</ul>
</body>
</html>

展示效果如图所示:

3.4 A transform 示例三

<!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>CSS 动画 - transform -- 时钟</title>
</head>
<style id="css">
li{
  list-style: none;
}
#w_outer{
  width: 400px;
  height: 400px;
  position: absolute;
  top:calc(50% - 200px);
  left:calc(50% - 200px);
  border: 2px solid palegoldenrod;
}
#w_cont{
  width: 200px;
  height: 200px;
  position: absolute;
  top:calc(50% - 100px);
  left:calc(50% - 100px);
  border: 2px solid cyan;
  border-radius: 50%;
}
.w_h-item{
  width: 4px;
  height: 12px;
  position: absolute;
  top: 0;
  left: calc(50% - 2px);
  background-color: gray;
  transform-origin: 2px 100px;
}
.angle30{transform : rotate(30deg);}
.angle60{transform : rotate(60deg);}
.angle90{transform : rotate(90deg);}
.angle120{transform : rotate(120deg);}
.angle150{transform : rotate(150deg);}
.angle180{transform : rotate(180deg);}
.angle210{transform : rotate(210deg);}
.angle240{transform : rotate(240deg);}
.angle270{transform : rotate(270deg);}
.angle300{transform : rotate(300deg);}
.angle330{transform : rotate(330deg);}
#fixPoint{
  width: 10px;
  height: 10px;
  position: absolute;
  top:calc(50% - 5px);
  left:calc(50% - 5px);
  background-color: cadetblue;
  border-radius: 50%;
}
#hour{
  width: 6px;
  height: 70px;
  position:absolute;
  top: 40px;
  left: calc(50% - 3px);
  background-color: darkblue;
  transform-origin: 50% 60px;
}
#minute{
  width: 4px;
  height: 75px;
  position:absolute;
  top: 35px;
  left: calc(50% - 2px);
  background-color: yellow;
  transform-origin: 50% 65px;
}
#second{
  width: 2px;
  height: 90px;
  position:absolute;
  top: 20px;
  left: calc(50% - 1px);
  background-color: red;
  transform-origin: 50% 80px;
}
</style>
<body>
<div id="w_outer">
  <div id='w_cont'>
    <ul id="w_hour-line">
      <li class="w_h-item"></li>
      <li class="w_h-item angle30"></li>
      <li class="w_h-item angle60"></li>
      <li class="w_h-item angle90"></li>
      <li class="w_h-item angle120"></li>
      <li class="w_h-item angle150"></li>
      <li class="w_h-item angle180"></li>
      <li class="w_h-item angle210"></li>
      <li class="w_h-item angle240"></li>
      <li class="w_h-item angle270"></li>
      <li class="w_h-item angle300"></li>
      <li class="w_h-item angle330"></li>
    </ul>
    <div id="fixPoint"></div>
    <!-- 时针 -->
    <div id="hour" class="min"></div>
    <!-- 分针 -->
    <div id="minute" class="sec"></div>
    <!-- 秒针 -->
    <div id="second" class="circle"></div>
  </div>
</div>
</div>
</body>
<script>


window.onload=function(){
  var hourHand=document.getElementById('hour');
  var minuteHand=document.getElementById('minute');
  var secondHand=document.getElementById('second');

  // 初始化(细节知识点: 如果这里不执行初始化, 在页面显示的内容会有一个闪屏的问题: 分针、时针、秒针，重叠在12点这个位置)
  initTime()
  // 执行定时器
  setInterval(initTime, 1000)

  function initTime() {
    var nowTime=new Date();

    // 求取时针角度(这里 -12 在显示上是正确的)
    var hourVal=nowTime.getHours() - 12;
    var hourDeg=hourVal / 12 * 360 + 'deg';

    // 求取分针角度
    var minuteVal=nowTime.getMinutes();
    var minuteDeg=minuteVal / 60 * 360 + 'deg';

    // 求取秒针角度
    var secondVal=nowTime.getSeconds();
    var seconDeg=secondVal / 60 * 360 + 'deg';


    // 原生方法: 利用 DOM 元素的 style 属性设置
    hourHand.style.transform='rotate('+ hourDeg + ')';
    minuteHand.style.transform='rotate('+ minuteDeg + ')';
    secondHand.style.transform='rotate('+ seconDeg + ')';
  }
}
</script>
</html>

展示效果如图所示:

3.6 animation 示例一

<!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>CSS 动画 -- animation 关键帧动画</title>
</head>
<style>
  p {
    width:300px;
    height:300px;
    background:red;
    animation:myfirst 3s infinite alternate;
    /* //Firefox */
    -moz-animation:myfirst 3s infinite alternate;
    /* // Safari and Chrome */
    -webkit-animation:myfirst 3s infinite alternate;
    /* // Opera */
    -o-animation:myfirst 3s infinite alternate;
  }
  @keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* // Firefox */
  @-moz-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* // Safari and Chrome */
  @-webkit-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* // Opera */
  @-o-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
</style>
<body>
  <p>无限循环播放动画效果</p>
</body>
</html>

展示效果如图所示:

3.7 animation 示例二

<!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>CSS 动画 -- animation 关键帧动画</title>
</head>
<style>
p {
  background-color: skyblue;
  font: 96px "Microsoft Yahei";
  font-weight: 500;
  text-align: center;
  color: #f35626;
  cursor: pointer;
}
p:hover {
  animation:rubberBand 1.5s;
}
@-webkit-keyframes  rubberBand{
  0%{
    -webkit-transform:scale(1);
    transform:scale(1)
  }
  30%{
    -webkit-transform:scaleX(1.25) scaleY(0.75);
    transform:scaleX(1.25) scaleY(0.75)
  }
  40%{
    -webkit-transform:scaleX(0.75) scaleY(1.25);
    transform:scaleX(0.75) scaleY(1.25)
  }
  60%{
    -webkit-transform:scaleX(1.15) scaleY(0.85);
    transform:scaleX(1.15) scaleY(0.85)
  }
  100%{
    -webkit-transform:scale(1);
    transform:scale(1)
  }
}
@keyframes rubberBand{
  0%{
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1)
  }
  30%{
    -webkit-transform:scaleX(1.25) scaleY(0.75);
    -ms-transform:scaleX(1.25) scaleY(0.75);
    transform:scaleX(1.25) scaleY(0.75)
  }
  40%{
    -webkit-transform:scaleX(0.75) scaleY(1.25);
    -ms-transform:scaleX(0.75) scaleY(1.25);
    transform:scaleX(0.75) scaleY(1.25)
  }
  60%{
    -webkit-transform:scaleX(1.15) scaleY(0.85);
    -ms-transform:scaleX(1.15) scaleY(0.85);
    transform:scaleX(1.15) scaleY(0.85)
  }
  100%{
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1)
  }
}
</style>
<body>
<div>
  <p>Animate.css</p>
</div>
</body>
<script>

</script>
</html>

展示效果如图所示:

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200+的文章。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容。

大家推荐一个网站(css-loaders.com)，这个网站真的是特别好用，将来同学在开发项目的时候基本上都需要用到各种各样的加载状态，各种各样的加载动画。这个网站就提供了各种各样的加载动画，而且用起来超级简单，就不可能不会用，特别简单。

大家看到了吗？这么一堆的加载中动画就很方便，而且我告诉你怎么用。举个例子，比如这个，大家看我喜欢想要哪个动画，只需要把鼠标放上去，有一个叫copy the CSS，把它的CSS样式复制下来。

然后去干什么？找到代码，这是一个空的文件，直接Ctrlv粘贴，它就能自动的把刚才所看中动画的样式给复制进来了。对于页面来说就只需要加一个div，这个div在这就加一个class，名字为loader的DIV，这样一个加载中动画就有了。

然后就直接打开看一下，大家会看到了吗？这个动画就有了，特别方便。想换成别的样式的就随便切换就行了。只要有DIV，将来想用什么动画就直接copy它的CSS样式，比如这个，再复制一下，点击一下就行了。把之前的样式删掉，再粘进来，刚才复制过来的，再粘贴，动画也就出来了。

是不是特别的好用？而且这里面的动画效果特别多，能够让网页变得非常炫酷。这些足够用了，真的是多的不能再多了，给我看的都眼花缭乱了。这样一个闹钟的效果，什么样的都有。而且做的很简单，只需要替换掉CSS，有这样一个div，效果就有了。

看到了吗？各位，就这个网站的，必须收藏，真的好用。

在线咨询

上一篇：css还有这种颜色写法，学到了
下一篇：强固耐用，极速雷电，LaCie PSSD移动固态硬盘

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

郑州Web前端进阶教程之Vue中动画效果实现方法

. CSS 动画有哪些? transition过渡与animation动画的区别是什么？

2. 首先介绍各个动画的语法+属性

2.1 transition 过渡

2.2 transform 变形

2.3 animation 关键帧动画

3. 接下来是常见的面试题目以及实现代码

3.1 transition 示例一

3.2 transition 示例二

3.3 transform 示例一

3.4 transform 示例二

3.4 A transform 示例三

3.6 animation 示例一

3.7 animation 示例二

您的项目需求