svg+css电源开关按钮点击动画效果代码
代码语言:html
所属分类:布局界面
代码描述:svg+css电源开关按钮点击动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --offHue: 3; --onHue: 123; --bg: hsl(var(--hue),10%,50%); --fg: hsl(var(--hue),10%,10%); --off1: hsl(var(--offHue),90%,25%); --off2: hsl(var(--offHue),90%,40%); --off3: hsl(var(--offHue),90%,50%); --off4: hsl(var(--offHue),90%,65%); --on1: hsl(var(--onHue),90%,15%); --on2: hsl(var(--onHue),90%,30%); --on3: hsl(var(--onHue),90%,40%); --on4: hsl(var(--onHue),90%,55%); font-size: calc(60px + (90 - 60) * (100vw - 320px) / (1280 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0