css布局实现一个智能家居显示温度水温等UI效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个智能家居显示温度水温等UI效果代码
代码标签: 一个 智能家居 显示 温度 水温 等 UI 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> @charset "utf-8"; 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-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} /*-------------------- Body --------------------*/ *, *::before, *::after { box-sizing: border-box; } body { height: 100vh; margin: 0; background: radial-gradient(ellipse farthest-corner at center bottom, #6beace, #2e9aa4); color: #8b9095; font-size: 14px; font-family: 'Roboto', sans-serif; } /*-------------------- App --------------------*/ .app { position: relative; top: 50%; left: 50%; width: 362px; height: 300px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .app h1 { position: absolute; top: -34px; left: -2px; text-transform: uppercase; color: #fff; font-weight: 100; font-size: 27px; opacity: .9; } .app .logo { width: 25px; height: 25px; margin-right: 3px; } .app time { position: absolute; top: -32px; right: 1px; text-transform: uppercase; color: #fff; opacity: .7; font-size: 10.5px; text-align: right; line-height: 1.25; letter-spacing: 0.5px; } .app .widget { margin: 0; padding: 0; } .app .widget li { width: 180px; height: 148px; padding: 40px 10px; margin: 0.5px; float: left; background: #fff; text-align: center; box-shadow: 0 5px 20px rgba(0, 64, 58, 0.15); transition: all 0.3s cubic-bezier(0.67, 0.13, 0.1, 0.81); -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: scale(0); transform: scale(0); } .app .widget li:nth-child(2) { -webkit-transform-origin: left bottom; transform-origin: left bottom; transition-delay: .1s; } .app .widget li:nth-child(3) { -webkit-transform-origin: right top; transform-origin: right top; transition-delay: .2s; } .app .widget li:nth-child(4) { -webkit-transform-origin: left top; transform-origin: left top; transition-delay: .3s; } .app .widget li h2 { font-size: 11px; opacity: .8; margin-bottom: 10px; text-transform: uppercase; } .app .widget li .val { font-size: 50px; font-weight: 100; color: #343a42; } .app .widget li .val small { font-size: 30px; } .app .widget li .val small sup { position: relative; top: -12px; } .active .app .widget li { -webkit-transform: scale(1); transform: scale(1); transition: all 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81); } .active .app .widget li:nth-child(2) { -webkit-transform-origin: left bottom; transform-origin: left bottom; transition-delay: .2s; } .active .app .widget li:nth-child(3) { -webkit-transform-origin: right top; transform-origin: right top; transition-delay: .4s; } .active .app .widget li:nth-child(4) { -webkit-transform-origin: left top; transform-origin: left top; transition-delay: .6s; } .reload { position: absolute; bottom: 15px; right: 15px; background: #fff; border: none; border-radius: 20px; font-size: 11px; line-height: 1.5; padding: 8px 12px; text-transform: uppercase; z-index: 10; outline: none !important; cursor: pointer; box-shadow: 0 6px 7px rgba(0, 64, 58, 0.27); transition: all 0.1s cubic-bezier(0.67, 0.13, 0.1, 0.81); } .reload:hover { box-shadow: 0 4px 4px rgba(0, 64, 58, 0.27); -webkit-transform: translateY(1px); transform: translateY(1px); } .reload:active { box-shadow: 0 1px 2px rgba(0, 64, 58, 0.27); -webkit-transform: translateY(2px); transform: translateY(2px); } .reload svg { vertical-align: middle; position: relative; top: -2px; } </style> </head> <body> <div class="app"> <h1> <svg class="logo">.........完整代码请登录后点击上方下载按钮下载查看
网友评论0