基于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, 0p金融有哪些专业x);    }    7夸人的英语句子5% {        -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;}.shak蒸螃蟹e: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(-10d蓝藻是原核生物吗eg);  }  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: paud; */} <!-- qq窗口抖动 -->  <div class="shake">qq窗口抖动</div>  <!-- 微信拍拍头像晃动 -->  <div class="stagger">微信拍拍头像晃动</div>

document.querylector('.stagger').addeventlistener('click', function() {      document.querylector('.stagger').classlist.add('stagger1')      console.log('papa nudged baby')})/*每次点击实现动画，注意监听动画结束，移除动画类，后再添加动画类    document.querylector('.stagger').addeventlistener('animationend', function() {      document.querylector('.stagger').classlist.remove('stagger1')    })

到此这篇关于基于css3的animation属性实现微信拍一拍动画效果的文章就介绍到这了,更多相关css3 微信拍一拍功能内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！