纯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="loading load">
      <div class="loaderContant"></div>
    </div>
  </div>
</template>

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

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

  .loading {
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .load .loaderContant {
    color: white;
    font-size: 40px;
    overflow: hidden;
    width:40px;
    height: 40px;
    border-radius: 50%;
    transform: translateZ(0);
    /* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
    animation: load 1.7s infinite ease, round 1.7s infinite ease;
  }

  @keyframes load {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%,
    95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%,
    59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }

  @keyframes round {
    0% {
      transform: rotate(0deg);/* 开始旋转 div 元素 */
    }

    100% {
      transform: rotate(360deg);/* 结束旋转 div 元素 */
    }
  }
</style>

3.文字抖动动画

上代码

<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>

4.文字缩放动画

上代码

<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>

5.融合效果

上代码

<template>
  <div>
    <div class="container">
      <div class="filter-mix"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
  }
</script>

<style>
  .filter-mix {
    /* 最大的盒子的样式 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    filter: contrast(20);
    background: #fff;
  }

  .filter-mix::before {
    /* 大球的样式 */
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: olive;
    top: 40px;
    left: 80px;
    z-index: 2;
    filter: blur(6px);
    box-sizing: border-box;
    /* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
    animation: filterBallMove 4s ease-out infinite;
  }

  .filter-mix::after {
    /* 小球的样式 */
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: green;
    top: 60px;
    right: 40px;
    z-index: 2;
    filter: blur(6px);
    /* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
    animation: filterBallMove2 4s ease-out infinite;
  }

  /* @keyframes：定义一个动画
  filterBallMove：自定义一个动画名称 */
  @keyframes filterBallMove {
    50% {
      left: 140px;
    }
  }

  /* @keyframes：定义一个动画
  filterBallMove2：自定义一个动画名称 */
  @keyframes filterBallMove2 {
    50% {
      right: 140px;
    }
  }
</style>

还可以这样

上代码

<template>
  <div>
    <div class="container">
      <h1>Blur word Animation</h1>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
  }
</script>

<style>
  html,
  body {
    height: 100%;
    width: 100%;
    background-color: black;
  }

  .container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 4em;
    filter: contrast(20);
    background-color: black;
    overflow: hidden;
  }

  h1 {
    font-family: Righteous;
    color: white;
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1;
    animation: letterspacing 3s infinite alternate ease-in-out;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    letter-spacing: -2.2rem;
  }

  @keyframes letterspacing {
    0% {
      letter-spacing: -2.4rem;
      filter: blur(.3rem);
    }

    50% {
      filter: blur(.5rem);
    }

    100% {
      letter-spacing: .5rem;
      filter: blur(0rem);
      color: #fff;
    }
  }
</style>