小编给大家分享一下如何基于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属性实现微信拍一拍动画效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。