css简洁清爽桌面数字时钟效果代码
代码语言:html
所属分类:布局界面
代码描述:css简洁清爽桌面数字时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { width:100%; height:100vh; } .container { width:100%; height:100%; background-color:#577776; position:relative; overflow:hidden; } .table { width:90%; height:40%; background-color:#72908e; position:absolute; top:calc(100% - 30%); border-radius:10px; left:calc(50% - 45%); } .table,.inner,.inside,.screen { display:flex; justify-content:center; align-items:center; } .table .inner { border-radius:10px; position:absolute; width:90%; height:90%; top:15%; background-color:#7f9b99; } .holder { width:70px; height:70px; background-color:#72908e; border-radius:50%; position:absolute; top:40%; } .clock { width:620px; height:330px; background-color:#2b3430; position:absolute; top:calc(50% - 90px); left:calc(50% - 310px); border-radius:30px; } .inside { width:100%; height:100%; flex-direction:row; } .screen { width:45%; margin:0 6px; border-radius:20px; height:90%; background-color:#3c3d3a; color:white; font-size:150px; } .top { width:100%; height:50px; /* background-color:red; */ position:absolute; top:-50px; } .btn { position:absolute; width:70px; height:18px; background-color:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0