<>微信拍一拍动画

看到最近流行的微信拍一拍功能,复习下CSS3的animation,所以写下这个盒子晃动的动画,把qq的窗口抖动也加上吧
@-webkit-keyframes shake { 0% { -webkit-transform: translate(2px, 2px); } 25% {
-webkit-transform: translate(-2px, -2px); } 50% { -webkit-transform: translate(
0px, 0px); } 75% { -webkit-transform: translate(2px, -2px); } 100% {
-webkit-transform: translate(-2px, 2px); } } @keyframes shake { 0% { transform:
translate(2px, 2px); } 25% { transform: translate(-2px, -2px); } 50% { transform
: translate(0px, 0px); } 75% { transform: translate(2px, -2px); } 100% {
transform: translate(-2px, 2px); } } .shake { position: relative; top: 30px;
left: 100px; height: 200px; width: 200px; color: #ff0000; background: #000; }
.shake:hover { -webkit-animation: shake 0.2s infinite; animation: shake 0.2s
infinite; } /*活动摇摆动画*/ @-webkit-keyframes swing { 10% { transform: rotate(15deg)
; } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% {
transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } }
@-moz-keyframes swing { 10% { transform: rotate(15deg); } 20% { transform:
rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg
); } 50%,100% { transform: rotate(0deg); } } @-o-keyframes swing { 10% {
transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform:
rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(
0deg); } } @keyframes swing { 10% { transform: rotate(12deg); } 20% { transform:
rotate(-11.5deg); } 30% { transform: rotate(1deg); } 40% { transform: rotate(
-1deg); } 50%,100% { transform: rotate(0.5deg); } } .stagger { background-color:
#ff0000; width: 60px; height: 60px; } .stagger1{ animation: swing .5s .15s
linear 1; /* animation-play-state: paused; */ } <!-- qq窗口抖动 --> <div class=
"shake">qq窗口抖动</div> <!-- 微信拍拍头像晃动 --> <div class="stagger">微信拍拍头像晃动</div>
document.querySelector('.stagger').addEventListener('click', function() {
document.querySelector('.stagger').classList.add('stagger1') console.log('papa
nudged baby') }) /*每次点击实现动画,注意监听动画结束,移除动画类,后再添加动画类
document.querySelector('.stagger').addEventListener('animationend', function()
{ document.querySelector('.stagger').classList.remove('stagger1') })

技术
©2019-2020 Toolsou All rights reserved,
vue 监听 Treeselect 选择项的改变华为受限老对手受益最大?分蛋糕的人越来越多了! mysql无备份恢复java几种常见运行时异常及简单例子python获取excel的一列或者一行的数据(精华)2020年6月26日 C#类库 循环执行帮助类vs2017,创建C++Win32窗体应用程序uboot设置nfs参数——linux kernel使用nfs方式加载根文件系统rootfs(六)mybatis-config.xml设置默认值配置(精华2020年6月2日更新) TypeScript函数详解