HTML、CSS 和 JavaScript 格式的 3D 玻璃天气图标
作者：互联网
HTML、CSS 和 JavaScript 格式的 3D 玻璃天气图标
3D玻璃天气图标免费下载 **** 在 HTML、CSS 和 JavaScript 中
HTML：
<div class="weather weather--sun">
<div class="icon">
<div class="icon__sun">
<div class="icon__sun-lights">
<div class="icon__sun-light"></div>
<div class="icon__sun-light"></div>
<div class="icon__sun-light"></div>
<div class="icon__sun-light"></div>
<div class="icon__sun-light"></div>
<div class="icon__sun-light"></div>
<div class="icon__sun-light"></div>
<div class="icon__sun-light"></div>
</div>
</div>
<div class="icon__cloud">
<div class="icon__cloud-reflect icon__cloud-reflect--1">
</div>
<div class="icon__cloud-reflect icon__cloud-reflect--2">
</div>
<svg class="icon__cloud-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewbox="0 0 200 500" width="50%" ><clipPath id="cloud-path"><path d=" M 146.5 293 C 65.644 293 0 227.356 0 146.5 C 0 65.644 65.644 0 146.5 0 C 205.641 0 256.643 35.12 279.772 85.624 C 293.416 79.445 308.559 76 324.5 76 C 384.383 76 433 124.617 433 184.5 C 433 244.383 384.383 293 324.5 293 L 324.5 293 C 324.5 293 324.5 293 324.5 293 L 146.5 293 Z " fill="currentColor"/></clipPath></svg>
</div>
<div class="icon__cloud-shadow">
</div>
</div>
</div>
<div class="weather weather--thunder">
<div class="icon">
<div class="icon__rain">
<div class="icon__rain-drops"></div>
</div>
<div class="icon__thunder">
</div>
<div class="icon__cloud">
<div class="icon__cloud-reflect icon__cloud-reflect--1">
</div>
<div class="icon__cloud-reflect icon__cloud-reflect--2">
</div>
<svg class="icon__cloud-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewbox="0 0 200 500" width="50%" ><clipPath id="cloud-path"><path d=" M 146.5 293 C 65.644 293 0 227.356 0 146.5 C 0 65.644 65.644 0 146.5 0 C 205.641 0 256.643 35.12 279.772 85.624 C 293.416 79.445 308.559 76 324.5 76 C 384.383 76 433 124.617 433 184.5 C 433 244.383 384.383 293 324.5 293 L 324.5 293 C 324.5 293 324.5 293 324.5 293 L 146.5 293 Z " fill="currentColor"/></clipPath></svg>
</div>
<div class="icon__cloud-shadow">
</div>
</div>
</div>
<div class="weather weather--snow">
<div class="icon">
<div class="icon__snow">
<div class="icon__snow-flakes"></div>
</div>
<div class="icon__cloud">
<div class="icon__cloud-reflect icon__cloud-reflect--1">
</div>
<div class="icon__cloud-reflect icon__cloud-reflect--2">
</div>
<svg class="icon__cloud-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewbox="0 0 200 500" width="50%" ><clipPath id="cloud-path"><path d=" M 146.5 293 C 65.644 293 0 227.356 0 146.5 C 0 65.644 65.644 0 146.5 0 C 205.641 0 256.643 35.12 279.772 85.624 C 293.416 79.445 308.559 76 324.5 76 C 384.383 76 433 124.617 433 184.5 C 433 244.383 384.383 293 324.5 293 L 324.5 293 C 324.5 293 324.5 293 324.5 293 L 146.5 293 Z " fill="currentColor"/></clipPath></svg>
</div>
<div class="icon__cloud-shadow">
</div>
</div>
</div>
<div class="weather weather--rainbow">
<div class="icon">
<div class="icon__rainbow">
<div class="icon__rainbow-arc"></div>
<div class="icon__rainbow-arc"></div>
<div class="icon__rainbow-arc"></div>
<div class="icon__rainbow-arc"></div>
<div class="icon__rainbow-arc"></div>
<div class="icon__rainbow-arc"></div>
<div class="icon__rainbow-arc"></div>
</div>
<div class="icon__cloud">
<div class="icon__cloud-reflect icon__cloud-reflect--1">
</div>
<div class="icon__cloud-reflect icon__cloud-reflect--2">
</div>
<svg class="icon__cloud-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewbox="0 0 200 500" width="50%" ><clipPath id="cloud-path"><path d=" M 146.5 293 C 65.644 293 0 227.356 0 146.5 C 0 65.644 65.644 0 146.5 0 C 205.641 0 256.643 35.12 279.772 85.624 C 293.416 79.445 308.559 76 324.5 76 C 384.383 76 433 124.617 433 184.5 C 433 244.383 384.383 293 324.5 293 L 324.5 293 C 324.5 293 324.5 293 324.5 293 L 146.5 293 Z " fill="currentColor"/></clipPath></svg>
</div>
<div class="icon__cloud-shadow">
</div>
</div>
</div>
CSS：
html，正文{
高度：100%；
边距：0；
溢出：隐藏；
}
@keyframes 旋转 {
100% {
变换：旋转（1转）；
}
}
@keyframes 雪{
0% {
变换： translateY(-12rem) 旋转(45deg);
}
50%, 100% {
变换： translateY(12rem) 旋转(45deg);
}
} @keyframes 雷声{
0%,25%,75%,100% {
过滤器： 阴影（0px -1px 0px #cfb8e5） 阴影（0px 0px 0px #9a4ee7） 阴影（0px 0px 0px rgba（#9a4ee7,30%）） 阴影（-2px -2px 1px #3c3762 ) 投影(4px 1px 1px #3c3762)
}
50% {
滤镜：阴影（0px -1px 0px #cfb8e5）阴影（0px 0px 3px #9a4ee7）阴影（0px 0px 30px rgba（#9a4ee7,30%））阴影（-2px -2px 1px #3c3762 ) 投影(4px 1px 1px #3c3762);
}
} @keyframes 浮动 {
0%, 100%{
变换：翻译（0）
}
50%{
变换：平移（1rem）
}
} @keyframes 脉冲 {
0%, 100%{
变换：比例（1）
}
50%{
变换：比例（0.9）
}
} @keyframes 霓虹灯{
0%,40%,60%, 100%{
过滤器：亮度（1）；
}
50%{
过滤器：亮度（0.9）；
}
}
身体{
显示：网格；
网格模板列：重复（2、1fr）；
网格模板行：重复（2、1fr）；
网格列间隙：0px；
网格行间隙：0px；
}
。天气{
显示：弯曲；
对齐项目：中心；
证明内容：中心；
溢出：隐藏；
＆ - 太阳{
背景：线性渐变（45度，#628aa4，#77a1b8）；
}
＆ - 雷{
背景：线性渐变（45度，#172a44，#1f3654）；
}
＆ - 雪{
背景：线性渐变（45度，#5e6270，#82889c）；
}
＆ - 彩虹{
背景：线性渐变（45度，#1d5476，#296b8f）；
}
}
。图标{
位置：相对；
宽度：18rem；
高度：13rem；
变换：比例（0.8）；
＆__彩虹{
位置：绝对；
右：0rem；
顶部：-2rem；
高度：14rem；
宽度：14rem；
过滤器：阴影（0px 0px 10px rgba（255,255,255,0.2））；
动画：脉冲4s无限；
＆-弧{
位置：绝对；
插图：0；
边界半径：50%；
红色;
盒子阴影：插图 2.5rem 2rem 0.3rem -3rem #000000bf，插图 0 0 0.3rem 0.25rem #ffffffb8，插图 0 0 0.2rem 0.4rem #000000a6，插图 0 0 0 0.6rem；
动画：霓虹灯4s无限；
&:nth-child(1){
颜色：#ff1f5d；
}
&:nth-child(2){
颜色：#eb8125；
插图：0.9rem；
动画延迟：0.2s；
}
&:nth-child(3){
颜色：#fbff0e;
插图：1.8rem；
动画延迟：0.4s；
}
&:nth-child(4){
颜色：#a8ef3c;
插图：2.7rem；
动画延迟：0.6s；
}
&:nth-child(5){
颜色：#59d9ff;
插图：3.6rem；
动画延迟：0.8s；
}
&:nth-child(6){
颜色：#6685f5;
插图：4.5rem；
动画延迟：1s；
}
&:nth-child(7){
颜色：#6a38e1;
插图：5.4rem；
动画延迟：1.2s；
}
}
}
＆__雪{
位置：绝对；
顶部：12.8rem；
左：0；
宽度：100%；
高度：10rem；
溢出：隐藏；
&-薄片{
位置：绝对；
顶部：0；
左：13rem；
高度：0.8rem；
宽度：0.8rem；
背景：#fff;
动画：雪3s线性无限；
变换： translateY(-12rem) 旋转(45deg);
不透明度：0.5；
颜色：#fff;
盒子阴影：1rem 2rem，1rem 7rem，4rem 8rem，-5rem 8rem，-2rem 4rem，0rem 11rem，4rem 5rem，-2rem 8rem，4rem 3rem 0 -0.1rem，0rem 5rem 0 -0.1rem，-4rem 5rem 0 - 0.1rem，-2rem 10rem 0 -0.1rem，-1rem 3rem 0 -0.2rem，2rem 5rem 0 -0.2rem，-2rem 11rem 0 -0.2rem，2rem 9rem 0 -0.2rem，-4rem 3rem 0 -0.2rem；
}
}
＆__雨{
位置：绝对；
顶部：12.8rem；
左：0；
宽度：100%；
高度：10rem；
溢出：隐藏；
&-滴{
位置：绝对；
顶部：0；
左：13rem；
高度：0.6rem；
宽度：0.6rem；
背景：#7a98e9；
动画：雪3s线性无限；
动画延迟：1s；
变换： translateY(-12rem) 旋转(45deg);
不透明度：1；
颜色：#7a98e9；
盒子阴影：1rem 2rem，1rem 7rem，4rem 8rem，-5rem 8rem，-2rem 4rem，0rem 11rem，4rem 5rem，-2rem 8rem，4rem 3rem 0 -0.1rem，0rem 5rem 0 -0.1rem，-4rem 5rem 0 - 0.1rem，-2rem 10rem 0 -0.1rem，-1rem 3rem 0 -0.2rem，2rem 5rem 0 -0.2rem，-2rem 11rem 0 -0.2rem，2rem 9rem 0 -0.2rem，-4rem 3rem 0 -0.2rem；
边界半径：0 1rem 1rem；
}
}
＆__太阳{
位置：绝对；
顶部：1rem；
右：3.5rem；
高度：5rem；
宽度：5rem；
背景：线性渐变（45度，#f09559 40%，#f0ca43）；
边界半径：50%；
过滤器：阴影（0 0 10px rgba（#efda90,0.4））阴影（0 0 30px rgba（#f0ca43,0.4））；
＆-灯{
位置：绝对；
插图：0；
动画：旋转6s线性无限；
}
＆-光{
位置：绝对；
顶部：-2.75rem；
左：50%；
左边距：-0.45rem；
边界半径：1rem；
宽度：0.9rem；
高度：2.5rem；
背景：线性渐变（45度，#f0b343，#f0ca43）；
变换原点：50% 5.25rem；
@for $c 从 2 到 9 {
&:nth-child(#{$c}){
变换：旋转（（$c - 1）* 360deg/8）；
}
}
}
}
＆__雷{
位置：绝对；
顶部：10rem；
左：50%；
左边距：-2.4rem；
宽度：4.8rem；
身高：8.6rem；
过滤器： 阴影（0px -1px 0px #cfb8e5） 阴影（0px 0px 0px #9a4ee7） 阴影（-2px -2px 1px #3c3762） 阴影（4px 1px 1px #3c3762）；
动画：雷霆3s无限，浮空3s无限；
＆：前，
＆：后{
内容： '';
位置：绝对；
顶部：0；
左：0；
背景：#645d95；
高度：5rem；
宽度：3rem；
边界半径：0.4rem；
盒子阴影：插图 -0.2rem -0.4rem 0.2rem #3c3762，插图 -0.1rem -0.1rem 0.4rem #fff;
剪辑路径：多边形（100% 100%，0% 100%，100% 0）；
}
＆：后{
顶部：自动；
底部：0；
左：自动；
对：0；
剪辑路径：多边形（0% 100%、100% 0%、45% 0%、0% 26%）；
盒子阴影：插入0.2rem 0.3rem 0.2rem #3c3762，插入0.1rem 0.2rem 0.4rem #fff；
}
}
＆__云{
位置：绝对；
左：0；
顶部：1rem；
宽度：18rem；
高度：12rem；
背景：RGB（255 255 255 / 45%）；
.weather--snow &{
背景：RGB（100 130 197 / 45%）；
}
.weather--雷声 &{
背景：RGB（116 116 116 / 45%）；
}
.weather--彩虹 & {
背景：#4a6676；
}
不透明度：1；
背景滤镜：模糊（8px）；
剪辑路径：url（#cloud-path）；
盒子阴影：插入0rem -1.3rem 0.25rem -1rem #fff，插入0rem 0rem 5rem 0rem #ffffff4d；
＆-反映{
高度：12rem；
宽度：11.9rem；
边界半径：50%；
盒子阴影：插图 0rem -1.1rem 0.25rem -1rem #fff，插图 0.45rem 0rem 0.25rem -0.25rem #fff，插图 -0.45rem 0.5rem 0.25rem -0.45em #fff，插图 0.25rem 0.25rem 0.5rem 0rem RGB(0 0 0 / 30%);
剪辑路径：多边形（0 0, 100% 0%, 100% 33%, 50% 30%, 50% 100%, 0% 100%）； &--2{
位置：绝对；
宽度：8.7rem；
高度：8.7rem；
底部：0.1rem；
右：0.5rem；
剪辑路径：多边形（0 0, 100% 0%, 100% 100%, 50% 100%, 29% 0%）；
}
}
＆-阴影{
位置：绝对；
左：30rem；
顶部：-30rem；
宽度：18rem；
高度：9rem；
边界半径：50%；
盒子阴影：-36rem 38rem 7rem #00000054；
z 指数：-1；
}
&-svg{
剪辑路径{
变换：比例（0.65）；
}
}
}
}
JavaScript：
// 灵感来自
// 3D 图标 | 1 |天气
// https://dribbble.com/shots/18045563-3D-Icons-1-Weather?utm_source=ownedsocial
// @george_finnbog
HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com
完毕！享受 3D 玻璃天气图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/14328/13040500
标签：0.2,100%,JavaScript,阴影,2rem,HTML,rem,0px,CSS 来源： https://www.cnblogs.com/amboke/p/16656638.html