二进制手表效果
代码语言:html
所属分类:布局界面
代码描述:二进制手表效果,一般人看不懂
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .Base, .Screen, .glare, .Band_Connector, .Band_Buckle, .Band_Holes, .Side_Btn, .Home_Btn { position: absolute; } canvas { width: 130px; height: 162px; position: absolute; top: -35px; } body { background: #cdc743; display: flex; height: 100vh; align-items: center; justify-content: center; } .Container { position: relative; width: 172px; height: 319px; } .Band_Connector { left: 17px; top: 48px; width: 110px; height: 202px; background: transparent; border: 10px solid #d2d2d7; border-radius: 20px; } .Band_Holes { background-color: #fb5858; border-radius: 0px 0px 15px 15px; left: 32px; top: 257px; width: 102px; height: 62px; } .Base { border-radius: 30px; background: #eeeeee; left: 0px; top: 62px; width: 164px; height: 195px; } .Screen { background: #2a2a2a; left: 10px; top: 72px; width: 144px; height: 176px; border-radius: 22px; z-index: 0; } .glare { background: #eeeeee; left: 20px; top: 62px; width: 125px; height: 25px; border-radius: 20px; opacity: 0.05; z-index: 1; } .Band_Buckle { background-color: #fb5858; border-radius: 15px 15px 0px 0px; left: 32px; top: 0px; width: 102px; height: 62px; } .Side_Btn { background: transparent; border-radius: 3px 0px 0px 3px; right: 8px; top: 165px; width: 3px; height: 45px; background: transparent; border: 1px solid #d2d2d7; border-right-color: #eeeeee; } .Home_Btn { background: #4b5055; border-radius: 0px 10px 10px 0px; right: 0px; top: 104px; width: 8px; height: 30px; } </style> </head> <body translate="no"> <onload> </onload> <startTime> <div class="Container"> <div class="Band_Connector"></div> <div class="Base"></div> <div class="Side_Btn"></div> <div class="Home_Btn"></div> <div class="Screen"> <canvas id="canvas"></canvas> </div> <div class="glare"></div> <div class="glare_black"></div> <div class="Band_Buckle.........完整代码请登录后点击上方下载按钮下载查看
网友评论0