水波

示例1

WATER

查看代码

<template>
  <div id="container1">
    <h1 id="water1">WATER</h1>
  </div>
</template>

<style scoped lang="scss">
#container1 {
  width: 100%;
  height: 200px;
  background-color: #333333;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#water1 {
  font-size: 6rem;
  line-height: 1;
  height: 50%;
  vertical-align: top;
  color: rgba(255, 255, 255, 0.3);
  background: url('/programmer/image/resource/water.png');
  background-repeat: repeat-x;
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  animation: water 8s linear infinite;
}

@keyframes water {
  0% {
    background-position: left 0 top 40px;
  }
  40% {
    background-position: left 300px top -40px;
  }
  60% {
    background-position: left 600px top -60px;
  }
  100% {
    background-position: left 800px top 40px;
  }
}
</style>

技术要点

• 使用 background-position 实现动画
• 使用 background-size 实现背景图片的拉伸
• 使用 background-repeat 实现背景图片的平铺
• 使用 background-clip 实现文字的背景透明
• 使用 animation 与 @keyframes water 实现动画

示例2

10%

查看代码

<template>
  <div class="box">
    <div class="water2">
      <p>{{ range }}%</p>
      <div class="active" :style="`bottom:${range}%`"></div>
    </div>
    <input v-model="range" type="range" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const range = ref(10);
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 400px;
  background-color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .water2 {
    width: 200px;
    height: 200px;
    padding: 10px;
    background-color: #fff;
    border: 10px solid #fff;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    p {
      font-size: 1.2rem;
      font-weight: 600;
      z-index: 3;
    }

    .active {
      width: 170%;
      height: 170%;
      background-color: #1faad4;
      border-radius: 40%;
      position: absolute;
      bottom: 0%;
      animation: rotate 3s linear infinite;
    }

    @keyframes rotate {
      0% {
        transform: translateY(102%) rotate(0deg);
      }
      100% {
        transform: translateY(102%) rotate(360deg);
      }
    }
  }

  input {
    margin-top: 20px;
  }
}
</style>

技术要点

• 使用 position 实现层叠
• 使用 transform 实现偏移和旋转
• 使用 animation 与 @keyframes rotate 实现动画