js-多个果冻按钮之当前果冻按钮弹性特效

来源：互联网发布：java程序设计培训学校编辑：程序博客网时间：2024/04/29 05:06

先上静态截图（要用到TweenMax.js）：

果冻按钮

HTML部分：

<div class="button">  <p>点我</p></div>

CSS部分：

body {  background-color: #e8e8e8;  padding: 100px;}p{  height:60px;  text-align: center;  color: white;  font-size: 1.5rem;}.button {  background: #3498db;  width: 120px;  height: 70px;  line-height: 70px;  /*padding:1% 0;*/  border-radius: 10px;}.button:after {  content: "";  display: block;  position: relative;  width:100%;  height: 10%;  border-radius: 50%;  background-color: #2a7aaf;  opacity: 0.3;  bottom: 5px;}

JS部分：

  var $button = document.querySelectorAll('.button');  for (var i = 0; i < $button.length; i++) {    $button[i].addEventListener('click', function() {      var duration = 0.3,        delay = 0.08;      TweenMax.to(this, duration, { scaleY: 1.6, ease: Expo.easeOut });      TweenMax.to(this, duration, { scaleX: 1.2, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay });      TweenMax.to(this, duration * 1.25, {        scaleX: 1,        scaleY: 1,        ease: Back.easeOut,        easeParams: [6],        delay: delay * 3      });    });  }

阅读全文

0 0