css布局实现一个西瓜时钟效果
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个西瓜时钟效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #74c4c8; margin: 0; } .wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .face { display: flex; justify-content: center; align-items: center; width: 70vmin; height: 70vmin; border-radius: 50%; position: relative; background: radial-gradient(ellipse at center, #ec7277, #ec7277 60%, #e1ecde calc( 60% + 1px ), #e1ecde 63%, #079554 calc( 63% + 1px ), #079554 68%, #056e3e calc( 68% + 1px )); box-shadow: -0.3vmin -0.3vmin 0.1vmin #e1ecde, 3vmin 3vmin 0.1vmin #44a7ac; } .face:after { content: ''; display: block; width: 3.5vmin; height: 3.5vmin; border-radius: 50%; background-color: #f8ccce; position: absolute; } .quarter { height: 80%; width: 80%; position: absolute; } .quarter div { height: 10%; width: 2.4%; border-radius: 1vmin; background-color: #c41a21; position: absolute; } .quarter div:nth-child(even) { top: 45%; transform: rotate(90deg); } .quarter div:nth-child(odd) { left: 48.8%; } .quarter div:nth-child(1) { top: 0; } .quarter div:nth-child(2) { right: 3%; } .quarter div:nth-child(3) { bottom: 0; } .quarter div:nth-child(4) { left: 3%; } .seeds { width: 85%; height: 85%; border-radius: 50%; overflow: hidden; position: relative; } .seeds div { display: block; height: 3.5vmin; width: 2vmin; background-color: #e32f36; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; position: absolute; } .seeds div:nth-child(1) { top: 50%; left: 6%; transform: rotate(161deg); } .seeds div:nth-child(2) { top: 81%; left: 12%; transform: rotate(41deg); } .seeds div:nth-child(3) { top: 13%; left: 18%; transform: rotate(76deg); } .seeds div:nth-child(4) { top: 64%; left: 24%; transform: rotate(153deg); } .seeds div:nth-child(5) { top: 11%; left: 30%; transform: rotate(84deg); } .seeds div:nth-child(6) { top: 27%; left: 36%; transform: rotate(158deg); } .seeds div:nth-child(7) { top: 58%; left: 42%; transform: rotate(359deg); } .seeds div:nth-child(8) { top: 41%; left: 48%; transform: rotate(220deg); } .seeds div:nth-child(9) { top: 39%; left: 54%; transform: rotate(328deg); } .seeds div:nth-child(10) { top: 29%; left: 60%; tra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0