js实现果冻液态悬浮交互动画文字按钮链接效果代码
代码语言:html
所属分类:悬停
代码描述:js实现果冻液态悬浮交互动画文字按钮链接效果代码,鼠标放上去试试看。
代码标签: js 果冻 液态 悬浮 交互 动画 文字 按钮 链接
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,body {
margin:50px;
padding:0;
background:#38277F
}
canvas {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
z-index:-1
}
.button {
background:0;
padding:20px;
border-radius:50px;
position:relative;
margin-top:5px;
display:inline-block;
font-family:'Glamour Absolute',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
color:white;
text-decoration:none;
z-index:2;
font-weight:100;
font-size:30px;
letter-spacing:1px;
margin:50px
}
</style>
</head>
<body><a class="button" href="" data-text="hey">bfw.wiki </a><a class="button" href="" data-text="hey">Buy now!$10 </a><a class="button" href="http://bootstrap.com" data-text="hey">small </a><a class="button"
href="" data-text="hey">A Really Long button with text </a>
<!-- partial -->
<script>
const LiquidButton = class LiquidButton {
constructor(button) {
const { width, height } = button.getBoundingClientRect();
const buttonStyles = window.getComputedStyle(button);
console.log();
const options = button.dataset || {};
this.font = `${buttonStyles['font-size']} ${buttonStyles['font-family']}`;
console.log(this.font);
this.tension = options.tension || 0.4;
this.width = width;
this.height = height;
this.margin = options.margin || 50;
// assume the padding it the same all around
this.padding = parseFloat(buttonStyles.........完整代码请登录后点击上方下载按钮下载查看
网友评论0