示例

HTML

<svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs><polygon id="liquid"></polygon><clipPath id="mainMask"><polygon points="402.1 325.43 367.12 334.05 340.15 357.94 327.38 391.63 331.72 427.4 352.19 457.05 384.09 473.79 420.12 473.79 452.02 457.05 472.49 427.4 476.83 391.63 464.05 357.94 437.08 334.05 402.1 325.43" fill="#fff" stroke="#000" stroke-miterlimit="10"/></clipPath><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="flask" class="glass" fill="#AACCFB" stroke="#AACCFB" stroke-miterlimit="10" stroke-width="6" >
<!--         <path d="M438.68,219.23v99.08a90,90,0,1,1-77.36,0V219.23" /><line x1="341.31" y1="219.23" x2="458.69" y2="219.23" /> --><polyline points="444.09 221.01 444.09 320.09 476.46 348.76 491.79 389.2 486.58 432.13 462.02 467.72 423.73 487.81 380.48 487.81 342.19 467.72 317.62 432.13 312.41 389.2 327.75 348.76 360.12 320.09 360.12 221.01"  stroke-linecap="round" stroke-width="8"/><line x1="343.42" y1="221.01" x2="460.79" y2="221.01"  stroke-width="8"/>      </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><!-- <circle class="liquid" cx="399" cy="420" r="4" /> --><rect  id="droplet" class="liquid" x="399" y="420" width="6" height="6" /><g clip-path="url(#mainMask)"><use xlink:href="#liquid" x="770" y="0" class="poly darkLiquid" 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)"><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" /><rect x="300" y="380" width="3" height="3" />
</g>
</g>      <g id="flaskShine" opacity="0.25" stroke="none"><polygon points="375.69 300 372.19 296.51 372.19 238.68 375.69 235.18 379.18 238.68 379.18 296.51 375.69 300" fill="#fff"/><rect x="414" y="233" width="16" height="80" rx="0" ry="6" fill="#fff" opacity="0.1"/>      <polygon points="368.47 362.44 351.13 369.58 354.5 351.13 371.84 344 368.47 362.44" fill="#fff"/><polygon points="453 407.77 464.55 422.2 443.58 452.6 421.36 464.21 417.62 459.38 434.66 444.52 453 407.77" fill="#fff"/></g>
</svg><a href="https://greensock.com"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150" /

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;
}.gsap-3-logo {width: 20vw;
max-width: 150px;
position: fixed;
bottom: 15px;
right: 15JSlet select = s => document.querySelector(s),selectAll = s => document.querySelectorAll(s),mainSVG = select('.mainSVG'),liquid = select("#liquid"),pointArray = [],pointValueXArray = [],pointValueYArray = [],liquidWidth = 300,numPoints = 30,dripOffset = 0.0258,rippleDuration = 4.6,rippleAmount = '+=8',startValX = 250,startValY = 400,colorArray = ['#E6098B', '#FFBE0B', '#FB5607', '#8338EC', '#3A86FF', '#51E5FF', '#04A777', '#F75C03', '#F71735'],allBubbles = selectAll('#bubbleGroup rect')gsap.set(mainSVG, {visibility: 'visible'
})
gsap.set('.darkLiquid', {scaleX: -1,transformOrigin: '50% 50%'
})
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 ) ? 600 : 200 );startValX += ( liquidWidth / (numPoints-2) );    pointValueYArray.push( (i < numPoints - 2) ? startValY : 800 )
}gsap.set(pointArray, {x: gsap.utils.wrap(pointValueXArray),y: gsap.utils.wrap(pointValueYArray)
})gsap.set('#level', {transformOrigin: '50% 100%'
})
gsap.set('#bubbleGroup rect, #droplet', {transformOrigin: '50% 50%'
})
gsap.fromTo(allBubbles, {x: 'random(0, 200)',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: 430,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, 5),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(-30, -60, 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);
}makDrip()

Low Poly Experiment相关推荐

Blender从头到尾创建低多边形角色学习教程 Low Poly Characters – Blender Bitesize Course
从头到尾创建低多边形角色. 你会学到: Blender界面的基础. 基本建模技术. 如何遵循字符引用? 如何创造和塑造自己的角色(不同风格.发型和服装). 纹理字符. 索具和动画介绍(用于你的游戏引擎 ...
美术干货：用Blender绘制low poly风格的游戏角色
"low poly"(低面建模)因其独特的美术风格和相对不错的性价比成为一些游戏的首选,不过作为一种普及范围不算很广的建模手法,其具体的操作流程可能还不为人熟知. 笔者找到了一份用 ...
CSS3 低多边形（Low Poly）设计及开发实例 - 简单的字母
Low Poly是计算机主流设计风格的一种. 当前主流设计风格包括: 1.拟物(Skeuomorph) 2.平面化(Flat Design) 3.长阴影(Long Shadow) 4.响应式(Resp ...
Unity Asset Store精品Low Poly风格素材资源合集
本文介绍Unity Asset Store里优质的Low Poly风格素材,会从人物.环境.动物和通用四个方面的素材分别进行介绍. 一:人物素材本部分包含幻想类.城市类和Q版人物素材三个子类别. O ...
Low Poly Epic City的脚本研究日志(2)（2022.3.1）
文章目录前言今天研究的内容: CarBehavior TrafficLightControl 接下来的计划: 前言研究一下Low Poly Epic City的CarBehavior和Traff ...
li-poly_GitHub - kinglisky/lowpoly: low poly图片风格化工具
lowpoly风格图片生成器 new:用ArrayBuffer优化了一点,修复加载默认图片的bug,增加一个下载功能. 嘛,前段时间在找素材的时候,突然间发现一种叫做low poly(低多边形)风格的 ...
php 画low poly,五分钟教你明白高大上LOW-POLY风格图片生成术
有没有看到看到效果高大上的图片,觉得离自己很远,望而生畏?今天给大家介绍一种名为LOW-POLY的风格图片,让所有人都一起来LOW-POLY一把,高大上一把! 感谢新浪微博朋友@创意农民授权分享.本 ...
php 画low poly,用canvas 实现个图片三角化（LOW POLY）效果_javascript技巧
之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下. 我是没怎么用过threejs,所以就直接用canvas的2 ...
Unity创建Low Poly地形（Unity Blender）
成果首先创建一个地形再添加一个插件,代码在这Terrain2Obj 是从一个Youtuber那拷贝过来的,然后导出导入Blender 添加Modify的displace,然后点New,再添加Cl ...

Low Poly Experiment

Low Poly Experiment

示例

HTML

CSS

Low Poly Experiment相关推荐

最新文章

热门文章