html5 水滴纸上效果,CSS+HTML<水滴按钮效果>

效果图：

hover.gif

Tweenlite，是webgame开发人员比较常用的一个缓动库。

官方网站：http://www.greensock.com/tweenlite/

可以去https://www.tweenmax.com.cn/start/下载 TweenMax.min.js 并引入

它的优点：

1.高效，性能不会差。

2.体积小，用到项目中，你的文件大小增加了3-4k。

3.容易使用，常用的函数就那么几个

TweenLite.to(mc, 1.5, {x:100, y:200, alpha:50});

第一个参数是需要缓动的对象，第二个参数是持续时间，第三个是需要改变的对象属性。任何DisplayObject的属性都可以改变。还有很多可选的参数，比如缓动函数，最后结束时候的回调函数

vue使用的话，可以npm install --s gsap

import { TweenLite } from "gsap";

想了解更多的请自行查找并学习，因为很多不是中文的，所以整理起来比较麻烦，大家有什么方便学习的资源也欢迎给我留言😘~~~

代码如下：

Document

body,

html {

height: 100%;

}

body {

margin: 0;

width: 100%;

display: flex;

justify-content: center;

align-items: center;

}

.btn {

width: 100px;

height: 100px;

border-radius: 50%;

background: #208cf1;

filter: url("#shadowed-goo");

position: relative;

cursor: pointer;

display: flex;

justify-content: center;

align-items: center;

}

.ball {

display: inline-block;

width: 100%;

height: 100%;

background: #208cf1;

border-radius: 50%;

position: absolute;

left: 0;

top: 0;

opacity: 1;

}

.text {

position: relative;

z-index: 5;

color: white;

font-weight: bold;

}

HOVER

result="goo" />

result="shadow" />

function initBt4() {

var bt = document.querySelector('.btn')

var blob = document.querySelectorAll('.ball');

var filter = document.querySelector('#shadowed-goo');

bt.addEventListener("mousemove", function (e) {

var x = (e.pageX - bt.offsetLeft - bt.offsetWidth / 2) * 0.3;

var y = (e.pageY - bt.offsetTop - bt.offsetHeight / 2) * 0.3;

TweenLite.to(blob[0], 4.2, { x: x, y: y, ease: Elastic.easeOut.config(1, 0.1) });

TweenLite.to(blob[1], 2.8, { x: x, y: -y, ease: Elastic.easeOut.config(1, 0.1) });

TweenLite.to(blob[2], 2.8, { x: -x, y: -y, ease: Elastic.easeOut.config(1, 0.1) });

})

}

initBt4()