看到最近流行的微信拍一拍功能,复习下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') })
到此这篇关于基于CSS3的animation属性实现微信拍一拍动画效果的文章就介绍到这了,更多相关css3 微信拍一拍功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
默认uni-app打包出来的H5在Android上是没法播放.m3u8直播流的,控制台或报错 Unc...
一只小奶狗会有名字、品种以及一堆可爱的特点作为其属性。如果将其建模为一个类...
一、反常的SQL语句 某周四午休时分,我正在工位上小憩,睡梦中仿佛看到了自己拿...
CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗,它还...
css-vars-ponyfill 通过css变量来实现网页换肤的过程中,会出现兼容性问题。 为...
qq空间有欢迎动画,想要给网页制作一个开场动画效果,该怎么制作呢?下面我们就...
前言 现在不管是桌面客户端还是移动客户端,都会夹杂着一部分H5页面,这种混合式...
大家都知道网页中必须要有图片,那么具体的该如何在网页设计中加入图片呢?下面...
至上一回分解完淘宝详情页( 点击查看 )后,再写了一篇关于商城基础模板装修首页...
企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登...