TweenMax（二）按钮点击小动画

今天药忘吃喽~ 2022-04-18 04:07 249阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/TweenMax.js" ></script>
    		<style>
    			.box{width: 100px;height: 45px; background: #e96235; border-radius: 10px; margin: 100px auto; text-align: center; color: #fff; line-height: 44px;}
    		</style>
    	</head>
    	<body>
    		<div class="box">戳我</div>
    	</body>
    	<script>
    		
    		var box = document.getElementsByClassName('box')[0];
    		function ButtonAnimation(dom){
    			this.dom = dom;
    			this.t = new TimelineMax();
    		}
    		ButtonAnimation.prototype.init = function(){
    			var _this = this;
    			this.t.to(_this.dom,0.15,{
    				scaleX:1.1,
    				scaleY:0.8,
    				skewX:2,
    				x:2,
    				skewY:2,
    				force3D:true,
    				ease:Quad.easeInOut,
    				onComplete:function(){
    					_this.t.to(_this.dom,0.15,{
    						scaleX:0.9,
    						scaleY:1.1,
    						skewX:-2,
    						x:-2,
    						skewY:-2,
    						force3D:true,
    						ease:Quad.easeInOut,
    						onComplete:function(){
    							_this.t.to(_this.dom,0.2,{
    								scaleX:1,
    								skewX:0,
    								x:0,
    								skewY:0,
    								scaleY:1,
    								force3D:true,
    								ease:Back.easeOut
    							})
    						}
    					})
    				}
    			})
    		}
    		box.onclick = function(){
    			var btn = new ButtonAnimation(box);
    			btn.init();
    		}
    	</script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关按钮—按钮点击特效

按钮—按钮点击特效 ![在这里插入图片描述][2021041819283044.gif_pic_center] <!DOCTYPE html> <htm

谁借莪１个温暖的怀抱￠/ 2023年01月13日 10:54/ 0 赞/ 280 阅读

相关 Tkinter(二) ｜点击按钮显示图片

解决办法： -------------------- 出现的问题 from tkinter import from PIL import Image

r囧r小猫/ 2022年12月12日 15:07/ 0 赞/ 278 阅读

相关动画库 TweenMax

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

约定不等于承诺〃/ 2022年10月25日 11:21/ 0 赞/ 339 阅读

相关监听按钮点击事件

3中注册监听方式比较 1.匿名内部类需要获取控件对象，使用变量不方便；适用于单个事件 2.实现接口需要获取控件对象，使用变量方便；适用于于多个事件 3.设置onC

怼烎@/ 2022年07月12日 12:45/ 0 赞/ 330 阅读

相关模拟点击网页按钮

转自：http://blog.csdn.net/tiantian1980/article/details/12322191 [Demo下载][Demo]

た入场券/ 2022年06月01日 23:36/ 0 赞/ 319 阅读

相关 TweenMax（二）按钮点击小动画

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

今天药忘吃喽~/ 2022年04月18日 04:07/ 0 赞/ 250 阅读

相关小程序按钮防止重复点击

最近做小程序网不好时提交会多次点击，造成多次请求，有很多无用数据，这里记录一下解决方法方法一 //wxml文件 <button disabled=“{

怼烎@/ 2022年02月26日 10:24/ 0 赞/ 522 阅读

相关 js 实现点击按钮

需求说明有时候为了更好的用户体验，我们需要js来实现点击按钮的操作 -------------------- html代码 <button type="

你的名字/ 2022年02月20日 08:55/ 0 赞/ 948 阅读

相关点击按钮改变主题（二）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

偏执的太偏执、/ 2021年12月19日 05:04/ 0 赞/ 294 阅读

相关小程序中textarea点击按钮事件

`textarea` 的 `blur` 事件会晚于页面上的 `tap` 事件，如果需要在 `button` 的点击事件获取 `textarea`，可以使用 `form` 的 `

秒速五厘米/ 2021年09月15日 19:32/ 0 赞/ 688 阅读