最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于CSS3的animation属性实现微信拍一拍动画效果代码示例
时间:2022-06-25 14:05:05 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下基于CSS3的animation属性实现微信拍一拍动画效果代码示例,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
代码如下:
css;">@-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; 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; } .stagger1{ animation: swing .5s .15s linear 1; /* animation-play-state: paused; */ }qq窗口抖动微信拍拍头像晃动
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') })
相关文章
- 价格跟踪交易-价格跟踪交易软件 04-25
- 碧蓝航线使用要注意什么 04-25
- 明日之后苹果能做什么食物攻略 04-25
- 以闪亮之名浅栗捏脸数据id攻略 04-25
- 逆水寒手游春归学堂奇遇如何完成 04-25
- 明日之后二层别墅建造蓝图攻略 04-25