react模拟一个手机滑屏解锁进入桌面效果代码
代码语言:html
所属分类:其他
代码描述:react模拟一个手机滑屏解锁进入桌面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/icon-font.min.css"> <style> @import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400'; @import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'; @-webkit-keyframes slidetounlock { 0% { background-position: -230% 0; } 100% { background-position: 230% 0; } } body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-blend-mode: overlay; background-color: rgba(255, 255, 255, 0.25); background-image: url(//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png); font-family: "Roboto Condensed"; font-size: 16px; } .device { position: relative; width: 320px; height: 568px; background: #000; box-shadow: 9px 7px 40px -6px rgba(0, 0, 0, 0.25); background-position: center center; background-size: cover; overflow: hidden; } .device-components { position: absolute; width: 100%; z-index: 50; } .battery { position: absolute; top: 13px; right: 15px; width: 19px; height: 9px; border: 1px solid white; border-radius: 1px; opacity: 0.9; } .battery .bar { position: absolute; left: 1px; top: 1px; width: 5px; height: 7px; background: #fff; } .battery .bar:nth-child(2) { left: 7px; } .battery .bar:nth-child(3) { left: 13px; } .signal { position: absolute; top: 15px; left: 15px; height: 9px; opacity: 0.9; } .signal .bar { position: absolute; left: 0px; bottom: 0px; width: 3px; height: 3px; background: #fff; } .signal .bar:nth-child(2) { left: 4px; height: 6px; } .signal .bar:nth-child(3) { left: 8px; height: 9px; } .signal .bar:nth-child(4) { left: 12px; height: 12px; } .lock-components { position: absolute; top: 120px; transform: scale(0); transition: all 0.4s ease; opacity: 0; } .clock, .weather { display: inline-block; font-size: 38px; color: #fff; font-weight: 300; font-family: "Open Sans Condensed"; opacity: 0.9; } .clock { position: relative; top: 3px; } .lock-button { position: absolute; left: 5px; bottom: 5px; padding: 10px; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 25px; } .lock-screen { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); transition: all 0.4s ease; opacity: 0; } .unlock-bar { position: absolute; bottom: 80px; width: 250px; height: 50px; } .unlock-bar .circle { position: absolute; width: 44px; height: 44px; background: #fff; border-radius: 27px; left: 5px; top: 5px; opacity: 0.5; } .unlock-bar .circle:before { content: ""; position: absolute; left: -5px; width: 25px; height: 50px; border: 2px solid #fff; border-right: none; border-radius: 30px 0px 0px 30px; top: -5px; } .unlock-bar .ring { position: absolute; right: 0px; width: 26px; height: 50px; border: 2px solid #fff; border-left: none; border-radius: 0px 30px 30px 0; opacity: 0.45; } .weather { font-size: 28px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.5); margin-left: 11px; } .weather .lnr { font-size: 24px; padding-top: 4px; } .unlock-slider { position: absolute; bottom: 60px; z-index: 50; } .unlock-slider input[type=range] { width: 280px; height: 51px; padding: 0px 2px 0 2px; -webkit-appearance: none; transition: opacity 0.5s; position: relative; background: #999; border-radius: 25px; outline: none; opacity: 0.45; } .unlock-slider input[type=range]::-webkit-slider-thumb { position: relative; -webkit-appearance: none; width: 47px; height: 47px; background: radial-gradient(#222 30%, #000 90%); border-radius: 27px; left: 0px; top: 0px; border: 1px solid rgba(255, 255, 255, 0.65); transition: all 0.2s ease; } .locked .lock-screen { opacity: 1; } .locked .lock-components { transform: scale(1); opacity: 1; } .locked .app-screen { opacity: 0; transform: translate(100%, 0px); } .app-screen { position: absolute; width: 100%; height: 100%; transition: all 0.4s ease; opacity: 1; transform: translate(0px, 0px); padding: 60px 10px; box-sizing: border-box; } .app-screen .app-icon { color: #fff; font-size: 30px; width: 25%; height: 70px; text-align: center; display: inline-block; justify-content: center; align-items: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.25); } </style> </head> <body > <div id="app"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script> <script type="text/babel" > class Batter.........完整代码请登录后点击上方下载按钮下载查看
网友评论0