天气预报卡片悬浮动画效果
代码语言:html
所属分类:动画
代码描述:天气预报卡片悬浮动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @-webkit-keyframes clouddrift { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes clouddrift { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes raindrop { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } } @keyframes raindrop { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } } * { position: relative; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; background: #222; } .cloud { -webkit-animation: clouddrift 3.5s infinite; animation: clouddrift 3.5s infinite; } .rain { -webkit-animation: raindrop 2s infinite linear; animation: raindrop 2s infinite linear; } html, body { font-family: "Ubuntu", "微軟正黑體", Arial, sans-serif; } label { cursor: pointer; } .daybox { width: 80%; max-width: 400px; background: #f3f3f3; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); border-radius: 6px; } .daybox:hover .bottom { height: 100px; } .daybox:hover .bottom .dayweather { top: 0; opacity: 1; } .daybox .top { height: 330px; background: linear-gradient(20deg, #19283D, #1D678F); background-size: 100% 200%; border-radius: 5px 5px 0 0; -webkit-animation: daylight 20s both; animation: daylight 20s both; } @-webkit-keyframes daylight { 0% { background-position: 100% 30%; } 100% { background-position: 100% 100%; } } @keyframes daylight { 0% { background-position: 100% 30%; } 100% { background-position: 100% 100%; } } .daybox .top .moon { width: 50px; height: 50px; border-radius: 50%; box-shadow: 40px -40px; position: absolute; left: 50px; top: 100px; -webkit-animation: moonmove 20s infinite linear; animation: moonmove 20s infinite linear; } @-webkit-keyframes moonmove { 0% { box-shadow: 40px -40px #ffd633; -webkit-transform: translateX(-40px) translateY(40px); transform: translateX(-40px) translateY(40px); } 100% { box-shadow: -40px 40px #ffd633; -webkit-transform: translateX(40px) translateY(-40px); transform: translateX(40px) translateY(-40px); } } @keyframes moonmove { 0% { box-shadow: 40px -40px #ffd633; -webkit-transform: translateX(-40px) translateY(40px); transform: translateX(-40px) translateY(40px); } 100% { box-shadow: -40px 40px #ffd633; -webkit-transform: translateX(40px) translateY(-40px); transform: translateX(40px) translateY(-40px); } } .daybox .top .cloud { width: 100px; height: 36px; position: absolute; left: 240px; bottom: 50px; border-radius: 18px; background: #f3f3f3; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); } .daybox .top .cloud .rain { width: 2px; height: 10px; position: absolute; left: 45px; bottom: 15px; background: #f3f3f3; } .daybox .top .cloud .rain2 { left: 70px; bottom: 20px; -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .daybox .top .cloud .rain3 { left: 30px; bottom: 20px; -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .daybox .top .cloud::before, .daybox .top .cloud::after { content: ""; display: block; width: 50px; height: 50px; position: absolute; border-radius: 50%; background: #f3f3f3; } .daybox .top .cloud::before { left: 16px; top: -28px; } .daybox .top .cloud::after { left: 35px; top: -20px; } .daybox .top .temsvg { width: 100%; } .daybox .top .temsvg polyline { stroke: #f3f3f3; stroke-width: 1px; fill: none; opacity: 0.3; } .daybox .top .temsvg text { fill: #f3f3f3; -webkit-transform: translateX(-10px) translateY(20px); transform: translateX(-10px) translateY(20px); font-size: 12px; opacity: 0; } .daybox .top .temsvg circle { fill: #f3f3f3; opacity: 0.3; } .daybox .top .temsvg g.star circle { opacity: 0.3; } .daybox .top .text_area { display: inline-block; position: absolute; bottom: 25px; left: 25px; color: #f3f3f3; } .daybox .top .text_area .temperature { font-size: 75px; line-height: 80px; } .daybox .top .text_area .infos { letter-spacing: 1px; font-size: 13px; margin-left: 4px; opacity: 0.7; } .daybox .bottom { height: 10px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); border-radius: 0 0 5px 5px; overflow: hidden; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; } .daybox .bottom .dayweather { width: calc(100% / 7 - 5px); display: inline-block; text-align: center; opacity: 0; top: 20px; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; } .daybox .bottom .dayweather:first-of-type { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .daybox .bottom .dayweather:nth-of-type(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .daybox .bottom .dayweather:nth-of-type(3) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .daybox .bottom .dayweather:nth-of-type(4) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .daybox .bottom .dayweather:nth-of-type(5) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .daybox .bottom .dayweather:nth-of-type(6) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .daybox .bottom .dayweather:last-of-type { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } .daybox .bottom .dayweather h3 { font-size: 8px; color: rgba(34, 34, 34, 0.5); letter-spacing: 1px; } .daybox .bottom .dayweather svg { width: 100%; max-width: 40px; height: 40px; } .daybox .bottom .dayweather svg .sun { fill: #ffd633; stroke: rgba(255, 214, 51, 0.7); stroke-width: 30px; stroke-dasharray: 4px; -webkit-animation: sunlight 2s infinite linear alternate; animation: sunlight 2s infinite linear alternate; } @-webkit-keyframes sunlight { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); transform: scale(0.8); stroke-width: 20px; } } @keyframes sunlight { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); transform: scale(0.8); stroke-width: 20px; } } .daybox .bottom .dayweather svg .cloud { fill: #ccc; } .daybox .bottom .dayweather svg .typhoon .cloud { fill: #aaa; } .daybox .bottom .dayweather svg .rain { stroke: #125590; -webkit-animation: raindrop 2s infinite linear; animation: raindrop 2s infinite linear; } .daybox .bottom .dayweather svg .rain_group { -webkit-transform: rotate(-15deg) translateX(-10px); transform: rotate(-15deg) translateX(-10px); } .daybox .bottom .dayweather svg .wind { stroke: #888; stroke-width: 4px; -webkit-animation: windblows 2s infinite linear; animation: windblows 2s infinite linear; } .daybox .bottom .dayweather svg .wind_group { -webkit-animation: clouddrift 3.5s infinite; animation: clouddrift 3.5s infinite; } @-webkit-keyframes windblows { 0% { opacity: 0; -webkit-transform: translateX(-80px); transform: translateX(-80px); } 50% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { opacity: 0; -webkit-transform: translateX(40px); transform: translateX(40px); } } @keyframes windblows { 0% { opacity: 0; -webkit-transform: translateX(-80px); transform: translateX(-80px); } 50% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { opacity: 0; -webkit-transform: translateX(40px); transform: translateX(40px); } } .daybox .top .moon, .daybox .top .cloud { -webkit-transition-duration: 0.8s; transition-duration: 0.8s; } .daybox .top .temsvg polyline, .daybox .top .temsvg circle, .daybox .top .temsvg text { -webkit-transition-duration: 0.8s; transition-duration: 0.8s; } .daybox .top .temsvg g.star circle { -webkit-animation: starshine 2s infinite alternate linear; animation: starshine 2s infinite alternate linear; -webkit-transition-duration: 2s; transition-duration: 2s; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .daybox .top .temsvg g.star circle:nth-of-type(2), .daybox .top .temsvg g.star circle:nth-of-type(8) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .daybox .top .temsvg g.star circle:nth-of-type(5), .daybox .top .temsvg g.star circle:nth-of-type(7) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .daybox .top .temsvg g.star circle:nth-of-type(9), .daybox .top .temsvg g.star circle:nth-of-type(12) { -webkit-animation-delay: -0.6s; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0