css实现背景滚动的登录页效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现背景滚动的登录页效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css"> <style> body { margin: 0; padding: 0; background: #000; color: #fff; height: 100%; min-height: 100%; overflow: hidden; font-family: 'Open Sans', sans-serif; } body #copy { position: absolute; bottom: 0; height: 40px; width: 100%; text-align: center; text-transform: uppercase; line-height: 14px; font-size: 10px; font-weight: 400; z-index: 10; } body #copy a { color: #fff; text-decoration: none; transition: all 0.3s ease-in-out 0s; } body #copy a b { font-weight: 700; } body #copy a:hover { color: #fff; } body .mask { position: absolute; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.75); z-index: 1; box-shadow: 0 0 500px #000 inset, 0 0 300px #000 inset, 0 0 200px #000 inset; } body .mask .modal { opacity: 0; width: 300px; height: 320px; background: rgba(0, 0, 0, 0.75); border-radius: 5px; box-shadow: 0 0 10px #000000, 0 0 0 1px rgba(47, 47, 47, 0.5) inset; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } body .mask .modal .circle { background: #0d0d0d; width: 120px; height: 120px; border-radius: 50%; position: relative; left: 50%; overflow: hidden; transform: translate(-50%, -50%); box-shadow: 0 0 8px #0a0a0a, 0 0 0 1px #0a0a0a; background-repeat: no-repeat; background-position: center center; background-size: cover!important; } body .mask .modal .login h1 { margin: 0; padding: 0; margin-top: -30px; font-family: arial; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); letter-spacing: 1px; text-align: center; } body .mask .modal .login input { width: 260px; margin-left: 10px; margin-top: 15px; background: rgba(0, 0, 0, 0.3); border: none; outline: none; padding: 10px; font-size: 13px; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2); -webkit-transition: box-shadow 0.5s ease; -moz-transition: box-shadow 0.5s ease; -o-transition: box-shadow 0.5s ease; -ms-transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease; } body .mask .modal .login input:focus { box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2); } body .mask .modal .login button { background: transparent; text-align: center; border: solid 2px #fff; margin: 25px 15px 0; width: 275px; color: #fff; line-height: 25px; border-radius: 20px 20px 20px 20px; } body .vertical { float: left; width: 10%; overflow: hidden; } body .vertical .horizontal { width: 100%; height: 150px; position: relative; box-shadow: -1px 1px 0 1px #000000 inset, 0 0 50px rgba(0, 0, 0, 0.5) inset; overflow: hidden; text-align: center; background-repeat: no-repeat; background-position: center center; background-size: cover!important; } </style> </head> <body > <div id="copy"><a href="https://twitter.com/igcorreia" target="_blank">Crafted by: <b>@igcorreia</b><br/>Searching for a Dribbble invite :)</a></div> <div class="mask"> <div class="modal"> <div class="circle" ></div> <div class="login"> <h1>Login</h1> <form method="post"> <input type="text" name="u" placeholder="Username" required="required"/> <input type="password" name="p" placeholder="Password" required="required"/> <button class="btn btn-primary btn-block btn-large" type="submit">Let me in.</button> </form> </div> </div> </div> <div class="vertical vertical0"> <div class="horizontal horizontal000" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal001" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal002" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal003" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal004" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal005" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal006" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal007" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal008" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal010" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal011" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal012" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal013" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal014" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal015" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal016" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal017" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal018" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal020" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal021" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal022" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal023" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal024" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal025" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal026" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal027" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal028" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal030" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal031" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal032" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal033" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal034" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal035" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal036" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal037" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal038" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal040" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal041" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal042" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal043" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal044" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal045" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal046" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal047" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal048" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal050" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal051" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal052" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal053" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal054" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal055" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal056" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal057" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal058" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> </div> <div class="vertical vertical1"> <div class="horizontal horizontal100" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal101" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal102" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal103" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal104" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal105" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal106" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal107" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal108" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal110" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal111" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal112" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal113" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal114" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal115" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal116" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal117" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal118" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal120" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal121" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal122" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_75,/quality,q_90')"></div> <div class="horizontal horizontal123" style="background: url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png?x-oss-process=image/a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0