css+svg实现炫酷天气预报盒子卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:css+svg实现炫酷天气预报盒子卡片效果代码,鼠标悬浮显示一周天气。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400,500,600,700'> <style> @charset "UTF-8"; * { position: relative; font-family: "Hind Vadodara", sans-serif, "微軟正黑體"; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: #222; } label { cursor: pointer; } .daybox { width: 50%; max-width: 400px; background: #f3f3f3; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7); border-radius: 12px; cursor: pointer; } .daybox:hover .bottom { height: 100px; } .daybox:hover .bottom .weekday { opacity: 1; top: 0px; } .textarea { color: #f3f3f3; } .snow { width: 4px; height: 4px; border-radius: 100%; background: #f3f3f3; position: absolute; left: 42px; bottom: 10px; animation: raindrop 2.5s infinite linear; } .snow2 { left: 30px; bottom: 15px; animation-delay: -1.2s; } .snow3 { left: 75px; bottom: 11px; animation-delay: -0.4s; } .snow4 { left: 60px; bottom: 14px; animation-delay: -0.2s; animation: raindrop 3.5s linear infinite; } @keyframes raindrop { 0% { transform: translateY(0px); } 100% { transform: translateX(-10px) translateY(50px); opacity: 0; } } @keyframes daylight { 0% { background-position: 100% 30%; } 50% { background-position: 100% 100%; } 100% { background-position: 100% 30%; } } .top { background: linear-gradient(20deg, #19283D, #1D678F); background-size: 100% 300%; height: 330px; animation: daylight 30s infinite; border-radius: 10px 10px 0px 0px; } .top .cloud { width: 100px; height: 36px; position: absolute; border-radius: 20px; background: #f3f3f3; left: 220px; bottom: 60px; animation: clouddrift 4s infinite linear; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.7); } .top .cloud:before, .top .cloud:after { content: ""; display: block; border-radius: 100%; background: #f3f3f3; width: 50px; height: 50px; position: absolute; } .top .cloud:before { left: 12px; top: -30px; } .top .cloud:after { left: 36px; top: -19px; } @keyframes clouddrift { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(5px) translateY(10px); } 100% { transform: translateX(0px) translateY(0px); } } .top .moon { width: 50px; height: 50px; border-radius: 100%; position: absolute; top: 90px; left: 50px; box-shadow: 37px -37px 0 0 #FFD633; animation: moonmove 30s infinite linear; } @keyframes moonmove { 0% { box-shadow: 37px -37px 0 0 #FFD633; transform: translateX(-37px) translateY(36px); } 50% { box-shadow: -37px 37px 0 0 #FFD633; transform: translateX(37px) translateY(-37px); } 100% { box-shadow: 37px -37px 0 0 #FFD633; transform: translateX(-37px) translateY(36px); } } .bottom { height: 10px; overflow: hidden; display: flex; justify-content: center; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7); transition-duration: 0.75s; } .bottom .weekday { width: calc(100% / 7 - 5px); display: inline-block; text-align: center; opacity: 0; top: 20px; transition: 0.7s; } .bottom .weekday h3 { font-size: 8px; color: rgba(34, 34, 34, 0.8); font-weight: 400; letter-spacing: 1px; } .bottom SVG { width: 100%; max-width: 40px; height: 40px; } .bottom SVG .sun { stroke-width: 20px; stroke: #FFD633; stroke-dasharray: 5px; fill: #FFD633; } .bottom SVG .rain { stroke: #4DACFF; stroke-width: 6px; animation: raindrop 1.5s infinite; } .bottom SVG .rain2 { stroke: #4DACFF; stroke-width: 6px; animation: raindrop 1.8s infinite; animation-delay: 0.5s; } .bottom SVG .cloud { animation: clouddrift 4s infinite linear; fill: #ccc; } #snowicon .m { stroke: #4DACFF; stroke-width: 3px; } #snowicon .s { stroke: #4DACFF; stroke-width: 2.5px; fill: none; } .textarea { display: inline-block; position: absolute; bottom: 25px; left: 25px; } .textarea .temperature { font-size: 75px; line-height: 80px; } .textarea .infos { font-size: 13px; opacity: 0.5; } .moon, .cloud { transition: 1s; } .temsvg { width: 100%; fill: #f3f3f3; } .temsvg circle { opacity: 0.2; transition: 1s; } .temsvg polyline { fill: none; opacity: 0.2; stroke-width: 1px; stroke: #f3f3f3; transition: 1s 0.5s; } .temsvg text { font-size: 10px; transform: translateX(-10px) translateY(20px); opacity: 0; transition: 1s 1s; } #switch_night { display: none; } #switch_night:checked + .top .moon, #switch_night:checked + .top .cloud { opacity: 0.2; } #switch_night:checked + .top .temsvg circle, #switch_night:checked + .top .temsvg polyline, #switch_night:checked + .top .temsvg text { opacity: 1; } .weekday:nth-child(1) { transition-delay: 0.1s; } .weekday:nth-child(2) { transition-delay: 0.2s; } .weekday:nth-child(3) { transition-delay: 0.3s; } .weekday:nth-child(4) { transition-delay: 0.4s; } .weekday:nth-child(5) { transition-delay: 0.5s; } .weekday:nth-child(6) { transition-delay: 0.6s; } .weekday:nth-child(7) { transition-delay: 0.7s; } </style> </head> <body> <div class="daybox"> <label> <input id="switch_night" type="checkbox"/> <div class="top"> <div class="cloud"> <div class="snow"></div> <div class="snow snow2"></div> <div class="snow snow3"></div> <div class="snow snow4"></div> </div> <div class="moon"></div> <svg class="temsvg"> <circle cx="0" cy="100" r="3"></circle> <text x="0" y="100">-19°</text> <circle cx="60" cy="80" r="3">&l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0