CSS + HTML <水滴按钮效果>
效果图
介绍
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";想了解更多的请自行查找并学习，因为很多不是中文的，所以整理起来比较麻烦，大家有什么方便学习的资源也欢迎给我留言?~~~
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
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;
}
</style>
</head>
<body>
<div class="btn">
<span class="ball"></span>
<span class="ball"></span>
<span class="ball"></span>
<span class="text">HOVER</span>
</div>
<svg style="width: 0; height: 0;">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="goo" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2"
result="shadow" />
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feBlend in2="shadow" in="goo" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"> </script>
<script>
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()
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-04-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读