div+css实现天气预报卡片悬浮伸缩动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现天气预报卡片悬浮伸缩动画效果代码
代码标签: div css 天气 预报 卡片 悬浮 伸缩 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap'> <style> * { position: relative; font-family: "Poppins", sans-serif; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background-color: #064C59; } .box { height: 70%; max-height: 300px; position: relative; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); } .box:hover .right { width: 500px; } .box:hover .templine { opacity: 1; } .box:hover .week { opacity: 1; top: 0; } .left, .right { display: inline-block; vertical-align: top; overflow: hidden; } .left { width: 250px; height: 300px; background-color: #fff; border-radius: 10px 0 0 10px; cursor: pointer; } .left .text { margin: 30px; color: #064C59; } .left .area { margin-bottom: 5px; font-size: 16px; font-weight: 600; } .left .time { margin-bottom: 5px; } .left .detail { margin-bottom: 5px; font-size: 10px; opacity: 0.8; } .left .temp { margin-top: 40px; font-size: 60px; font-weight: 600; } .left .temp .small { font-size: 12px; position: absolute; top: 15px; } .left .cloud { width: 130px; Height: 50px; position: absolute; right: -30px; top: 160px; border-radius: 30px; background-color: #C9C9C9; box-shadow: 0px 0px 20px rgba(103, 103, 103, 0.3); animation: clouddrift 2s infinite; } .left .cloud:before, .left .cloud:after { content: ""; background-color: #C9C9C9; display: block; width: 60px; Height: 60px; border-radius: 100%; position: absolute; } .left .cloud:before { left: 20px; top: -40px; } .left .cloud:after { left: 60px; top: -20px; } @keyframes clouddrift { 0% { transform: translateY(0px); } 50% { transform: translateY(10px); } 100% { transform: translateY(0px); } } .right { width: 10px; height: 300px; margin-left: -5px; background: linear-gradient(20deg, #FEA034, #FEC234); border-radius: 0px 10px 10px 0px; transition-duration: 1.5s; } .right .templine { width: 100%; height: 100px; padding-top: 20px; opacity: 0; transition-duration: 3s; } .right .templine circle { fill: #fff; opacity: 0.5; transition: 3s 0s; } .right .templine polyline { stroke: #fff; stroke-width: 1px; fill: none; opacity: 0.5; transition: 3s 1.5s; } .right .templine text { transform: translatex(-10px) translateY(-10px); font-size: 12px; fill: #fff; transition: 3s 3s; } .right .week { width: 100%; display: flex; justify-content: center; padding-top: 10px; opacity: 0; top: 180px; transition: 1s; } .right .week .weather { width: calc(100% / 7 - 5px); display: inline-block; text-align: center; background-color: #fff; border-radius: 15px; transition: 0.5s; } .right .week .weather h5 { color: #064C59; } .right .week .weather svg .sun { fill: #FEC234; stroke: rgba(254, 194, 52, 0.5); stroke-width: 20px; stroke-dasharray: 5.2px; animation: sunmove 2s infinite; } .right .week .weather svg .rain { stroke: #C9C9C9; stroke-width: 2px; animation: raindrop 1s infinite linear; } .right .week .weather svg .rain2 { animation-delay: -0.4s; } .right .week .weather svg .rain3 { animation-delay: -0.7s; } .right .week .weather svg .cloud { fill: #676767; animation: clouddrift 2s infinite; } @keyframes raindrop { 0% { transform: translateY(0px); } 100% { transform: translateY(50px); opacity: 0; } } @keyframes sunmove { 0% { transform: translateY(0px); } 50% { transform: translateY(5px); } 100% { transform: translateY(0px); } } #switch_night { display: none; } #switch_night:checked + .left { background-color: #01282F; } #switch_night:checked + .left .text { color: #F2F2F2; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="box"> <label> <input id="switch_night" type="checkbox"/> <div class="left"> <div class="text"> <div class="area"> Da'an District, <br/>Taipei City</div> <div class="time"> Apr. 04, 2021|12:02pm</div> <div class="detail">降雨機率:21%<br/>濕度:84%<br/>風速:26 公里/時</div> <div class="temp">20<span class="small">°C</span></div> </div> <div class="cloud"></div> </div> <div class="right"> <svg class="templine"> <circle cx="40" cy="30" r="3"></circle> <text x="40" y="30">20°</text> <circle cx="110" cy="40" r="3"></circle> <text x="110" y="40">19°</text> <circle cx="180" cy="50" r="3"></circle> <text x="180" y="50">18°</text> <circle cx="250" cy="60" r="3"></circle> <text x="250" y="60">17°</text> <circle cx="320" cy="60" r="3"></circle> <text x="320" y="60">17°</text> <circle cx="390" cy="70" r="3"></circle> <text x="390" y="70">16°</text> <circle cx="460" cy="80" r="3"></circle> <text x="460" y="80">15°</text> <polyline points="40,30 110,40 180,50 250,60 320,60 390,70 460,80"></polyline> </svg> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0