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