基于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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
JQuery的$命名冲突详细解析
2013/12/28 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
Python实现大文件排序的方法
2015/07/10 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
python实现的Iou与Giou代码
2020/01/18 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
出纳岗位职责
2013/11/09 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Window server中安装Redis的超详细教程
2021/11/17 Redis