css美化checkbox实现火柴点燃开关效果代码
代码语言:html
所属分类:布局界面
代码描述:css美化checkbox实现火柴点燃开关效果代码
代码标签: css 美化 checkbox 实现 火柴 点燃 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; margin: 0; min-height: 100vh; font-size: 6rem; background: #352c37; } @keyframes burn { 0%, 100% { border-radius: 5% 87% 45% 85%; width: 30em; } 10% { border-radius: 5% 85% 49% 82%; } 20% { border-radius: 0% 85% 45% 87%; width: 31em; } 30%, 90% { border-radius: 5% 85% 49% 82%; } 40% { border-radius: 0% 85% 45% 87%; width: 32em; } 50% { border-radius: 2% 87% 42% 90%; } 60% { border-radius: 5% 97% 45% 88%; } 70% { border-radius: 2% 87% 42% 90%; width: 31em} 80% { border-radius: 5% 97% 45% 88%; } } .toggle { appearance: none; position: relative; font-size: 1em; width: 3em; aspect-ratio: 2.5; border: max(1px, 0.05em) solid #000; border-radius: 100vmax; background: #0002; &::before { content: ""; position: absolute; box-sizing: border-box; width: 0.25em; height: 0.925em; -webkit-mask: radial-gradient(40% 18% at 50% 14.5%, #000 80%, #0000 0), conic-gradient(at 50% -50%, #0000 179deg, #000 0 181deg, #0000 0); top: 50%; left: 23%; transform: translate(-50%, -50%) translate(0em) rotate(0deg); transition: transform 0.5s; border-radius: 100% / 20%; background: red; transition-delay: 0.5s, 0.5s; background: radial-gradient(circle at 55% 8%, #fee4, #fff0 10%), radial-gradient(40% 18% at 50% 14.5%, #0000 30%, #0004 80%, #0000 0), radial-gradient(40% 18% at 50% 14.5%, crimson 80%, #0000 0), conic-gradient(at 50% -50%, #0000 180.1deg, #0005 181deg), linear-gradient(#d68356 15%, #966336) } &::after { animation: burn 4s infinite; content: ""; opacity: 0; transition: opacity 0.25s, transform 0.25s; transition-delay: 0s; font-size: 0.015em; width: 30em; aspect-ratio: 1; backg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0