css 天气预报
代码语言:html
所属分类:其他
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900&display=swap'); :root { --gradient: linear-gradient(135deg, #72EDF2 10%, #5151E5 100%); } * { -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1.25em; } .clear { clear: both; } body { margin: 0; width: 100%; height: 100vh; font-family: 'Montserrat', sans-serif; background-color: #343d4b; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .container { border-radius: 25px; -webkit-box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2); background-color: #222831; color: #ffffff; height: 400px; } .weather-side { position: relative; height: 100%; border-radius: 25px; background-image: url("https://images.unsplash.com/photo-1559963110-71b394e7494d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80"); width: 300px; -webkit-box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2); -webkit-transition: -webkit-transform 300ms ease; transition: -webkit-transform 300ms ease; -o-transition: transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; -webkit-transform: translateZ(0) scale(1.02) perspective(1000px); transform: translateZ(0) scale(1.02) perspective(1000px); float: left; } .weather-side:hover { -webkit-transform: scale(1.1) perspective(1500px) rotateY(10deg); transform: scale(1.1) perspective(1500px) rotateY(10deg); } .weather-gradient { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: var(--gradient); border-radius: 25px; opacity: 0.8; } .date-container { position: absolute; top: 25px; left: 25px; } .date-dayname { margin: 0; } .date-day { display: block; } .location { display: inline-block; margin-top: 10px; } .location-icon { display: inline-block; height: 0.8em; width: auto; margin-right: 5px; } .weather-container { position: absolute; bottom: 25px; left: 25px; } .weather-icon.feather { height: 60px; width: auto; } .weather-temp { margin: 0; font-weight: 700; font-size: 4em; } .weather-desc { margin: 0; } .info-side { position: relative; float: left; height: 100%; padding-top: 25px; } .today-info { padding: 15px; margin: 0 25px 25px 25px; /* box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.25); */ border-radius: 10px; } .today-info>div:not(:last-child) { margin: 0 0 10px 0; } .today-info>div .title { float: left; font-weight: 700; } .today-info>div .value { float: right; } .week-list { list-style-type: none; padding: 0; margin: 10px 35px; -webkit-box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.25); box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.25); border-radius: 10px; background: # } .week-list>li { float: left; padding: 15px; cursor: pointer; -webkit-transition: 200ms ease; -o-transition: 200ms ease; transition: 200ms ease; border-radius: 10px; } .week-list>li:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); background: #fff; color: #222831; -webkit-box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.2) } .week-list>li.active { background: #fff; color: #222831; border-radius: 10px; } .week-list>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0