div+css实现天气预报手表ui效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现天气预报手表ui效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'/> <style> @-webkit-keyframes bg-slide { 0% {background-position-x: left;} 40% {background-position-x: right;} 50% {background-position-x: right;} 90% {background-position-x: left;} } html, body { position: relative; margin: 0; height: 100%; background: linear-gradient(to bottom, #999, #ddd); font-family: 'Roboto', sans-serif; z-index: 1; } #controls { padding: 10px; text-align: center; } #controls button { margin: 5px; border: 0; padding: 5px 0; width: 55px; cursor: pointer; color: #666; background: #eee; } #controls button:focus { outline: 0; } #watch { position: absolute; top:50%; left:50%; height:200px; width:200px; margin-top:-100px; margin-left:-112px; border-radius: 50%; background: #222; border: 10px solid #333; color: white; text-align: center; } #watch:before { content: ''; position: absolute; top:50%; left:50%; width:110px; height:300px; margin-top:-150px; margin-left:-55px; background: #222; border-radius: 10px; z-index: -1; } #watch:after { content: ''; position: absolute; top:50%; left:100%; height:28px; width:22px; margin-top:-14px; background: #222; border-radius: 4px; z-index: -1; } #screen { position: absolute; top:0; right:0; bottom:0; left:0; border-radius: 50%; overflow: hidden; } #screen.sunny { background: url('//repo.bfw.wiki/bfwrepo/image/637acb06be52e.png'); background-size: cover; box-shadow: inset 0 0 0 18px rgba(1,127,204,.5); animation: bg-slide 20s cubic-bezier(.3,1,.3,1) infinite; -webkit-animation: bg-slide 20s cubic-bezier(.3,1,.3,1) infinite; } #screen.rainy { background: url('//repo.bfw.wiki/bfwrepo/image/637acab5b5b94.png'); background-size: cover; box-shadow: inset 0 0 0 18px rgba(103,122,139,.5); } #screen.stormy { background: rgb(110,93,138) url('//repo.bfw.wiki/bfwrepo/image/637aca64ce907.png') center; background-size: 380px 280px; background-blend-mode: luminosity; box-shadow: inset 0 0 0 18px rgba(110,93,138,.5); } #cvs { position: absolute; top:0; right:0; bottom:0; left:0; opacity: .8; } #weather { position: absolute; top:30px; left:50%; height:70px; width:70px; line-height: 50px; margin-left:-35px; padding: 10px; border-radius: 50%; font-size: 24px; box-sizing: border-box; font-weight: 700; color: rgba(255,255,255,.8); } #screen.sunny #weather { background: rgba(1,127,204,.7); } #screen.rainy #weather { background: rgba(103,122,139,.7); } #screen.stormy #weather { background: rgba(110,93,138,.7); } #location { position: absolute; right:0; top:24px; left:0; font-size: 12px; opacity: .5; } #time { position: absolute; right:0; bottom:20px; left:0; opacity: .8; font-size: 16px; } footer { position: absolute; right:0; bottom:0; left:0; text-align: center; font-size: 10px; line-height: 40px; color: #666; } footer a { color: steelblue; } </style> </head> <body > <div id="controls"> <button id="sunny">.........完整代码请登录后点击上方下载按钮下载查看
网友评论0