带声音可调色温的灯光开关点击动画效果代码
代码语言:html
所属分类:动画
代码描述:带声音可调色温的灯光开关点击动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; } :root { --hue: 297; --light: 37.5; --transition: 0.15s; } body { background: hsl(var(--hue), 50%, calc(var(--light) * 1%)); -webkit-transition: background var(--transition); transition: background var(--transition); cursor: var(--cursor); min-height: 100vh; touch-action: none; } .switch { --size: 200; --panel-hue: 55; --panel-saturation: 10; --faceplate: hsl(55, 10%, calc((30 + var(--light)) * 1%)); --faceplate-light: hsl(55, 10%, calc((50 + var(--light)) * 1%)); --faceplate-dark: hsl(55, 10%, calc((0 + var(--light)) * 1%)); --pressed: 0; background: -webkit-gradient(linear, left bottom, left top, from(var(--faceplate-dark)), to(var(--faceplate-light))); background: linear-gradient(0deg, var(--faceplate-dark), var(--faceplate-light)); border-radius: 5%; height: calc(var(--size) * 1px); overflow: hidden; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(var(--size) * 1px); box-shadow: 0px 10px 0px 0px hsl(var(--hue), 50%, calc((var(--light) - 10) * 1%)); -webkit-transition: background var(--transition), box-shadow var(--transition); transition: background var(--transition), box-shadow var(--transition); } .switch__faceplate { background: var(--faceplate); height: calc(100% - 10px); width: calc(100% - 10px); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 5%; -webkit-transition: background var(--transition); transition: background var(--transition); } .switch__faceplate:after, .switch__faceplate:before { --screw: hsl(0, 0%, calc((20 + var(--light)) * 1%)); --screw-dark: hsl(0, 0%, calc((0 + var(--light)) * 1%)); --screw-darkest: hsl(0, 0%, calc((-20 + var(--light)) * 1%)); content: ''; height: 8%; width: 8%; background: -webkit-gradient(linear, left top, left bottom, from(calc(var(--rotation, 30) * 1deg)), color-stop(0%, var(--screw)), color-stop(45%, var(--screw)), color-stop(45%, var(--screw-dark)), color-stop(55%, var(--screw-dark)), color-stop(55%, var(--screw))); background: linear-gradient(calc(var(--rotation, 30) * 1deg), var(--screw) 0%, var(--screw) 45%, var(--screw-dark) 45%, var(--screw-dark) 55%, var(--screw) 55%); box-shadow: 0px 1px 0px 1px var(--screw-darkest) inset; border-radius: 50%; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); position: absolute; -webkit-transition: background var(--transition), box-shadow var(--transition); transition: background var(--transition), box-shadow var(--transition); } .switch__faceplate:after { --rotation: 120; right: 10%; } .switch__faceplate:before { left: 10%; } .switch__button { height: 35%; width: 35%; border: 0; background: var(--faceplate); border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); outline: transparent; padding: 0; cursor: pointer; -webkit-transition: background var(--transition); transition: background var(--transition); } .switch__button:before { content: ''; height: 99%; width: 99%; background: var(--faceplate-dark); position: absolute; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) translate(0, calc((10 - (var(--pressed) * 10)) * 1px)); transform: translate(-50%, -50%) translate(0, calc((10 - (var(--pressed) * 10)) * 1px)); -webkit-transition: background var(--transition), -webkit-transform var(--transition); transition: background var(--transition), -webkit-transform var(--transition); transition: transform var(--transition), background var(--transition); transition: transform var(--transition), background var(--transition), -webkit-transform var(--transition); z-index: -1; } .switch__button-face { border: 4px solid var(--faceplate-light); height: 100%; width: 100%; background: var(--faceplate); border-radius: 100%; -webkit-transform: rotate(calc(var(--rotation, 0) * 1deg)); transform: rotate(calc(var(--rotation, 0) * 1deg)); -webkit-transition: background var(--transition); transition: background var(--transition); } .switch__button-dim-marker { position: absolute; left: 50%; height: 44px; width: 44px; border-radius: 50%; top: 10%; -webkit-transform: translate(-50%, -90%); transform: translate(-50%, -90%); cursor: var(--cursor, 'grab'); } .switch__button-dim-marker:after { content: ''; background: hsl(0, 100%, calc((0 + var(--light).........完整代码请登录后点击上方下载按钮下载查看
网友评论0