脚本宝典收集整理的这篇文章主要介绍了基于CSS3的animation属性实现微信拍一拍动画效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
看到最近流行的微信拍一拍功能，复习下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 微信拍一拍功能内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的基于CSS3的animation属性实现微信拍一拍动画效果全部内容，希望文章能够帮你解决基于CSS3的animation属性实现微信拍一拍动画效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。