css3动画抖动效果

作者：mobiledu2502909493 | 来源：互联网 | 2023-09-17 11:54

html结构：

css样式：

.dd {

animation: shake 1s;
-o-animation: shake 1s;
-webkit-animation: shake 1s;
-moz-animation: shake 1s;
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-o-keyframes shake {
/* Opera */
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-webkit-keyframes shake {
/* Safari 和 Chrome */
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-moz-keyframes shake {
/* Firefox */
0%, 100% {
-moz-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-moz-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-moz-transform: translateX(5px);
}

}

js效果：

效果：

技术分享

鼠标经过home图标时，图标会左右晃动。

css3动画抖动效果

推荐阅读

header
网站访问全流程解析

本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]

蜡笔小新 2024-11-12 18:13:16
include
解决DNS服务器配置转发无法解析的问题

本文详细介绍了如何解决DNS服务器配置转发无法解析的问题，包括编辑主配置文件和重启域名服务的具体步骤。 ... [详细]

蜡笔小新 2024-11-13 02:41:19
io
微软推出Windows Terminal Preview v0.10

微软近期发布了Windows Terminal Preview v0.10，用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上，新增了鼠标输入和复制Pane等功能。 ... [详细]

蜡笔小新 2024-11-12 16:15:56
select
MySQL查询执行流程详解

MySQL的查询执行流程涉及多个关键组件，包括连接器、查询缓存、分析器和优化器。在服务层，连接器负责建立与客户端的连接，查询缓存用于存储和检索常用查询结果，以提高性能。分析器则解析SQL语句，生成语法树，而优化器负责选择最优的查询执行计划。这一流程确保了MySQL能够高效地处理各种复杂的查询请求。 ... [详细]

蜡笔小新 2024-11-11 16:48:32
include
[c++基础]STL

cppfig15_10.cppincludeincludeusingnamespacestd;templatevoidprintVector(constvector&integer ... [详细]

蜡笔小新 2024-11-13 13:22:43
include
ZooKeeper 入门指南

本文将详细介绍ZooKeeper的工作机制、特点、数据结构以及常见的应用场景，包括统一命名服务、统一配置管理、统一集群管理、服务器动态上下线和软负载均衡。 ... [详细]

蜡笔小新 2024-11-13 13:11:46
get
自动验证时页面显示问题的解决方法

在使用自动验证功能时，页面未能正确显示错误信息。通过使用 `dump($info->getError())` 可以帮助诊断和解决问题。 ... [详细]

蜡笔小新 2024-11-13 12:30:21
int
解决Parallels Desktop错误15265的方法

本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案，包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]

蜡笔小新 2024-11-12 05:14:12
int
解决 Windows Server 2016 网络连接问题

本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]

蜡笔小新 2024-11-12 00:01:44
int
使用Jsoup解析并遍历HTML文档结构

使用Jsoup解析并遍历HTML文档时，该库能够高效地生成一个清晰、规范的解析树，即使源HTML文档存在格式问题。Jsoup具备强大的容错能力，能够处理多种异常情况，如未闭合的标签等，确保解析结果的准确性和完整性。 ... [详细]

蜡笔小新 2024-11-11 21:30:03
int
CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解

在 CentOS 7 系统中，iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表，包括编写脚本文件 `/usr/local/sbin/iptables.sh`，并使用 `iptables -F` 清空现有规则。此外，还深入探讨了 NAT 表的配置方法，帮助读者更好地理解和应用这些网络防火墙技术。 ... [详细]

蜡笔小新 2024-11-11 18:33:22
int
未加载符号表，请使用“file”命令加载目标文件以进行调试。

在使用Eclipse进行调试时，如果遇到未解析的断点（unresolved breakpoint）并显示“未加载符号表，请使用‘file’命令加载目标文件以进行调试”的错误提示，这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件，以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息，从而实现有效的调试。 ... [详细]

蜡笔小新 2024-11-11 18:21:47
int
LeetCode 有效回文串 II：深入解析与优化算法

在 LeetCode 的“有效回文串 II”问题中，给定一个非空字符串 `s`，允许删除最多一个字符。本篇深入解析了如何判断删除一个字符后，字符串是否能成为回文串，并提出了高效的优化算法。通过详细的分析和代码实现，本文提供了多种解决方案，帮助读者更好地理解和应用这一算法。 ... [详细]

蜡笔小新 2024-11-11 17:40:42
io
系统数据实体验证异常：多个实体验证失败的错误处理与分析

在使用MVC和EF框架进行数据保存时，遇到了 `System.Data.Entity.Validation.DbEntityValidationException` 错误，表明存在一个或多个实体验证失败的情况。本文详细分析了该错误的成因，并提出了有效的处理方法，包括检查实体属性的约束条件、调试日志的使用以及优化数据验证逻辑，以确保数据的一致性和完整性。 ... [详细]

蜡笔小新 2024-11-11 16:54:45
window
装饰者模式（Decorator）：一种灵活的对象结构设计模式

装饰者模式（Decorator）是一种灵活的对象结构设计模式，旨在为单个对象动态地添加功能，而无需修改原有类的结构。通过封装对象并提供额外的行为，装饰者模式比传统的继承方式更加灵活和可扩展。例如，可以在运行时为特定对象添加边框或滚动条等特性，而不会影响其他对象。这种模式特别适用于需要在不同情况下动态组合功能的场景。 ... [详细]

蜡笔小新 2024-11-11 16:36:53

mobiledu2502909493

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章