脉冲动画效果

js实现脉冲动画效果:

鼠标点击时,添加动画类,进而实现动画效果,鼠标离开时,移除动画类,回归静态图效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>点击实现脉冲动画效果</title><style>/* 容器定位和尺寸设置 */.pulse-container {position: relative;top: 50px;left: 50px;width: 50px;height: 50px;display: flex;justify-content: center;align-items: center;border: 2px solid transparent; /* 透明色 */}.pulse-center {width: 50px;height: 50px;background-color: rgb(137, 207, 240); /* 背景色 */border-radius: 50%; /* 使其成为圆形 */}/* 创建两个用于脉冲动画的伪元素 */.pulse-container::before,.pulse-container::after {content: '';position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 2px solid rgb(137, 207, 240);opacity: 0.5;}/* 激活状态下的动画效果 */.pulse-container.active::before,.pulse-container.active::after {animation: pulse 2s linear infinite; /* 2秒循环动画 */}/* 第二个伪元素延迟1秒,创造交错效果 */.pulse-container.active::after {animation-delay: 1s;}/* 定义脉冲动画关键帧 */@keyframes pulse {0% {transform: scale(1); /* 开始时缩小到0.5倍 */opacity: 1;}100% {transform: scale(2); /* 结束时放大到1.5倍 */opacity: 0; /* 完全透明 */}}</style>
</head>
<body><div class="pulse-container"><div class="pulse-center"></div></div>
</body>
<script>const pulseContainer = document.querySelector('.pulse-container');// 鼠标按下时添加动画pulseContainer.addEventListener('mousedown', () => {pulseContainer.classList.add('active');   });// 鼠标松开时移除动画pulseContainer.addEventListener('mouseup', () => {pulseContainer.classList.remove('active'); });
</script>
</html>

实现效果:

(左侧为静态图,右侧为脉冲动态效果图)

    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/887902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux—进程学习—04(进程地址空间学习)

目录 Linux—进程学习—41.程序地址空间1.1虚拟地址空间的现象1.2虚拟地址空间的理解(感性) 2.进程地址空间2.0 mm_struct结构体2.1 mm_struct结构体的源代码2.2分页&虚拟地址空间解释前面的实验现象 2.3进程地址空间存在的原因2.3.1第一个原因2.3.2第二个原因2.3.3第三个原…

Java集成Sa-Token进行认证与授权

引言 软件开发过程中都必须要有的一个功能&#xff0c;那就是认证与授权&#xff0c;经过大佬们的不断更新迭代&#xff0c;使得如今实现认证与授权功能变得相对简单&#xff0c;也许你并不能真正的接触到认证与授权这一功能&#xff0c;除非你接触的项目是从0到1的&#xff0c…

uni-app获取到的数据如何保留两位小数

<view><text class"daily_r">{{ (chartD.selfPowerCount || 0).toFixed(2) }}</text>度</view> 1&#xff0c;在模板中&#xff0c;所有需要保留两位小数的数值都使用了 toFixed(2) 方法&#xff0c;例如 {{ (chartD.selfPowerCount || 0).…

图论入门编程

卡码网刷题链接&#xff1a;98. 所有可达路径 一、题目简述 二、编程demo 方法①邻接矩阵 from collections import defaultdict #简历邻接矩阵 def build_graph(): n, m map(int,input().split()) graph [[0 for _ in range(n1)] for _ in range(n1)]for _ in range(m): …

09. 字典

一、什么是字典 在 Python 中&#xff0c;字典&#xff08;dictionary&#xff09;是一系列 键值对。每个键都与一个值关联&#xff0c;可以使用键来访问与之关联的值。字典中的 元键 只能是 不可变类型 的数据类型&#xff0c;也就是 可哈希类型。与键相关的值可以是数字、字符…

QT的exec函数

在Qt框架中&#xff0c;exec()方法是QDialog类&#xff08;及其子类&#xff09;的一个成员函数&#xff0c;用于以模态&#xff08;modal&#xff09;方式显示对话框。当exec()被调用时&#xff0c;它会启动一个局部的事件循环&#xff0c;这个循环会阻塞对对话框之外的其他窗…

Oracle对比表与表之间的结构

自己首先想到的就是,navicat有提供结构同步 但是有些时候情况不一样,比如我遇到的是连接不同,而且是互相同步,以最多的列的那个表为样 没有说一个固定的源 那么还可以通过导出表结构去另一个库中执行看是否报错,以此来判断结构的不同 但是我感觉有点儿麻烦 最后想到通过sql语…

数据结构与算法——N叉树(自学笔记)

本文参考 N 叉树 - LeetBook - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台 遍历 前序遍历&#xff1a;A->B->C->E->F->D->G后序遍历&#xff1a;B->E->F->C->G->D->A层序遍历&#xff1a;A->B->C->D->…

云计算之elastaicsearch logstach kibana面试题

1.ELK是什么? ELK 其实并不是一款软件,而是一整套解决方案,是三个软件产品的首字母缩写 Elasticsearch:负责日志检索和储存 Logstash:负责日志的收集和分析、处理 Kibana:负责日志的可视化 这三款软件都是开源软件,通常是配合使用,而且又先后归于 Elastic.co 公司名下,…

关于音频 DSP 的接口种类以及其应用场景介绍

在音频系统中&#xff0c;DSP&#xff08;数字信号处理器&#xff09;扮演着重要角色&#xff0c;通常会通过不同的接口与音频系统中的其他组件&#xff08;如功放、扬声器、音频源等&#xff09;进行连接。以汽车应用场景为例&#xff0c;以下是一些常见的接口类型分类及其介绍…

Linux操作系统学习---初识环境变量

目录 ​编辑 环境变量的概念&#xff1a; 小插曲&#xff1a;main函数的第一、二个参数 获取环境变量信息&#xff1a; 1.main函数的第三个参数 2.查看单个环境变量 3.c语言库函数getenv() 和环境变量相关的操作指令&#xff1a; 1.export---导出环境变量&#xff1a; 2.unse…

每日速记10道java面试题04

其他资料 每日速记10道java面试题01-CSDN博客 每日速记10道java面试题02-CSDN博客 每日速记10道java面试题03-CSDN博客 目录 一、什么是java的自动拆箱和装箱&#xff1f; 二、什么是java中的迭代器&#xff1f; 三、Java 运行时异常和编译时异常之间的区别是什么? 四、…

Python字典的用法(定义、增加、删除、修改、查询、遍历)

一.字典的介绍 dictionary&#xff08;字典&#xff09;是除了列表以外的 Python 中最灵活的数据类型。dict&#xff08;字典&#xff09;可以采用多个数据&#xff0c;通常用于存储描述一个物体的相关信息。 字典和列表最主要的区别是&#xff0c;字典是无序的对象集合&#x…

多视图几何中向量叉乘的矩阵转换 Matrix Transformation for Cross Product in MVG

Title: 多视图几何中向量叉乘的矩阵转换 Matrix Transformation for Cross Product in MVG 文章目录 I. 向量叉乘的矩阵转换恒等式II. 符号计算 Maxima 程序推导III. 推论和关联公式的说明1. 推论2. 应用于对极几何中基本矩阵推导3. 应用于基本矩阵与单应矩阵关系4. 与刚体运动…

支持多种快充协议的取电芯片,支持最大功率140W

前言 在快节奏的现代生活中&#xff0c;人们对于小家电的依赖日益加深&#xff0c;而随之而来的充电问题也日益凸显。传统的充电方式往往受限于电压、电流的限制&#xff0c;难以满足不同设备对电力的多样化需求。而PD快充协议的诞生&#xff0c;则为这一难题提供了全新的解决…

分页查询功能

EmployeeController /** * 员工分页查询 * * param employeePageQueryDTO * return */ GetMapping("/page") ApiOperation("员工分页查询") public Result<PageResult> page(EmployeePageQueryDTO employeePageQueryDTO) { log.info("…

深度学习读书笔记 绪论

深度学习是什么&#xff1f; 机器学习的分支。 深度学习问题也是指从有限样例中总结出一般的规律&#xff0c;应用在新的未知数据上的方法。 机器学习的三个基本要素 模型 机器学习任务首要弄明白的&#xff0c;也就是一个机器学习任务所面对的输入空间和输出空间。 输入…

“移门缓冲支架:为家庭安全加码”

在智能家居日益普及的今天&#xff0c;科技不仅改变了我们的生活方式&#xff0c;也提升了家居的安全。移门缓冲支架作为一项结合了现代技术的小型装置&#xff0c;正逐渐成为提升家庭安全的重要配件。它通过吸收门关闭时的冲击力、减缓关门速度以及减少噪音等多重功能&#xf…

npm error code ETIMEDOUT 简单排查

今天突然没到一个仓库的ius问题。改完之后想发布npm包 出现下面的场景 npm addUser npm adduser npm notice Log in on https://registry.npmjs.org/ Create your account at: https://www.npmjs.com/login?next/login/cli/12596c8b-ba4a-4763-8a97-215087d380c4 Press ENTER…

力扣96:不同的二叉搜索树

给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;5示例 2&#xff1a; 输入&#xff1a;n 1 输出&#xff1a;1 卡…