CSS动画案例

div鼠标悬浮展示波浪动画

HTML代码

<div class="wave-div">
  悬浮波浪
</div>

CSS代码

.wave-div {
  width: 5%;
  height: 5%;
}

.wave-div:hover {
  --c: #2196F3;
  --w1: radial-gradient(100% 57% at top, #0000 100%, var(--c) 100.5%) no-repeat;
  --w2: radial-gradient(100% 57% at bottom, var(--c) 100%, #0000 100.5%) no-repeat;
  background: var(--w1), var(--w2), var(--w1), var(--w2);
  background-position: 0 100%, 100% 100%;
  background-size: 50.5% 100%;
  animation: wave 1.5s infinite linear;
}

@keyframes wave {
  0% {
    background-position: -200%, -100%, 0, 100%;
  }
  100% {
    background-position: 0, 100%, 200%, 300%;
  }
}

div点击翻转动画

HTML代码

<div id="container" class="container" @click="handleFlip">
    <div class="face">
        正面
    </div>
    <div class="back">
        反面
    </div>
</div>
<script>
export default {
  name: "TestPage",
  data() {
      return {
          flag: false
      }
  },
  methods: {
    handleFlip() {
      this.flag = !this.flag
      let container = document.getElementById('container')
      container.style.transform = this.flag ? 'rotateY(180deg)' : ''
    }
  }
}
</script>

CSS代码

.face,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.face {
  background-color: antiquewhite;
}

.back {
    
  transform: rotateY(180deg);
  background-color: aqua
}