前端必备CSS+SVG3D天气玻璃质感图标，让你的网站更加专业！.rar资源-CSDN文库

共2个文件

html：1个

css：1个

需积分: 5 18 浏览量 2023-04-26 10:58:54 上传评论收藏 3KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

前端必备 CSS+SVG 3D天气玻璃质感图标，让你的网站更加专业！.rar （2个子文件）

前端必备 CSS+SVG 3D天气玻璃质感图标，让你的网站更加专业！

css

style.css 9KB

output.html 5KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D glass weather icons</title> <link rel="stylesheet" href="css/style.css"> </head> <body>  <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"></path> </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"></path> </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"></path> </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"></path> </clipPath> </svg> </div> <div class="icon__cloud-shadow"> </div> </div> </div>  </body> </html>

评论收藏

内容反馈