js+css实现天气预报卡片折叠背景模糊效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现天气预报卡片折叠背景模糊效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,90%); --fg: hsl(var(--hue),90%,10%); --primary: hsl(var(--hue),90%,50%); --anim-dur: 0.4s; --trans-dur: 0.3s; --ease-in-out: cubic-bezier(0.67,0,0.33,1); --ease-out: cubic-bezier(0.33,1,0.67,1); font-size: calc(14px + (30 - 14) * (100vw - 280px) / (3840 - 280)); } body, button { color: var(--fg); font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; } body { background: url("//repo.bfw.wiki/bfwrepo/image/6685c47d30e1a.png") center/cover, var(--bg); height: 100vh; } main { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.75em; padding: 1.5em 0; width: 100%; height: min-content; min-height: 100%; } .widget { background-color: hsla(var(--hue), 90%, 10%, 0.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 1.75em; color: white; flex-shrink: 0; position: relative; width: 18em; min-height: 4.5em; } .widget__btn, .widget__details { padding: 1em; padding-inline-start: 1.25em; } .widget__btn { background-color: hsla(var(--hue), 90%, 10%, 0); border-radius: 1.75em; box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 90%, 0) inset; color: currentColor; cursor: pointer; display: flex; align-items: center; outline: transparent; position: relative; width: 100%; transition: background-color var(--trans-dur) var(--ease-in-out), box-shadow calc(var(--trans-dur) / 2) var(--ease-in-out); -webkit-tap-highlight-color: transparent; } .widget__btn:focus-visible { box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 90%, 1) inset; } .widget__btn:hover { background-color: hsla(var(--hue), 90%, 10%, 0.1); } .widget__btn::marker, .widget__btn::-webkit-details-marker { display: none; } .widget__bull { margin: 0 0.5em; } .widget__detail { display: block; } .widget__detail-icon { display: block; width: 1em; height: 1em; } .widget__detail-name { font-size: 0.75em; opacity: 0.8; } .widget__detail-value { display: flex; align-items: center; gap: 0.5em; } .widget__details { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em; padding-inline-end: 6em; position: relative; } .widget__temp { font-size: 3em; line-height: 1; } .widget__temp sup { display: inline-block; font-size: 0.833rem; line-height: 1; transform: translateY(-66.7%); } [dir=rtl] .widget__temp { right: auto; left: 1rem; } .widget__top, .widget__weather { display: flex; } .widget__top { flex: 1; flex-direction: column; margin-inline-end: 0.5em; } .widget__weather { font-size: 0.75em; line-height: 1; opacity: 0.8; text-transform: capitalize; } .widget__weather-symbol { display: block; margin-bottom: 1em; pointer-events: none; position: absolute; right: 1rem; bottom: 100%; width: 3em; height: 3em; } [dir=rtl] .widget__weather-symbol { right: auto; left: 1rem; } .widget[open] .widget__btn { border-radius: 1.75em 1.75em 0 0; } .widget.collapsing, .widget.expanding { overflow: hidden; } .widget.collapsing .widget__temp { animation: widget-slide-up var(--anim-dur) var(--ease-out); } .widget.collapsing .widget__detail, .widget.collapsing .widget__weather-symbol { animation: widget-fade-out var(--anim-dur) var(--ease-out); } .widget[open] .widget__temp { transform: translateY(9rem); } .widget.expanding .widget__temp { animation: widget-slide-down var(--anim-dur) var(--ease-out); } .widget.expanding .widget__detail, .widget.expanding .widget__weather-symbol { animation: widget-fade-slide-in var(--anim-dur) var(--ease-out); } .widget.expanding .widget__detail:nth-of-type(2) { animation-delay: calc(var(--anim-dur) * 0.1); } .widget.expanding .widget__detail:nth-of-type(3) { animation-delay: calc(var(--anim-dur) * 0.2); } .widget.expanding .widget__detail:nth-of-type(4) { animation-delay: calc(var(--anim-dur) * 0.3); } /* Animations */ @keyframes widget-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes widget-fade-slide-in { from, 50% { opacity: 0; transform: translateY(50%); } to { opacity: 1; transform: translateY(0); } } @keyframes widget-slide-down { from { transform: translateY(0); } to { transform: translateY(9rem); } } @keyframes widget-slide-up { from { transform: translateY(9rem); } to { transform: translateY(0); } } </style> </head> <body translate="no"> <svg display="none"> <symbol id="wind" viewBox="0 0 16 16"> <g fill="none" stroke="hsl(0,0%,100%)" stroke-linecap="round" stroke-width="2"> <polyline points="2 3,10 3" /> <polyline points="6 8,14 8" /> <polyline points="2 13,10 13" /> </g> </symbol> <symbol id="visibility" viewBox="0 0 16 16"> <g fill="none" stroke="hsl(0,0%,100%)" stroke-width="2"> <ellipse cx="8" cy="8" rx="7" ry="4" /> <circle cx="8" cy="8" r="2" /> </g> </symbol> <symbol id="air-quality" viewBox="0 0 16 16"> <g fill="hsl(0,0%,100%)"> <circle cx="4" cy="11" r="2" /> <circle cx="8" cy="5" r="2" /> <circle cx="12" cy="11" r="2" /> </g> </symbol> <symbol id="humidity" viewBox="0 0 16 16"> <g fill="none" stroke="hsl(0,0%,100%)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M 1 3 C 6 7, 10 0, 15 4" transform="translate(0,-1)" /> <path d="M 1 3 C 6 7, 10 0, 15 4" transform="translate(0,3)" /> <path d="M 1 3 C 3 5, 6 4, 8 3" transform="translate(0,7)" /> <path d="M 4 1 C -3 8, 11 8, 4 1" transform="translate(8,8)" /> </g> </symbol> <symbol id="sunny" viewBox="0 0 48 48"> <g stroke="hsl(53,90%,50%)" stroke-linecap="round" stroke-width="4"> <polyline points="24 24,24 21" transform="rotate(0,24,24) translate(0,-18)" /> <polyline points="24 24,24 21" transform="rotate(45,24,24) translate(0,-18)" /> <polyline points="24 24,24 21" transform="rotate(90,24,24) translate(0,-18)" /> <polyline points="24 24,24 21" transform="rotate(135,24,24) translate(0,-18)" /> <polyline points="24 24,24 21" transform="rotate(180,24,24) translate(0,-18)" /> <polyline points="24 24,24 21" transform="rotate(225,24,24) translate(0,-18)" /> <polyline points="24 24,24 21" transform="rotate(270,24,24) translate(0,-18)" /> <polyline points="24 24,24 21" transform="rotate(315,24,24) translate(0,-18)" /> </g> <circle cx="24" cy="24" r="12" fill="hsl(53,90%,50%)" /> </symbol> <symbol id="cloudy" viewBox="0 0 48 48"> <g fill="hsl(0,0%,100%)" transform="translate(0,6)"> <rect x="0" y="12" width="48" height="20" rx="10" ry="10" /> <circle cx="28" cy="14" r="14" /> <circle cx="14" cy="10" r="6" /> </g> </symbol> </svg> <main> <details id="widget1" class="widget" open> <summary class="widget__btn"> <span class="widget__top"> <span data-stat="city">-</span> <small class="widget__weather"> <span data-stat="kind">-</span> <span class="widget__bull">•</span> <time data-stat="time">-</time> </small> </span> <div class="widget__temp"> <span data-stat="temperature">-</span><sup>°<span data-stat="temperature_scale">-</span></sup> </div> </summary> <div class="widget__details"> <svg class="widget__weather-symbol" width="16px" height="16px" aria-hidden="true"> <use href="#" data-symbol /> </svg> <span class="widget__detail"> <small class="widget__detail-name">Wind</small> <br> <span class="widget__detail-value"> <svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true"> <use href="#wind" /> </svg> <span data-stat="wind">-</span> </span> </span> <span class="widget__detail"> <small class="widget__detail-name">Visibility</small> <br> <span class="widget__detail-value"> <svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true"> <use href="#visibility" /> </svg> <span data-stat="visibility">-</span> </span> </span> <span class="widget__detail"> <small class="widget__detail-name">Air Quality</small> <br> <span class="widget__detail-value"> <svg class="widget__detail-icon" width="16px" height="16px" aria-hidden="true"> <use href="#air-quality" /> </svg> <span data-stat="air_quality">-</span> </span> </span> <span class="widget__detail"> <small class="widget__detail-name">Humidity</small> <br> <span class="widget__detail-value"> <svg class="widget__detail-icon" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0