css3实现页面元素抖动效果

html

<div id="shake" class="shape">horizontal shake</div>

js(vue3)

  function shake(elemId) {const elem = document.getElementById(elemId)console.log('获取el', elem)if (elem) {elem.classList.add('shake')setTimeout(() => {elem.classList.remove('shake')}, 800)}}onMounted(() => {setTimeout(() => {console.log('进来settimeout')shake('shake')}, 5000)})

css

  .shape {margin: 50px;width: 200px;height: 50px;line-height: 50px;text-align: center;border: 1px solid black;}.shake {animation: shake 800ms ease-in-out;}@keyframes shake {/* 水平抖动,核心代码 */10%,90% {transform: translate3d(-1px, 0, 0);}20%,80% {transform: translate3d(+2px, 0, 0);}30%,70% {transform: translate3d(-4px, 0, 0);}40%,60% {transform: translate3d(+4px, 0, 0);}50% {transform: translate3d(-4px, 0, 0);}}

参考链接:https://juejin.cn/post/6957517187049324552

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

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

相关文章

【应用层协议】HTTPS的加密流程

文章目录 1. 认识HTTPS2. 密文3. HTTPS加密流程3.1 对称加密3.2 非对称加密3.3 证书 1. 认识HTTPS HTTPS&#xff08;超文本传输协议安全&#xff09;也是一个应用层协议&#xff0c;它是在HTTP协议的基础上引入了一个加密层。 也就是HTTP协议传输文本的方式是明文&#xff0c;…

LeetCode:买卖股票的最佳时机 系列Ⅰ、Ⅱ、Ⅲ、Ⅳ(C++)

目录 121. 买卖股票的最佳时机 122. 买卖股票的最佳时机 II 123. 买卖股票的最佳时机 III 188. 买卖股票的最佳时机 IV 121. 买卖股票的最佳时机 题目描述&#xff1a; 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只…

flink选择slot

flink选择slot 在这个类里修改 package org.apache.flink.runtime.resourcemanager.slotmanager.SlotManagerImpl; findMatchingSlot(resourceProfile)&#xff1a;找到满足要求的slot&#xff08;负责从哪个taskmanager中获取slot&#xff09;对应上图第8&#xff0c;9&…

国庆中秋特辑(八)Spring Boot项目如何使用JPA

目录 一、Spring Boot 项目使用 JPA 的步骤二、Spring Boot 项目使用 JPA 注意事项三、Spring Boot 项目使用 JPA 常用语法 Spring Boot项目如何使用JPA&#xff0c;具体如下 一、Spring Boot 项目使用 JPA 的步骤 添加依赖 在项目的 pom.xml 文件中添加 Spring Boot JPA 和数…

基于SpringBoot的网上超市系统

基于SpringBoot的网上超市系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 【主要功能】 角色&#xff1a;用户、管理员 管理员&#xff1a;个人中心、用户管理、商品分类…

Electron.js入门-构建第一个聊天应用程序

什么是electron 电子是一个开源框架&#xff0c;用于使用web技术构建跨平台桌面应用程序&#xff1b;即&#xff1a; HTML、CSS和JavaScript&#xff1b;被集成为节点模块&#xff0c;我们可以为我们的应用程序使用节点的所有功能&#xff1b;组件&#xff0c;如数据库、Api休…

【HUAWEI】VLAN+OSPF+单臂路由

目录 &#x1f96e;写在前面 &#x1f96e;3.1、拓扑图 &#x1f96e;3.2、操作思路 &#x1f96e;3.3、配置操作 &#x1f363;3.3.1、LSW2配置 &#x1f363;3.3.2、LSW3配置 &#x1f363;3.3.3、R1配置 &#x1f363;3.3.4、R2配置 &#x1f363;3.3.5、LSW1配置 &#x1f…

蓝桥等考Python组别十一级008

第一部分:选择题 1、Python L11 (15分) 运行下面程序,输出的结果是( )。 a = list(range(1, 3)) print(a) [1, 2][2, 3][1, 2, 3][1, 2, 3, 4]正确答案:A 2、Python L11 (15分)

SQL之LIMIT子句踩坑记录

部分场景下&#xff0c;我们可能希望从一个大表 unparsed 中抽取前100行并对这些行应用UDF&#xff0c;一种容易想到的SQL语句如下&#xff1a; pyspark insert into table parsed select url, parse_func(content) as parsed_content from unparsed limit 100;但这个语句实际…

力扣 -- 518. 零钱兑换 II(完全背包问题)

解题步骤&#xff1a; 参考代码&#xff1a; 未优化代码&#xff1a; class Solution { public:int change(int amount, vector<int>& coins) {int ncoins.size();//多开一行&#xff0c;多开一列vector<vector<int>> dp(n1,vector<int>(amount1…

Python3数据科学包系列(三):数据分析实战

Python3中类的高级语法及实战 Python3(基础|高级)语法实战(|多线程|多进程|线程池|进程池技术)|多线程安全问题解决方案 Python3数据科学包系列(一):数据分析实战 Python3数据科学包系列(二):数据分析实战 Python3数据科学包系列(三):数据分析实战 一: 数据分析与挖掘认知…

Xcode、终端、Mason、nvim.debug环境路径

Xcode&#xff1a; /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include 终端&#xff1a; /Library/Developer/CommandLineTools/usr/include Mason: /Users/donny/.local/share/nvim/mason/packages/clangd/…

Linux apt-get update - Could not connect to XXX(Connection refused)

Linux: apt-get update ----Err:Could not connect to XXX(Connection refused) - 知乎 先换源&#xff08;vi不好使用&#xff0c;可以换成gedit&#xff09; 若还是不行&#xff0c;可以再尝试执行&#xff1a; unset http_proxy unset https_proxy

蓝桥等考Python组别十二级002

第一部分:选择题 1、Python L12 (15分) 运行下面程序,输出的结果是( )。 lis = [4, 1, 6, 5, 2, 3] print(lis[0 : 2]) [4, 1] [1, 6][4][1, 6, 5]正确答案:A 2、Python L12 (15

图像分割中的色块的提取

一 色块提取方法&#xff1a; ①首先是色彩模型的转换 由RGB颜色空间转到HSV颜色空间 原因&#xff1a;RGB颜色空间适合显示系统&#xff0c;但是各分量间相关性很强&#xff0c;比如当图像亮度发生变化时&#xff0c;RGB三个分量都会发生相应改变 但是HSV颜色空间更能感知颜色…

游览器找不到服务器上PHP文件的一种原因

最近在练习搭建网站&#xff0c;遇到游览器找不到服务器上的php文件的问题。后来查找发现&#xff0c;apache文档根目录跟apache虚拟主机文档根目录不同&#xff0c;服务器开启了虚拟主机功能。这导致游览器找不到php文件。 使用的环境是LAMP&#xff0c;它 的操作系统和软件版…

ubuntu22.04 x11窗口环境手势控制

ubuntu22.04 x11窗口环境手势控制 ubuntu x11窗口环境的手势控制并不优秀&#xff0c;我们可以使用touchegg去代替 这个配置过程非常简单&#xff0c;并且可以很容易在一定范围内达到你想到的效果&#xff0c;类比mac的手势控制 关于安装 首先添加源&#xff0c;并安装 sud…

【NeurIPS 2023】Backdoor对抗攻防论文汇总

NeurIPS 对抗攻防论文 NeurIPS2022|对抗攻防论文整理 - 知乎 NeurIPS 2023 Papers BIRD: Generalizable Backdoor Detection and Removal for Deep Reinforcement Learning https://neurips.cc/virtual/2023/poster/70618 摘要&#xff1a; 后门攻击对深度强化学习&…

Python数据攻略-Pandas进行CSV和Excel文件读写

在数据分析的世界里,能够读取和写入不同格式的文件是一项基本而重要的技能。CSV(逗号分隔值)和Excel是两种常见的数据存储格式。它们在商业、科研、教育等多个领域都有广泛应用。 文章目录 读取CSV文件`pd.read_csv()` 文件读取函数的基本用法`DataFrame.to_csv()` 数据写入…

基于Java的飞机航班订票购票管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…