日历本封锁时间变动效果
代码语言:html
所属分类:其他
代码描述:日历本封锁时间变动效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .mySocial { position: absolute; top: 25px; left: 25px; } .mySocial a { display: inline-block; height: 2.5em; } .mySocial a i { font-size: 1.5em; } .mySocial a i.fa-linkedin { color: #fff; } .mySocial a i.fa-github { color: #24292e; } .mySocial a i.fa-twitter { color: #1da1f2; } body { width: 100%; height: 100vh; background: #5952fd; overflow: hidden; font-family: "Poppins", sans-serif; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } .container { width: 100%; height: 450px; display: grid; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; grid-template-rows: 50px 400px; } .calendar { width: 400px; height: 400px; margin: auto; background: white; position: relative; } .calendar.animate { -webkit-animation: scale 0.4s infinite linear; animation: scale 0.4s infinite linear; } .calendar .shadow { position: absolute; width: 566px; background: #524ee8; height: 1000px; top: 50px; left: 270px; z-index: -1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .reset { color: white; } .reset i, .reset span { pointer-events: none; } .reset:hover { color: #ccc; cursor: pointer; } .top { height: 80px; width: 100%; background: #f0514e; position: relative; box-shadow: 0px 6px 2px #d5d5d5; } .top::before { content: ""; position: absolute; height: 100%; width: 50%; right: 0; top: 0; background: #e43936; } .top .ring { position: absolute; width: 40px; height: 40px; background: #5952fd; border-radius: 50%; top: 20px; } .top .ring::before { content: ""; position: absolute; top: -35px; height: 60px; width: 25%; left: 25%; background: #404041; border-radius: 20px 0 0 20px; } .top .ring::after { content: ""; position: absolute; top: -35px; height: 60px; width: 25%; right: 25%; background: #1e1b1d; border-radius: 0 20px 20px 0; } .top .ring.left { left: 80px; } .top .ring.right { right: 80px; } .page { width: 100%; height: 320px; text-align: center; display: grid; grid-template-rows: 60px 260px; -webkit-box-align: center; align-items: center; background: white; } .page .title { font-size: 2em; text-transform: uppercase; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0