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

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

时间：2022-09-03 23:33:24浏览次数：83  
标签：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/11860/26570323

标签：0.2,100%,JavaScript,阴影,2rem,HTML,rem,0px,CSS
From： https://www.cnblogs.com/amboke/p/16653976.html

相关文章

  • Web 中的可访问性 (CSS)
    PhotobyKOBU代理商on不飞溅Web中的可访问性(CSS)这是我关于Web上的可访问性的第二篇文章。在里面上一篇文章，我在HTML中谈到了Web上的可访问性，而这一次，......
  • 适合初学者的 7 个有趣的 CSS 项目创意和主题 [2022]
    适合初学者的7个有趣的CSS项目创意和主题[2022]任何想成为网页设计师的人都必须了解CSS的重要性。您的网站可以使用CSS进行创造性的设计和布局，使其具有独特的外......
  • CSS中常用属性（三）
    ​        /**作者：呆萌老师*☑csdn认证讲师*☑51cto高级讲师*☑腾讯课堂认证讲师*☑网易云课堂认证讲师*☑华为开发者学堂认证讲师*☑爱奇艺千人名师......
  • 开学的JavaScript第一次测试
    这次的课堂测试我的成绩并不理想，经过一些时间的反思，我总结了一些不周到的原因，首先是我在做老师的给定的程序是没有仔细阅读，没有看到一些具体的要求，导致多米诺古效应，所以进......
  • CSS旋转正方体
     CSS实现一个旋转的正方体,鼠标放上去会自动解体.比较普通的实现,留个记录.(代码里的注释方式写错了)<!doctypehtml><htmllang="en"><head><metacharset="UT......
  • JavaScript 非运算(!)之双感叹号的使用技巧
    我的另一篇博文中提到JavaScript有哪些是假值，哪些是真值。对于null、undefined、""，等一些假值，JavaScript直接视为false。我有一个需求，判断从浏览器中获取的Cookie是......
  • 如何在 JavaScript 中从日期中减去秒数
    如何在JavaScript中从日期中减去秒数让我们学习如何轻松地从a中减去任意秒数日期JavaScript中的对象。1.日期setSeconds()和getSeconds()方法从a中减去......
  • 每个开发人员都应该避免的常见 CSS 错误
    每个开发人员都应该避免的常见CSS错误1️⃣使用像素Px将您的设计锁定为所有屏幕的固定尺寸。您应始终尽可能使用相对测量值，例如em、rem、%等。2️⃣使用一个CSS文......
  • 使用 CSS 悬停菜单 - 分步指南
    使用CSS悬停菜单-分步指南HTML对于HTML，我们有一个类为“menu_item”的div元素，它代表一个菜单项。在“menu_item”中，第一个元素是一个带有标题的span元素。现......
  • 使用JavaScript对HTML实体字符进行转义与反转义处理
    原文地址：https://www.yerenwz.com/6567.html在这篇《短代码与代码高亮功能结合，终于可以随意的来回切换可视化/文本模式进行编辑代码了》文章中有提到在折腾WordPress自......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99