纯css实现那些超炫酷的动画效果

前言

现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，那其实大家看到的动画其实很大一部分都是通过js或者插件实现的，但你知道吗，我们所熟知的css就可以制作炫酷的动画效果，下面一起看看吧。

 1.仿抖音进入直播间的动画效果

看代码：

<template>
  <div class="html body">
    <div class="fatherBox">
      <div class="buttonLight">点击进入直播间</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
  }
</script>

<style scoped>
  .html {
    padding: 20px;
    background-color: cornflowerblue;
    height: 100vh;
  }
  /* @keyframes：定义一个动画
  shineLight：自定义一个动画名称 */
  @keyframes shineLight {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);/* 添加开始阴影并设置透明度 */
    }

    100% {
      box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);/* 添加结束阴影并设置透明度 */
    }
  }
  .fatherBox{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .buttonLight {
    /* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
    animation: shineLight 1.8s infinite;
    font-size: 14px;
    padding: 6px 16px;
    color: white;
    border: 1px solid;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

 2.文字抖动动画

 

<template>
  <div class="html body">
    <div class="fatherBox">
      <div class="shake-joggle">点击进入直播间</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
  }
</script>

<style scoped>
  .html {
    padding: 30px;
    background-color: cornflowerblue;
    height: 100vh;
  }
  .fatherBox{
    display: flex;
    justify-content: center;
    color: white;
    font-weight: bold;
  }
   /* @keyframes：定义一个动画
  shake-joggle：自定义一个动画名称 */
  @keyframes shake-joggle {
    2% {
      transform: translate(6px, -2px) rotate(3.5deg);
    }

    4% {
      transform: translate(5px, 8px) rotate(-0.5deg);
    }

    6% {
      transform: translate(6px, -3px) rotate(-2.5deg);
    }

    8% {
      transform: translate(4px, -2px) rotate(1.5deg);
    }

    10% {
      transform: translate(-6px, 8px) rotate(-1.5deg);
    }

    12% {
      transform: translate(-5px, 5px) rotate(1.5deg);
    }

    14% {
      transform: translate(4px, 10px) rotate(3.5deg);
    }

    16% {
      transform: translate(0px, 4px) rotate(1.5deg);
    }

    18% {
      transform: translate(-1px, -6px) rotate(-0.5deg);
    }

    20% {
      transform: translate(6px, -9px) rotate(2.5deg);
    }

    22% {
      transform: translate(1px, -5px) rotate(-1.5deg);
    }

    24% {
      transform: translate(-9px, 6px) rotate(-0.5deg);
    }

    26% {
      transform: translate(8px, -2px) rotate(-1.5deg);
    }

    28% {
      transform: translate(2px, -3px) rotate(-2.5deg);
    }

    30% {
      transform: translate(9px, -7px) rotate(-0.5deg);
    }

    32% {
      transform: translate(8px, -6px) rotate(-2.5deg);
    }

    34% {
      transform: translate(-5px, 1px) rotate(3.5deg);
    }

    36% {
      transform: translate(0px, -5px) rotate(2.5deg);
    }

    38% {
      transform: translate(2px, 7px) rotate(-1.5deg);
    }

    40% {
      transform: translate(6px, 3px) rotate(-1.5deg);
    }

    42% {
      transform: translate(1px, -5px) rotate(-1.5deg);
    }

    44% {
      transform: translate(10px, -4px) rotate(-0.5deg);
    }

    46% {
      transform: translate(-2px, 2px) rotate(3.5deg);
    }

    48% {
      transform: translate(3px, 4px) rotate(-0.5deg);
    }

    50% {
      transform: translate(8px, 1px) rotate(-1.5deg);
    }

    52% {
      transform: translate(7px, 4px) rotate(-1.5deg);
    }

    54% {
      transform: translate(10px, 8px) rotate(-1.5deg);
    }

    56% {
      transform: translate(-3px, 0px) rotate(-0.5deg);
    }

    58% {
      transform: translate(0px, -1px) rotate(1.5deg);
    }

    60% {
      transform: translate(6px, 9px) rotate(-1.5deg);
    }

    62% {
      transform: translate(-9px, 8px) rotate(0.5deg);
    }

    64% {
      transform: translate(-6px, 10px) rotate(0.5deg);
    }

    66% {
      transform: translate(7px, 0px) rotate(0.5deg);
    }

    68% {
      transform: translate(3px, 8px) rotate(-0.5deg);
    }

    70% {
      transform: translate(-2px, -9px) rotate(1.5deg);
    }

    72% {
      transform: translate(-6px, 2px) rotate(1.5deg);
    }

    74% {
      transform: translate(-2px, 10px) rotate(-1.5deg);
    }

    76% {
      transform: translate(2px, 8px) rotate(2.5deg);
    }

    78% {
      transform: translate(6px, -2px) rotate(-0.5deg);
    }

    80% {
      transform: translate(6px, 8px) rotate(0.5deg);
    }

    82% {
      transform: translate(10px, 9px) rotate(3.5deg);
    }

    84% {
      transform: translate(-3px, -1px) rotate(3.5deg);
    }

    86% {
      transform: translate(1px, 8px) rotate(-2.5deg);
    }

    88% {
      transform: translate(-5px, -9px) rotate(2.5deg);
    }

    90% {
      transform: translate(2px, 8px) rotate(0.5deg);
    }

    92% {
      transform: translate(0px, -1px) rotate(1.5deg);
    }

    94% {
      transform: translate(-8px, -1px) rotate(0.5deg);
    }

    96% {
      transform: translate(-3px, 8px) rotate(-1.5deg);
    }

    98% {
      transform: translate(4px, 8px) rotate(0.5deg);
    }

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

  .shake-joggle {
    /* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
    animation: shake-joggle 5s infinite ease-in-out;
  }
</style>

3.文字缩放动画 

<template>
  <div class="html body">
    <div class="fatherBox">
      <div class="scaletext">点击进入直播间</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
  }
</script>

<style scoped>
  .html {
    padding: 30px;
    background-color: cornflowerblue;
    height: 100vh;
  }

  @keyframes zoomMeans {
    40% {
      opacity: 1;
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
      opacity: 0;
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  .scaletext {
    /* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
    animation: 2s linear 0s infinite alternate zoomMeans;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin-top: 70px;
    text-align: center;
    margin-top: 15px;
  }
</style>