基于CSS3的animation属性实现微信拍一拍动画效果


Posted in HTML / CSS onJune 22, 2020

看到最近流行的微信拍一拍功能,复习下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 微信拍一拍功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3制作日历实现代码
Jan 21 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 #HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 #HTML / CSS
CSS3新增布局之: flex详解
Jun 18 #HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 #HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 #HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 #HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 #HTML / CSS
You might like
php分页函数
2006/07/08 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
Python max内置函数详细介绍
2016/11/17 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Django models filter筛选条件详解
2020/03/16 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
让世界充满爱演讲稿
2014/05/24 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
幼儿园开学通知
2015/04/24 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers