Jump to content
  • Hello visitors, welcome to the Hacker World Forum!

    Red Team 1949  (formerly CHT Attack and Defense Team) In this rapidly changing Internet era, we maintain our original intention and create the best community to jointly exchange network technologies. You can obtain hacker attack and defense skills and knowledge in the forum, or you can join our Telegram communication group to discuss and communicate in real time. All kinds of advertisements are prohibited in the forum. Please register as a registered user to check our usage and privacy policy. Thank you for your cooperation.

    TheHackerWorld Official

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

 Share


KaiWn

Recommended Posts

  • 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);  
     }  
     }  
     身体{  
     显示:网格;  
     网格模板列:重复(21fr);  
     网格模板行:重复(21fr);  
     网格列间隙: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 rgba255,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 2rem1rem 7rem4rem 8rem,-5rem 8rem,-2rem 4rem0rem 11rem4rem 5rem,-2rem 8rem4rem 3rem 0 -0.1rem0rem 5rem 0 -0.1rem,-4rem 5rem 0 - 0.1rem,-2rem 10rem 0 -0.1rem,-1rem 3rem 0 -0.2rem2rem 5rem 0 -0.2rem,-2rem 11rem 0 -0.2rem2rem 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 2rem1rem 7rem4rem 8rem,-5rem 8rem,-2rem 4rem0rem 11rem4rem 5rem,-2rem 8rem4rem 3rem 0 -0.1rem0rem 5rem 0 -0.1rem,-4rem 5rem 0 - 0.1rem,-2rem 10rem 0 -0.1rem,-1rem 3rem 0 -0.2rem2rem 5rem 0 -0.2rem,-2rem 11rem 0 -0.2rem2rem 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  
     背景:RGB255 255 255 / 45%);  
     .weather--snow &{  
     背景:RGB100 130 197 / 45%);  
     }  
     .weather--雷声 &{  
     背景:RGB116 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 玻璃天气图标

    现在下载

Link to post
Link to comment
Share on other sites

 Share

discussion group

discussion group

    You don't have permission to chat.
    • Recently Browsing   0 members

      • No registered users viewing this page.
    ×
    ×
    • Create New...