CSS点击水波纹动画（每日一个前端动画，附代码）

Ss00022200022

已于 2024-08-20 08:50:34 修改

阅读量307

点赞数 2

分类专栏：每日一个前端动画文章标签： css 前端 vue.js

于 2024-08-20 08:33:57 首次发布

本文链接：https://blog.csdn.net/m0_56074485/article/details/141331044

版权

每日一个前端动画专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果预览

HTML代码

<!-- 容器 -->
  <div class="container">
    <!-- 给组件点击事件 -->
  <div class="div" @click="toggleDong(0)">
    <span>A</span>
    <!-- 判断是否点击，点击水波纹显现 -->
    <div class="ball" v-if="isDong[0] == true">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="div" @click="toggleDong(1)">
    <span>B</span>
    <div class="ball" v-if="isDong[1] == true">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="div" @click="toggleDong(2)">
    <span>C</span>
    <div class="ball" v-if="isDong[2] == true">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  </div>

CSS代码

.container{
  display: flex;
  margin-left: 300px;
  margin-top: 300px;
  font-size: 200px;
}
.div{
  margin-left: 200px;
}
.ball{
		    width: 100px;
		    height: 100px;
        top: 365px;
        margin-left: -25px;
		    position: absolute;
		    transform: translateY(-30px);
		}

		.ball> div {/*设置水波纹的样式*/
		    background-color: #f0b9e4;
		    border-radius: 100%;
		    margin: 2px;
		    position: absolute;
		    left: 15px;
		    top: 15px;
		    opacity: 0;
		    width: 160px;/**水波纹长宽设置 */
		    height: 160px;
		    animation: anim 1s 0s linear infinite both;
		}
		.ball > div:nth-child(2) {/*设置动画延迟*/
		    animation-delay: 0.2s;
		}
		/*此处省略设置第三个和第四个圆圈的动画延迟的代码*/
		.ball> div:nth-child(3) {
		    animation-delay: 0.4s;
		}

		.ball > div:nth-child(4) {
		    animation-delay: 0.6s;
		}

		@keyframes anim {
		    0% {transform: scale(0);
		        opacity: 0; }
		    5% {opacity: 1; }
		    100% {transform: scale(1);
		           opacity: 0; }
		}

点击事件函数

import { reactive } from "vue";

// 定义一个响应式的布尔数组  
const isDong = reactive([false, false, false]);  
// 定义点击事件的处理函数  
function toggleDong(i) {  
  // 将所有元素的值设置为false  
  isDong.fill(false);  
  // 将指定索引的元素值设置为true  
  isDong[i] = true;  
  console.log(isDong);  
}

等上帝给你运气，不如自己给自己勇气。