gsap实现鼠标悬停颜色卡片突出动画效果代码

代码语言:html

所属分类:悬停

代码描述:gsap实现鼠标悬停颜色卡片突出动画效果代码

代码标签: 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