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

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.........完整代码请登录后点击上方下载按钮下载查看