欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue js css点击水波样式

程序员文章站 2022-04-12 08:09:35
div 按钮click事件方法不能带括号 () !
首页
click 方法 获取鼠标点击位置 e.offsetX // 获取相对 x坐标 e.offsetY // 获取相对 y坐标 tou.....

vue js css点击水波样式

  1. div 按钮

click事件方法不能带括号 () !

	  <div
        class="ripple"
        @click="touchstart"
      >
        <router-link to="/">首页</router-link>
      </div>
  1. click 方法 获取鼠标点击位置
 e.offsetX // 获取相对 x坐标
 e.offsetY // 获取相对 y坐标
    touchstart(event) {
      var style = document.createElement("style");
      style.innerHTML = `.ripple::after{top:${event.offsetY - 50}px;left:${
        event.offsetX - 100
      }px;}`;
      document.head.appendChild(style);
    },
  1. css 样式
    .ripple {
      position: relative;
      //隐藏溢出的径向渐变背景
      overflow: hidden;
      width: 200;
      height: 100;
    }

    .ripple:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
      //设置径向渐变
      background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform 0.3s, opacity 0.5s;
    }

    .ripple:active:after {
      transform: scale(0, 0);
      opacity: 0.3;
      //设置初始状态
      transition: 0s;
    }

本文地址:https://blog.csdn.net/weixin_46329969/article/details/109382858