卡片点击特效Html5

川长思鸟来 2022-12-28 09:27 207阅读 0赞

html:

<template>
      <div>
        <div class="card" :class="{ dot: touchDot }" @touchstart.stop="touchstart($event)" @click="bindTap($event)">
          <div :class="{ 'active-dot': touchDot }" :style="{ top: top, left: left }"></div>
        </div>
      </div>
    </template>

js:

<script>
    export default {
      data() {
        return {
          touchDot: false,
          top: '50%',
          left: '50%',
          timer: null
        };
      },
    
      methods: {
        touchstart(e) {
          this.timer = null;
          var targetOffsetLeft = e.targetTouches[0].clientX;
          var targetOffsetTop = e.targetTouches[0].clientY;
          var offsetLeft = document.getElementsByClassName('card')[0].offsetLeft;
          var offsetTop = document.getElementsByClassName('card')[0].offsetTop;
          var x = targetOffsetLeft - offsetLeft;
          var y = targetOffsetTop - offsetTop;
          this.showActiveCricle({ x: Math.floor(x) + 'PX', y: Math.floor(y) + 'PX' });
          this.timer = setTimeout(() => {
            this.touchDot = false;
          }, 400);
        },
    
        showActiveCricle({ x, y }) {
          this.left = x.toString();
          this.top = y.toString();
          console.log(this.top, this.left);
          this.touchDot = true;
        },
    
        bindTap(e) {}
      }
    };
    </script>

css

<style>
    .card {
      height: 200px;
      width: 300px;
      border-radius: 10px;
      overflow: hidden;
      background: #f1f1f1;
      border: 1px solid #f1f1f1;
      margin: 0 auto;
      margin-top: 50px;
      position: relative;
    }
    .dot {
    }
    .card-item {
      height: 200px;
      width: 200px;
      position: relative;
      top: 50px;
      left: 50px;
      margin-left: 50px;
      margin-top: 50px;
      background: #3b8070;
      overflow: hidden;
    }
    .active-dot {
      height: 80px;
      width: 80px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      /* transform: translate(-50%, -50%); */
      background: #333;
      opacity: 0;
      animation: myfirst 0.4s;
    }
    @keyframes myfirst {
      0% {
        transform: scale(1);
        opacity: 0;
      }
      25% {
        transform: scale(2);
        opacity: 0.85;
      }
      50% {
        transform: scale(4);
        opacity: 0.95;
      }
      75% {
        transform: scale(12);
        opacity: 1;
      }
      100% {
        transform: scale(24);
        opacity: 0;
      }
    }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关按钮—按钮点击特效

按钮—按钮点击特效 ![在这里插入图片描述][2021041819283044.gif_pic_center] <!DOCTYPE html> <htm

谁借莪１个温暖的怀抱￠/ 2023年01月13日 10:54/ 0 赞/ 300 阅读

相关卡片点击特效Html5

html: <template> <div> <div class="card" :class="{ dot: touchDot }" @

川长思鸟来/ 2022年12月28日 09:27/ 0 赞/ 208 阅读

相关 html5 自动点击事件,HTML5 自定义点击事件

HTML5 自定义点击事件 /\封装的TAP事件\/(function() \{/\\ \ IOS 和 PC 端只需要创建一次就能一直使用 \ Android 手机每

分手后的思念是犯贱/ 2022年10月06日 08:59/ 0 赞/ 364 阅读

相关 HTML5图文卡片响应式布局js特效

[下载地址][Link 1] HTML5图文卡片响应式布局特效是一款常用的图文列表ui布局，带标题和内容介绍图文卡片响应式布局特效。 ![7138b29cd7fedfd81

秒速五厘米/ 2022年09月16日 11:19/ 0 赞/ 220 阅读

相关 Canvas点击图片云雾散开HTML5js特效

[下载地址][Link 1]Canvas画布绘制的点击图片云雾散开HTML5特效，一款基于Canvas绘制云雾水彩散开动画特效。 ![1631149094.png][] d

青旅半醒/ 2022年09月10日 14:15/ 0 赞/ 192 阅读

相关 HTML5 SVG 特效示例

SVG来生成动画 \\示例说明：示例１ > 注意viewBox属性可以帮助你设置svg图像大小 \-fill属性是否填充 \-stroke为绘制，颜色\AA

墨蓝/ 2022年08月07日 15:52/ 0 赞/ 252 阅读

相关 html5卡片效果

<!DOCTYPE html> < html lang= "en"> < head> < meta charset= "UTF-8"> < title>卡片效

叁歲伎倆/ 2022年06月14日 03:43/ 0 赞/ 260 阅读

相关 Javascript 鼠标点击冒泡特效

一个用JS写的鼠标左击特效点击鼠标左键会出现红心”❤”或者字符表情“(๑•́ ₃ •̀๑)”… 常用Emoji 可以自行替换，如需复制，请从底部链接移步至Git

灰太狼/ 2022年06月14日 00:49/ 0 赞/ 235 阅读

相关 Android-View点击水波纹特效

文章目录 1 有界形式 2 无界形式注：在Android 5.0版本以上使用 1 有界形式在布局中加入以下代码：

你的名字/ 2022年02月14日 03:42/ 0 赞/ 337 阅读

相关 HTML5特效动画

7、 [HTML5 Canvas 鼠标滑过3D动画背景][HTML5 Canvas _3D] 在网页中我们经常会设置元素的背景，简单点的设置背景颜色，复杂的就设置背

淡淡的烟草味﹌/ 2022年01月29日 08:57/ 0 赞/ 510 阅读