CSS3动画之按钮抖动
2024-10-07 03:48:17
今天要分享一组代码,当鼠标悬停在按钮上时。按钮抖动!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标悬停在按钮上,按钮抖动</title>
</head>
<style>
.lanren {
margin: 200px auto;
width: 300px;
text-align: center;
height: 40px;
line-height: 40px;
border: 1px solid #CCC;
border-radius: 2px;
background-color: skyblue;
}
.lanren:hover {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
} @keyframes shake {
10%, 90% {transform: translate3d(-1px, 0, 0);} 20%, 80% {transform: translate3d(2px, 0, 0);} 30%, 50%, 70% {transform: translate3d(-4px, 0, 0);} 40%, 60% {transform: translate3d(4px, 0, 0);}
}
</style> <body>
<div class="lanren">敢悬停在我上面,我就抖动!!</div>
</body>
</html>
效果图(静态截图):
想要看具体的动图,那就动手敲起来吧,效果图很可爱滴呦!!!
最新文章
- python 学习第二十一天,django知识(三)
- xcode 工具学习笔记
- php使用mysql和mysqli连接查询数据
- .net框架中少有人知的扩展cmod
- REST风格URL
- 核反应堆[HDU2085]
- Mac下安装Scrapy
- [IoLanguage]Io Tutorial[转]
- ios版本更新总结
- 试水 Egret :TouchEvent与EnterFrame相关
- jQuery的get()post()getJson()方法
- Android学习开发中如何保持API的兼容
- 那些年我们跳过的 IE坑
- call和apply(学习笔记)
- Spark的Streaming和Spark的SQL简单入门学习
- 【leetcode】427. Construct Quad Tree
- MATLAB——神经网络pureline激活函数
- Lua 判断表是否为空方法
- input的焦点事件
- 四种List实现类的对比总结