css3-water-drop 动画

预览

技术标签

• filter属性的 blur，contrast 函数融合效果
• animation

代码

<style>
  html,body {
    background-color: #000;
    filter: blur(3px) contrast(20);
  }
  .wrap {
    position: relative;
    width: 1300px;
    height: 184px;
    color: #fff;
    font-size: 200px;
    text-align: center;
    margin: 300px auto;
    border-bottom: 20px solid #fff;
    transform: skewY(5deg);
  }
  .wrap::after, .wrap::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    bottom: -30px;
    left: 0;
    animation: 10s ease-in-out infinite;
  }
  .wrap::after {
    animation-name: moveAfter;
    animation-delay: 1s;
  }
  .wrap::before {
    animation-name: moveBefore;
  }
  @keyframes moveAfter {
    75% {
      width: 20px;
      height: 50px;
      left: 1260px;
      bottom: -50px;
    }
    80% {
      width: 30px;
    }
    87% {
      left: 1270px;
      bottom: -57px;
    }
    100% {
      left: 1270px;
      bottom: -1000px;
    }
  }
  @keyframes moveBefore {
    75% {
      height: 50px;
      left: 1270px;
      bottom: -50px;
    }
    80% {
      /* width: 30px; */
      left: 1270px;
      /* height: 60px; */
      bottom: -55px;
    }
    87% {
      width: 25px;
      left: 1270px;
      /* height: 60px; */
      bottom: -50px;
    }
    100% {
      left: 1270px;
      bottom: -1000px;
    }
  }
</style>
<template>
  <div class="wrap">WATER DROP</div>
</template>

完整请移步 codepen.io/Chokcoco/pe…