css实现简约时钟效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现简约时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Overpass:wght@900&display=swap"); *::after, *::before, * { margin: 0; padding: 0; box-sizing: inherit; } body { box-sizing: border-box; background-color: #E0E0E0; font-family: "Overpass", sans-serif; } .container { width: 100%; } .clock { width: 30rem; height: 30rem; margin: 5rem auto; padding: 1rem; background-color: #333; border: 2rem solid white; border-radius: 25%; box-shadow: 2px 0px 10px 2px #b3b3b3, 0px 0px 8px 0px black inset; display: grid; grid-template-rows: fit-content(100%); grid-template-columns: fit-content(100%); grid-gap: 1rem; grid-template-areas: ". year year year year ." "month month month num num num" "analog analog analog num num num" "analog analog analog day day day"; } .clock__item { border: 1px solid black; box-shadow: -8px 0px 8px 0px black inset; } .clock__year { grid-area: year; font-size: 3.2rem; letter-spacing: 1rem; display: flex; justify-content: center; align-items: center; color: white; } .clock__month { grid-area: month; font-size: 3.2rem; letter-spacing: 1rem; display: flex; justify-content: center; align-items: center; color: white; } .clock__day-numbers { grid-area: num; font-size: 5.8rem; letter-spacing: 2rem; display: flex; justify-content: center; align-items: center; color: white; justify-content: flex-end; } .clock__day-letters { grid-area: day; font-size: 3.6rem; letter-spacing: 0rem; display: flex; justify-content: center; align-items: center; color: white; width: 80%; background-color: green; } .clock__analog { grid-area: analog; width: 10rem; height: 10rem; transform: translate(1rem, 0rem); border-radius: 50%; position: relative; } .clock__analog--hours, .clock__analog--minutes, .clock__analog--seconds { position: absolute; top: 50%; transform: rotate(90deg); transform-origin: 100%; box-shadow: 2px 0px 5px 0px black; } .clock__analog--hours { width: 40%; left: 10%; height: 5px; background-color: white; border-radius: 2.5rem; } .clock__analog--minutes { width: 45%; left: 5%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0