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 From: https://www.cnblogs.com/amboke/p/16656638.html