gsap实现鼠标悬停颜色卡片突出动画效果代码
代码语言:html
所属分类:悬停
代码描述:gsap实现鼠标悬停颜色卡片突出动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #FDFCF7;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
}
text {
fill: #FFF;
font-size: 0.75rem;
}
</style>
</head>
<body translate="no">
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<clipPath id="mask">
<rect x="0" y="0" width="800" height="400" fill="green"/>
</clipPath>
<g class="colorTab">
<rect x="0" y="0" rx="20" width="130" height="320" fill="green"/>
<text x="10" y="120" class="label"></text>
</g>
</defs>
<g id="container" clip-path="url(#mask)">
</g>
</svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.4.js"></script>
<script >
gsap.config({ trialWarn: false });
let select = s => document.querySelector(s),
toArray = s => gsap.utils.toArray(s),
mainSVG = select('#mainSVG'),
container = select('#container'),
colorTab = select('.colorTab'),
visibleArea = {
value: 160,
offset: 0 },
pt = mainSVG.createSVGPoint(),
mousePos = { x: 0, y: 0 },
colorArray = ["001219", "005f73", "0a9396", "94d2bd", "e9d8a6", "ee9b00", "ca6702", "bb3e03", "ae2012", "9b2226"],
extendedColorArray = [{ "name": "Rich black", "hex": "001219", "rgb": [0, 18, 25], "cmyk": [10.........完整代码请登录后点击上方下载按钮下载查看
网友评论0