最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于CSS3的animation属性实现微信拍一拍动画效果代码示例
时间:2020-06-28 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下基于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') })
相关文章
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- css3制作背景渐变动画效果教程 10-26
- CSS3呈现的定价表 09-16
- CSS3如何制作彩虹按钮样式 09-16
- CSS3图片悬停的切换按钮介绍 09-16