首页 > 编程语言 >HTML、CSS 和 JavaScript 格式的 3D 玻璃天气图标

HTML、CSS 和 JavaScript 格式的 3D 玻璃天气图标

时间:2022-09-05 00:22:44浏览次数:134  
标签:0.2 100% JavaScript 阴影 2rem HTML rem 0px CSS

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

相关文章

  • Web 中的可访问性 (CSS)
    PhotobyKOBU代理商on不飞溅Web中的可访问性(CSS)这是我关于Web上的可访问性的第二篇文章。在里面上一篇文章,我在HTML中谈到了Web上的可访问性,而这一次,......
  • X-CTF(REVERSE高级) reverse_html
    查壳需要CHM解包器(CHMUnpacker),解压出三个文件 doc.hhc和doc1.htm没发现什么,doc.html发现了一段powershell代码,JavaScript中点击触发,结合标题CheckforWindowsupdate......
  • JavaScript 逻辑且(&&)和逻辑或(||)的妙用
    简单运用逻辑且(&&):左右必须都满足true才返回true;逻辑或(||):左右其中一个满足true就返回true。这样简单的运用是整体返回一个布尔值,适合在语句判断的时候用:letus......
  • CSS JS 规范+数据类型
    1、CSSJS规范+数据类型window.onload=function(){​//varstr='abc';​//varnum=123;​//varbool=true;​//varund=undefined;......
  • 使用CSS3快速实现毛玻璃效果
    使用CSS3实现毛玻璃效果并没有想象中那么难,我们只需要了解一个属性:backdrop-filter:blur(5px);在使用该属性之前我们先要区分backdrop-filter与filter的区别。filter......
  • 简单的Css动画---攀爬效果
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"c......
  • CSS常用属性
    ​ /**作者:呆萌老师*☑csdn认证讲师*☑51cto高级讲师*☑腾讯课堂认证讲师*☑网易云课堂认证讲师*☑华为开发者学堂认证讲师*☑爱奇艺千人名师计划成员*在这里......
  • JS根据id将光标定位到html的元素中
    1定位到input元素中varelement=document.getElementById(ys_id);//ys_id为传入的html元素的idelement.focus();ViewCode2 定位到div元素中window.location......
  • 前端学习之------浏览器兼容(CSS)
    浏览器兼容指的是:由于各浏览器使用了不同的内核,使得网页在各种浏览器上的显示效果不一致,做好浏览器兼容,才能够让网站在不同浏览器上正常显示CSS方面:1、不同浏览器的标签......
  • DOM css js 执行顺序
    DOM、CSS、JS的执行顺序js放在head中会立即执行,会阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控。2.js的执行依赖前......