css实现扁平简洁天气预报ui多色卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现扁平简洁天气预报ui多色卡片效果代码
代码标签: css 扁平 简洁 天气 预报 ui 多色 卡片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Lato:100,400); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; color: #fff; font-size: 100%; font-family: 'Lato', sans-serif; font-weight: normal; } body { -moz-transition: background-color 0.9s; -o-transition: background-color 0.9s; -webkit-transition: background-color 0.9s; transition: background-color 0.9s; background-color: #87C1CD; /* Colors */ /* ---------------------------------------- */ } body.rain-a { background-color: #4E62AD; } body.lightning-a { background-color: #AFB845; } body.cloudy-b { background-color: #43429F; } body.cloudy-c { background-color: #87C1CD; } body.sun-b { background-color: #CD781B; } body.sun-c { background-color: #cd961b; } body.sun { background-color: #EB7E18; } .degree:after { content: '\00b0'; } header, section#current-temp { -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } section#current-temp h1, aside#details { display: inline-block; } div#weather-widget { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 352px; height: 316px; border: 1px solid rgba(255, 255, 255, 0.5); } header { text-align: center; padding: 15px 0; } section#current-temp { padding: 25px 15px; } section#current-temp h1.temp { font-weight: 300; font-size: 125px; line-height: .65; letter-spacing: -.1em; padding-right: 10px; width: 185px; } section#current-temp aside#details { vertical-align: top; font-weight: normal; } section#current-temp aside#details i { font-size: 70px; text-align: center; width: 100%; display: block; margin-bottom: 5px; } section#current-temp aside#details .hi-lo { text-align: center; width: 130px; } section#current-temp aside#details .hi-lo span { display: inline-block; font-size: 14px; margin: 0 3px; } section#current-temp aside#details .hi-lo span.hi:before { content: '\2191'; } section#current-temp aside#details .hi-lo span.lo:before { content: '\2193'; } section#forecast ul li { cursor: pointer; width: 50px; display: block; float: left; margin-right: 0px; padding: 15px 0; font-weight: 100; font-size: 16px; -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5); -moz-transition: background-color 0.3s; -o-transition: background-color 0.3s; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } section#forecast ul li span { display: block; text-align: center; margin-bottom: 15px; } section#forecast ul li span.icon { font-weight: bold; font-size: 20px; } section#forecast ul li.current, section#forecast ul li.current:hover { background-color: rgba(0, 0, 0, 0.2); } section#forecast ul li:hover { background-color: rgba(255, 255, 255, 0.2); } section#forecast ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; margin: 0; } </style> </head> <body > <div id="weather-widget" class='lightning'> <header> <span data-day="Thursday&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0