示例

HTML

<a href="https://gannon.tv/blackfriday" title="50% off Black Friday deals at GANNON.TV">
<svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs><polygon id="liquid"></polygon><mask id="mainMask"><text id="percent" x="400" y="480">50%</text></mask><clipPath id="liquidMask"><use xlink:href="#liquid" /></clipPath></defs><g id="pipette1" class="glass" fill="none" stroke="#aaccfb" stroke-miterlimit="10" stroke-width="4" transform="translate(0, 38)">
<polygon class="liquid" stroke="none" points="34.28 79.01 34.28 94.68 27.91 104.62 27.91 111.41 23.32 114 18.73 111.41 18.73 104.62 12.36 94.68 12.36 79.01 34.28 79.01" fill="#5299f9"/>
<rect id="level" class="liquid" stroke="none" x="12.36" y="48.05" width="22" height="32" fill="#5299f9"/> <g opacity="0.5"><polyline points="12.07 28.65 12.07 11.51 12.07 6.83 14.07 4 15.84 2 19.94 2 27.21 2 31.06 2 32.57 4 34.57 7.16 34.57 12.01 34.57 28.65" fill="none" stroke="#003459" stroke-miterlimit="10" stroke-width="4"/><polygon points="42.05 39.01 4.59 39.01 2 36.43 2 32.19 2 31.53 4.59 28.95 4.59 28.95 42.05 28.95 44.64 31.53 44.64 36.43 42.05 39.01" fill="none" stroke="#003459" stroke-miterlimit="10" stroke-width="4"/><polyline points="34.28 39.01 34.28 94.68 27.91 104.62 27.91 111.41 23.32 114.41 18.73 111.41 18.73 104.62 12.36 94.68 12.36 39.01" fill="none" stroke="#003459" stroke-miterlimit="10" stroke-width="4"/></g><g id="pipetteShine" opacity="0.25" stroke="none"><polygon points="21.63 11.58 18.15 13.1 18.25 9.3 21.73 7.79 21.63 11.58" fill="#fff"/><polygon points="17.88 90.03 17.86 90.03 16.87 89.04 16.87 47.02 18.87 47.02 18.87 89.04 17.88 90.03" fill="#fff"/></g></g>    <!--     <g id="drip"><polygon class="liquid" points="3.3 4.06 0 13.72 1.86 18.5 7.93 21.59 14.11 18.92 15.79 13.72 12.33 3.7 7.89 0 3.3 4.06"/><polygon points="6.71 6.76 5.22 7.96 4.88 6.08 6.37 4.88 6.71 6.76" fill="#fff" opacity="0.5"/></g> -->
<g id="drip" ><path class="liquid" d="M5.18,3.29A34.23,34.23,0,0,0,1,9.41a10.22,10.22,0,0,0-1,4.31,7.9,7.9,0,0,0,15.8,0,10.4,10.4,0,0,0-1.08-4.25,33.33,33.33,0,0,0-4.37-6.59L7.89,0C7,1,6.05,2.15,5.18,3.29Z"></path><ellipse cx="4.24" cy="10.34" rx="1.65" ry="0.98" transform="translate(-6.86 11.65) rotate(-74.42)" fill="#fff" opacity="0.5"></ellipse>      </g>  <circle id="droplet" class="liquid" class="liquid" cx="399" cy="330" r="4" />
<!--     <rect  id="droplet" class="liquid" x="399" y="330" width="6" height="6" /> --><g mask="url(#mainMask)"><use xlink:href="#liquid" class="poly" x="70" y="0" opacity="0.3"/>
<use xlink:href="#liquid" class="poly" y="0"/>   <g id="bubbleGroup" stroke-width="0" fill="#FFF" opacity="1"  clip-path="url(#liquidMask)"><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" /><circle cx="0" cy="380" r="2" />
</g>
</g>      </svg></a>

CSS

:root {--main-color: #E6098B;--bg-color: #03120E;
}
body {background-color: var(--bg-color);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;}.liquid {fill:var(--main-color);
}
#bubbleGroup {stroke: var(--main-color);fill: #222932
}
.poly {fill: #3A86FF;
}.glass {opacity: 0.2
}#flask {opacity: 0.5;fill:#003459;stroke: #003459;
}#percent {fill: #FFF;font-size: 340px;text-anchor: middle;
font-family: 'Anton', sans-serif;
font-family: 'Fredoka One', cursive;
font-family: 'Baloo Bhai', cursive;
/* font-family: 'Alfa Slab One', cursive; */
}a {width: 100%;height: 100%;
}

JS

let select = s => document.querySelector(s),selectAll = s => document.querySelectorAll(s),mainSVG = select('.mainSVG'),liquid = select("#liquid"),pointArray = [],pointValueXArray = [],pointValueYArray = [],liquidWidth = 800,numPoints = 119,dripOffset = 0.0058,rippleDuration = 6,rippleAmount = '+=16',startValX = -100,startValY = 300,colorArray = ['#E6098B', '#FFBE0B', '#FB5607', '#8338EC', '#3A86FF', '#51E5FF', '#04A777', '#F75C03', '#F71735'],allBubbles = selectAll('#bubbleGroup circle')gsap.set(mainSVG, {visibility: 'visible'
})for(let i = 0; i < numPoints; i++) {let p =    liquid.points.appendItem(mainSVG.createSVGPoint());pointArray.push(p);pointValueXArray.push( (i < numPoints - 2) ? startValX : ( i == numPoints - 2 ) ? 761 : -100 );startValX += ( liquidWidth / (numPoints-2) );   pointValueYArray.push( (i < numPoints - 2) ? startValY : 600 )
}gsap.set(pointArray, {x: gsap.utils.wrap(pointValueXArray),y: gsap.utils.wrap(pointValueYArray)
})gsap.set('#level', {transformOrigin: '50% 100%'
})
gsap.set('#bubbleGroup circle, #droplet', {transformOrigin: '50% 50%'
})
gsap.fromTo(allBubbles, {x: 'random(0, 700)',y: 'random(0, 120)',scale:'random(0.5, 3)',//rotation: 'random(20, 180)',opacity: 1
}, {duration: 1,//rotation: 'random(180, 360)',repeatRefresh: true,stagger: {each: 0.52,repeat: -1},scale: 0.1,y: '-=30',opacity: 0.1,
}).seek(100)const makeDrip = () => {let currentColor = gsap.utils.random(colorArray);gsap.to(':root', {'--main-color': currentColor});let tl = gsap.timeline({defaults: {ease: CustomWiggle.create('', {type: 'easeOut', wiggles: gsap.utils.random(9, 12)})}});tl.fromTo('#pipette1', {x: 600,opacity: 0}, {duration: 1,x: 376,opacity: 1,ease: 'expo.inOut'})
.fromTo('#pipette1', {rotation: -95,transformOrigin: '50% 100%'}, {rotation: 0,transformOrigin: '50% 100%',duration: 1.5,ease: 'elastic(1.5, 0.83)'}, 0).addLabel('pipetteReady').fromTo('#drip', {scale: 0}, {duration: 1,scale: 1,transformOrigin: '50% 0%',ease: 'elastic(1, 0.8)'}).to('#level', {duration: 1,scaleY: 0.5,ease: 'elastic(1, 0.8)'},'pipetteReady').fromTo('#drip', {x: 399,y: 155}, {x: 399,y: 330,duration: 0.38,ease: 'power1.in'}).addLabel('splash').to('.poly', {fill:currentColor,ease: 'sine'}, 'splash').to('#bubbleGroup', {stroke:currentColor,ease: 'sine'}, 'splash').to(pointArray, {duration: gsap.utils.random(3, 4),y: (i) => {return rippleAmount},stagger: {each: dripOffset,from: 'center'},}, 'splash') .to('#bubbleGroup', {duration: 4,y: '+=random(5, 10)',ease: 'wiggle({type:easeOut, wiggles:10})'}, 'splash').to('#droplet', {duration: 0.23,y: 'random(-50, -100, 1)',//rotation: 'random(20, 290)',ease: 'power1',}, 'splash')
.to('#droplet', {duration: 0.23,y:0,rotation: '+=30',ease: 'power1.in',}, 'splash+=0.23')   .fromTo('#droplet', {scale: 1}, {duration: 0.23,scale: 0,transformOrigin: '50% 100%',ease: 'expo.in'  }, 'splash+=0.23')  .to('#level', {duration: 1,scaleY: 1,ease: 'expo.in'}, 'splash')  .to('#pipette1', {duration: 1,rotation: 23,x: 100,opacity: 0,ease: 'expo.in'}, 'splash')  gsap.delayedCall(4, makeDrip);
}makeDrip()

改变背景颜色（Change color）相关推荐

在DX12中使用imgui 入门教程立方体旋转+改变背景颜色
入门imgui第一天,把遇到的问题和参考两位大佬写的教程,总结了一下,写了下来,若有错误欢迎指正参考文章: [记录]DirectX12 添加ImGui组件 - 知乎 (zhihu.com) Dire ...
Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片首先要想获取多条数据要用到v-for循环,写到循环就必须写:key 话不多说上代码重点就是:style="{background: ...
html5单击修改背景色,js实现点击ul/li等改变背景颜色
今天项目遇到了标题所说的问题,找到一篇很高效的例子,值得学习. Change.html body li{ list-style-type: none; } 文字文字文字 function g(x) { ...
在DOS环境下添加背景音乐、改变背景颜色、冻结屏幕和调用系统时间
如下例, 例1: # include <Windows.h> # include <stdio.h> # pragma comment (lib, "Winmm.li ...
鼠标悬浮button改变背景颜色
鼠标悬浮button改变背景颜色 //鼠标悬浮事件 private void btnExit_MouseHover(object sender, EventArgs e) { this.btnExit ...
Java背景颜色怎么设成随机的_JS实现随机改变背景颜色
JS实现随机改变背景颜色 JS实现随机改变背景颜色使用Js实现随便点击页面某位置就能改变页面背景颜色的功能 function changeBg(){//改变背景颜色的函数 var bgColor=& ...
VC6,SDI视图改变背景颜色的方法
不怎么时髦,还在用VC6,无聊瞎写的............ SDI视图改变背景颜色分两步吧,效果还是很好的. 首先在CXXView类的OnDraw添加颜色. void CDigimizerView: ...
vue项目使用svg渲染地图并添加点击事件，动态改变背景颜色
需求: ui给了一张地图的svg,需要前端渲染出来并添加对应的点击事件,选中区域,背景颜色需要改变实现思路: 1.拿到需要渲染的 svg图片,把其中path的值赋值过来,所有数据一起组成一个新的js ...

改变背景颜色（Change color）

改变背景颜色

示例

HTML

CSS

JS

改变背景颜色（Change color）相关推荐

最新文章

热门文章