div+css实现天气预报动态卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现天气预报动态卡片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Overlock"); body { background: #643a7a; } .frame { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; border-radius: 2px; box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.6); background-image: linear-gradient(to top, #40334f, #2f273c, #272232, #201c29); color: #4b384c; font-family: "overlock", Helvetica, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; } .moon { position: absolute; width: 6rem; height: 6rem; top: 45px; left: 55px; border-radius: 50px; background-image: linear-gradient(to left top, #b1b1c5, #928fa3, #746f82, #575162, #3c3444); box-shadow: 0 0 3rem rgba(177, 177, 197, 0.2); -webkit-animation: rise 1s ease-out; animation: rise 1s ease-out; } .moon:hover { transform: scale(1.2); transition: 3s; } .moon-crater1 { position: absolute; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 4px solid rgba(60, 52, 68, 0.1); top: 1rem; left: 0.8rem; } .moon-crater2 { position: absolute; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgba(60, 52, 68, 0.15); top: 3.4rem; left: 2.8rem; } .hill-bg-1, .hill-bg-2, .hill-fg-1, .hill-fg-2, .hill-fg-3 { position: absolute; z-index: 2; width: 337px; height: 281px; top: 201px; left: -57px; background: #503760; border-radius: 50%; box-shadow: -0.5rem 0 0.8rem rgba(0, 0, 0, 0.3); } .hill-bg-2 { top: 177px; left: 177px; } .hill-fg-1, .hill-fg-2, .hill-fg-3 { background: #695b93; top: 228px; left: -137px; } .hill-fg-2 { top: 251px; left: 63px; } .hill-fg-3 { top: 218px; left: 292px; } .front { position: absolute; z-index: 10; width: 400px; height: 140px; left: 0; bottom: -53px; background: #fff; box-shadow: -1rem 0 1rem rgba(0, 0, 0, 0.5); -webkit-animation: slide 1s; animation: slide 1s; transition: 1s ease-in-out; z-index: 1000; } .front:hover { bottom: 0; } @-webkit-keyframes slide { 0%, 45% { transform: translateY(90px); } to { transform: translateY(0px); } } @keyframes slide { 0%, 45% { transform: translateY(90px); } to { transform: translateY(0px); } } .front .temperature { float: left; margin-left: 20px; font-size: 45px; line-height: 90px; } .front .info { float: left; margin: 2rem 0 0 3rem; font-size: 1.2rem; line-height: 20px; } .icons { position: absolute; top: 2rem; left: 7rem; line-height: 20px; } .front .preview { float: right; font-weight: 400; text-align: right; font-size: 1.2rem; line-height: 20px; margin: 25px 20px 0 0; } .front .preview td { padding: 0 3px; text-transform: uppercase; } .drop-big-1, .drop-medium-1, .drop-small-1, .drop-medium-2, .drop-small-2, .drop-medium-3, .drop-small-3, .drop-medium-4, .drop-small-4, .drop-medium-5, .drop-small-5, .drop-medium-6, .drop-small-6, .drop-medium-7, .drop-small-7, .drop-medium-8, .drop-small-8, .drop-medium-9, .drop-small-9, .drop-medium-10, .drop-small-10 { position: absolute; z-index: 20; left: 18px; bottom: 90px; width: 8px; height: 8px; border-radius: 50%; background: #7FC1F9; -webkit-animation: drop 0.9s linear 1.04s infinite; animation: drop 0.9s linear 1.04s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: 50% 100%; } .drop-big-1:before, .drop-medium-1:before, .drop-small-1:before, .drop-medium-2:before, .drop-small-2:before, .drop-medium-3:before, .drop-small-3:before, .drop-medium-4:before, .drop-small-4:before, .drop-medium-5:before, .drop-small-5:before, .drop-medium-6:before, .drop-small-6:before, .drop-medium-7:before, .drop-small-7:before, .drop-medium-8:before, .drop-small-8:before, .drop-medium-9:before, .drop-small-9:before, .drop-medium-10:before, .drop-small-10:before { position: absolute; content: ""; display: block; top: -2px; left: 1px; width: 6px; height: 6px; background: #7FC1F9; border-radius: 3px; } .drop-big-1:after, .drop-medium-1:after, .drop-small-1:after, .drop-medium-2:after, .drop-small-2:after, .drop-medium-3:after, .drop-small-3:after, .drop-medium-4:after, .drop-small-4:after, .drop-medium-5:after, .drop-small-5:after, .drop-medium-6:after, .drop-small-6:after, .drop-medium-7:after, .drop-small-7:after, .drop-medium-8:after, .drop-small-8:after, .drop-medium-9:after, .drop-small-9:after, .drop-medium-10:after, .drop-small-10:after { position: absolute; content: ""; display: block; top: -5px; left: 2px; width: 4px; height: 10px; background: #7FC1F9; border-radius: 50%; } .drop-medium-1 { left: 18px; opacity: 0.6; width: 6px; height: 6px; -webkit-animation: drop 1.5s linear 0.96s infinite; animation: drop 1.5s linear 0.96s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .drop-medium-1:before { top: -2px; left: 1px; width: 4px; height: 4px; } .drop-medium-1:after { top: -4px; left: 2px; width: 2px; height: 6px; } .drop-small-1 { left: 18px; opacity: 0.3; width: 4px; height: 4px; -webkit-animation: drop 2s linear 0.6s infinite; animation: drop 2s linear 0.6s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .drop-small-1:before { top: -2px; left: 1px; width: 2px; height: 2px; } .drop-small-1:after { top: -3px; left: 1px; width: 2px; height: 4px; } .drop-big-2 { position: absolute; z-index: 20; left: 56px; bottom: 90px; width: 8px; height: 8px; border-radius: 50%; background: #7FC1F9; -webkit-animation: drop 0.8s linear 0.72s infinite; animation: drop 0.8s linear 0.72s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: 50% 100%; } .drop-big-2:before { position: absolute; content: ""; display: block; top: -2px; left: 1px; width: 6px; height: 6px; background: #7FC1F9; border-radius: 3px; } .drop-big-2:after { position: absolute; content: ""; display: block; top: -5px; left: 2px; width: 4px; height: 10px; background: #7FC1F9; border-radius: 50%; } .drop-medium-2 { left: 56px; opacity: 0.6; width: 6px; height: 6px; -webkit-animation: drop 1.4s linear 0.12s infinite; animation: drop 1.4s linear 0.12s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .drop-medium-2:before { top: -2px; left: 1px; width: 4px; height: 4px; } .drop-medium-2:after { top: -4px; left: 2px; width: 2px; height: 6px; } .drop-small-2 { left: 56px; opacity: 0.3; width: 4px; height: 4px; -webkit-animation: drop 2.1s linear 0.32s infinite; animation: drop 2.1s linear 0.32s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .drop-small-2:before { top: -2px; left: 1px; width: 2px; height: 2px; } .drop-small-2:after { top: -3px; left: 1px; width: 2px; height: 4px; } .drop-big-3 { position: absolute; z-index: 20; left: 94px; bottom: 90px; width: 8px; height: 8px; border-radius: 50%; background: #7FC1F9; -webkit-animation: drop 0.8s linear 0.36s infinite; animation: drop 0.8s linear 0.36s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: 50% 100%; } .drop-big-3:before { position: absolute; content: ""; display: block; top: -2px; left: 1px; width: 6px; height: 6px; background: #7FC1F9; border-radius: 3px; } .drop-big-3:after { position: absolute; content: ""; display: block; top: -5px; left: 2px; width: 4px; height: 10px; background: #7FC1F9; border-radius: 50%; } .drop-medium-3 { left: 94px; opacity: 0.6; width: 6px; height: 6px; -webkit-animation: drop 1.4s linear 1.68s infinite; animation: drop 1.4s linear 1.68s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .drop-medium-3:before { top: -2px; left: 1px; width: 4px; height: 4px; } .drop-medium-3:after { top: -4px; left: 2px; width: 2px; height: 6px; } .drop-small-3 { left: 94px; opacity: 0.3; width: 4px; height: 4px; -webkit-animation: drop 2.1s linear 1.44s infinite; animation: drop 2.1s linear 1.44s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .drop-small-3:before { top: -2px; left: 1px; width: 2px; height: 2px; } .drop-small-3:after { top: -3px; left: 1px; width: 2px; height: 4px; } .drop-big-4 { position: absolute; z-index: 20; left: 132px; bottom: 90px; width: 8px; height: 8px; border-radius: 50%; background: #7FC1F9; -webkit-animation: drop 0.9s linear 0.76s infinite; animation: drop 0.9s linear 0.76s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: 50% 100%; } .drop-big-4:before { position: absolute; content: ""; display: block; top: -2px; left: 1px; width: 6px; height: 6px; background: #7FC1F9; border-radius: 3px; } .drop-big-4:after { position: absolute; content: ""; display: block; top: -5px; left: 2px; width: 4px; height: 10px; background: #7FC1F9; border-radius: 50%; } .drop-medium-4 { left: 132px; opacity: 0.6; width: 6px; height: 6px; -webkit-animation: drop 1.5s linear 1.36s infinite; animation: drop 1.5s linear 1.36s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .drop-medium-4:before { top: -2px; left: 1px; width: 4px; height: 4px; } .drop-medium-4:after { top: -4px; left: 2px; width: 2px; height: 6px; } .drop-small-4 { left: 132px; opacity: 0.3; width: 4px; height: 4px; -webkit-animation: drop 2s linear 0.6s infinite; animation: drop 2s linear 0.6s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .drop-small-4:before { top: -2px; left: 1px; width: 2px; height: 2px; } .drop-small-4:after { top: -3px; left: 1px; width: 2px; height: 4px; } .drop-big-5 { position: absolute; z-index: 20; left: 170px; bottom: 90px; width: 8px; height: 8px; border-radius: 50%; background: #7FC1F9; -webkit-animation: drop 0.8s linear 1.32s infinite; animation: drop 0.8s linear 1.32s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: 50% 100%; } .drop-big-5:before { position: absolute; content: ""; display: block; top: -2px; left: 1px; width: 6px; height: 6px; background: #7FC1F9; border-radius: 3px; } .drop-big-5:after { position: absolute; content: ""; display: block; top: -5px; left: 2px; width: 4px; height: 10px; background: #7FC1F9; border-radius: 50%; } .drop-medium-5 { left: 170px; opacity: 0.6; width: 6px; height: 6px; -webkit-animation: drop 1.5s linear 1.12s infinite; animation: drop 1.5s linear 1.12s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .drop-medium-5:before { top: -2px; left: 1px; width: 4px; height: 4px; } .drop-medium-5:after { top: -4px; left: 2px; width: 2px; height: 6px; } .drop-small-5 { left: 170px; opacity: 0.3; width: 4px; height: 4px; -webkit-animation: drop 2s linear 0.44s infinite; animation: drop 2s linear 0.44s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .drop-small-5:before { top: -2px; left: 1px; width: 2px; height: 2px; } .drop-small-5:after { top: -3px; left: 1px; width: 2px; height: 4px; } .drop-big-6 { position: absolute; z-index: 20; left: 208px; bottom: 90p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0