css实现萤火虫展开翅膀亮checkbox美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现萤火虫展开翅膀亮checkbox美化效果代码
代码标签: css 萤火虫 翅膀 亮 checkbox 美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; background: radial-gradient(#0a2a43 30%, #09243a); font-family: "Asap", sans-serif; } body:after { content: ""; display: block; position: absolute; top: 1rem; right: 1rem; bottom: 1rem; left: 1rem; border: 4px solid #071c2d; border-radius: 2px; background: none; pointer-events: none; } .label { flex: 0; color: #b8c5d0; letter-spacing: 0.04em; text-align: center; margin-bottom: 2rem; font-size: 3rem; } @media screen and (min-width: 60rem) { .label { font-size: 5vw; } } .checkbox-wrap { flex: none; position: relative; width: 10%; min-width: 8rem; z-index: 1; } .checkbox-wrap:after { content: ""; display: block; padding-top: 50%; } .checkbox { display: none; } .checkbox:checked ~ .firefly .abdomen { background: #27231e; box-shadow: inset 0 0 1.5rem rgba(150, 0, 0, 0.75); animation: flicker 4000ms ease infinite; } .checkbox:checked ~ .firefly .wing-a { transform: rotate(30deg); } .checkbox:checked ~ .firefly .wing-b { transform: rotate(-30deg); } .head { position: absolute; top: 15%; left: 60%; bottom: 15%; background: #27231e; width: 70%; border-radius: 40% 80% 80% 40%; box-shadow: inset -0.1rem 0 0 0.3rem rgba(14, 10, 10, 0.2); } .eyes { position: absolute; top: -5%; right: 10%; bottom: -5%; width: 35%; } .eyes:before, .eyes:after { content: ""; display: block; position: absolute; right: 0; width: 100%; box-sizing: border-box; border-radius: 100%; background: #0e0a0a; padding-top: 100%; } .eyes:before { top: 0; } .eyes:after { bottom: 0; } .antennae { position: absolute; top: 20%; left: -150%; bottom: 20%; width: 400%; z-index: -1; } .antennae:before, .antennae:after { content: ""; display: block; position: absolute; right: 0; width: 100%; box-sizing: border-box; border-color: #0e0a0a; border-style: solid; padding-top: 65%; border-width: 0.25rem 0.25rem 0.25rem 0; } .antennae:before { top: 80%; border-radius: 0 100% 100% 100%; } .antennae:after { bottom: 80%; border-radius: 100% 100% 100% 0; } .thorax { position: absolute; top: 0; left: 100%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0