js+css实现发光天气提示指针时钟效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现发光天气提示指针时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700); * { outline: 0; } html, body { margin: 0; height: 100%; background: #000; font-family: "Oswald", sans-serif; } .half { position: absolute; width: 50%; height: 100%; } .half#left { left: 0; } .half#right { right: 0; } .outer { border-radius: 50%; height: 180px; width: 180px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: #3c344a; background-image: linear-gradient(-45deg, #FFF 0%, rgba(0, 0, 0, 0.5) 40%, #FFF 60%, rgba(0, 0, 0, 0.5) 80%, #FFF 100%); background-blend-mode: overlay; padding: 15px; box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.6) inset; border: 2px solid #000; } .outer:before { border-radius: 50%; height: 175px; width: 175px; content: " "; display: block; padding: 5px; background: rgba(133, 106, 192, 0.5); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(255, 255, 255, 0.4) 60%, rgba(0, 0, 0, 0.5) 80%, rgba(255, 255, 255, 0.4) 100%); background-blend-mode: overlay; position: absolute; top: 11px; left: 11px; z-index: 1; } #left .outer:before { border: 2px solid rgba(255, 255, 255, 0.1); } #left .outer:after { border-radius: 50%; height: 183px; width: 183px; content: " "; display: block; position: absolute; top: 14px; left: 14px; background: linear-gradient(45deg, #000 25%, #FFF 100%); z-index: 2; mix-blend-mode: screen; opacity: 0.5; } #right .outer { background-color: #3C2C82; } #right .outer:before { border-radius: 50%; height: 170px; width: 170px; border: 4px solid rgba(255, 243, 245, 0.5); z-index: 4; mix-blend-mode: color-dodge; top: 12px; left: 12px; } #right .outer:after { border-radius: 50%; height: 184px; width: 184px; content: ""; display: block; border: 3px solid rgba(255, 255, 255, 0.75); z-index: 10; top: 11px; left: 11px; position: absolute; filter: blur(2px); -webkit-filter: blur(2px); } .inner { border-radius: 50%; height: 176px; width: 176px; position: absolute; top: 18px; left: 18px; z-index: 4; } .inner#analog { background: #15102E; } .inner#analog:before { border-radius: 50%; height: 176px; width: 176px; content: ""; display: block; position: absolute; top: 0px; left: 0px; background: rgba(0, 0, 0, 0) repeating-conic-gradient(rgba(84, 77, 120, 0.6) 0 0.25deg, rgba(0, 0, 0, 0) 0 5.75deg); } .inner#analog:after { background: radial-gradient(rgba(21, 16, 46, 0) 64%, #2f2a45 65%, #15102E 70%); } .inner#digital { background-color: rgba(60, 44, 130, 0.75); background-size: 300%; background-position: bottom center; } .inner#digital:before { border-radius: 50%; height: 176px; width: 176px; content: ""; display: block; position: absolute; top: -1px; left: -1px; background: conic-gradient(rgba(0, 0, 0, 0), rgba(255, 236, 239, 0.6)); transform: rotate(25deg); mix-blend-mode: color-dodge; opacity: 0.5; } .inner#digital svg { position: absolute; top: 16px; left: 64px; transform: rotate(27deg); z-index: 20; } .inner#digital svg text { fill: #9991c3; } .inner .interface { z-index: 10; border-radius: 50%; height: 162px; width: 162px; position: absolute; top: 50%; margin-top: -81px; left: 50%; margin-left: -81px; } .inner .interface#time { background: #15102E; box-shadow: 0 0 5px 2px rgba(56, 42, 122, 0.5); } .inner .interface#time #meridiem { color: #544468; font-weight: bold; display: block; text-align: center; margin-top: 30px; } .inner .interface#time #minute { height: 80px; width: 13px; position: absolute; top: 3px; left: 50%; margin-left: -6.5px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 20%, rgba(52, 41, 220, 0.2) 80%, rgba(0, 0, 0, 0) 100%), linear-gradient(to top, rgba(52, 41, 220, 0.5) 30%, rgba(0, 0, 0, 0) 60%); -webkit-filter: blur(1px); /* Chrome, Safari, Opera */ filter: blur(1px); background-blend-mode: overlay; transform-origin: bottom; z-index: 4; } .inner .interface#time #minute:before { content: ""; display: block; position: absolute; width: 13px; height: 70px; top: 10px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 35%, rgba(177, 172, 242, 0.5) 35%, rgba(177, 172, 242, 0.5) 65%, rgba(0, 0, 0, 0) 65%), linear-gradient(to top, rgba(52, 41, 220, 0.5) 30%, #15102E 100%); -webkit-filter: blur(1px); /* Chrome, Safari, Opera */ filter: blur(1px); background-blend-mode: color-dodge; } .inner .interface#time #minute:after { content: ""; display: block; position: absolute; width: 7px; height: 60px; left: 3px; background: linear-gradient(to top, #FFF 0%, rgba(52, 41, 220, 0.75) 50%, rgba(0, 0, 0, 0) 100%); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; mix-blend-mode: color-dodge; bottom: 0; } .inner .interface#time #hour { height: 8px; width: 8px; background: #FFF; border-left: 0; border-right: 0; border-top: 0px solid transparent; border-bottom: 0; border-radius: 10px; border-image: linear-gradient(to top, #fff -10%, rgba(0, 0, 0, 0) 70%); position: absolute; top: 75px; left: 50%; margin-left: -4px; transform-origin:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0