css布局实现一个立体质感灯泡开关checkbox效果代码
代码语言:html
所属分类:表单美化
代码描述:css布局实现一个立体质感灯泡开关checkbox效果代码
代码标签: 一个 立体 质感 灯泡 开关 checkbox 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #514878; } .switch { position: relative; } .switch input { height: 100%; width: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: 100; cursor: pointer; } .switch label { height: 110px; width: 220px; background-color: #39315a; border-radius: 100px; display: block; box-shadow: inset 0 0 20px rgba(0,0,0,0.2), inset 0 0 5px -2px rgba(0,0,0,0.4); } .switch label .bulb { height: 90px; width: 90px; background-color: #4a426b; border-radius: 50%; position: relative; top: 10px; left: 10px; display: block; transition: 0.7s; box-shadow: inset 0 0 1px 3px #4a426b, inset 0 0 6px 8px #423963, 0 20px 30px -10px rgba(0,0,0,0.4); } .switch label .bulb .bulb-center { position: absolute; display: block; height: 36px; width: 36px; background-color: #5a527b; border-radius: 50%; top: 50%; left: 50%; transition: 0.7s; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 4px #635a84; } .switch label .bulb .bulb-center:after { content: ""; display: block; height: 14px; width: 14px; background-color: #7b7394; border-radius: 50%; position: absolute; transition: 0.7s; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 2px 4px #524a73; } .switch label .bulb .filament-1, .switch label .bulb .filament-2 { position: absolute; display: block; height: 35px; width: 35px; border-radius: 50%; top: 50%; left: 50%; overflow: hidden; transform: translate(-50%, -50%) rotate(-45deg); } .switch label .bulb .filament-1:after, .switch label .bulb .filament-2:after, .switch label .bulb .filament-1:before, .switch label .bulb .filament-2:before { content: ""; display: block; height: 6px; width: 17px; border-radius: 50%; border: 2px solid #4a426b; position: absolute; transition: 0.7s; top: -4px; left: -2px; transform: rotate(-10deg); } .switch label .bulb .filament-1:before, .switch label .bulb .filament-2:before { left: 15px; transform: rotate(10deg); } .switch label .bulb .filament-2 { transform: translate(-50%, -50%) rotate(45deg) !important; } .reflections { height: 100%; width: 100%; display: block; border-radius: 50%; overflow: hidden; position: absolute; z-index: 90; perspective: 70px; } .reflections span { height: 80px; width: 80px; border-radius: 50%; background-image: linear-gradient(-135deg, transparent 10%, rgba(255,255,255,0.3)); position: absolute; left: -40px; bottom: -45px; } .reflections span:after { content: ""; display: block; height: 35px; width: 20px; position: absolute; top: -36px; right: -40px; border-radius: 50%; box-shadow: 4px -2px 0 -3px rgba(255,255,255,0.4); filter: blur(1px); transform: rotate(-10deg); } .reflections:after { content: ""; display: block; height: 80px; width: 50px; background-image: linear-gradient(80deg, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.5)); border-radius: 10% 20% 50% 30%/30% 60% 30% 40%; position: absolute; transform-style: preserve-3d; transform: rotateX(-25deg) rotate(-35deg) skewx(-15deg) translate(10px, -20px); top: -8px; left: -5px; } .reflections:before { content: ""; display: block; position: absolute; height: 10px; width: 30px; background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.15)); bottom: 10px; right: 0px; transform: rotate(45deg); } .sparks .spark1 { display: block; height: 1px; width: 1px; background-color: #d1b82b; position: absolute; right: -5px; border-radius: 50%; bottom: 23px; transition: 0.4s; opacity: 0; } .sparks .spark2 { display: block; height: 3px; width: 3px; background-color: #d1b82b; position: absolute; right: 20px; border-radius: 50%; bottom: 80px; transition: 0.4s; opacity: 0; } .sparks .spark3 { display: block; height: 3px; width: 3px; background-color: #d1b82b; position: absolute; left: 20px; border-radius: 50%; bottom: 80px; transition: 0.4s; opacity: 0; } .sparks .spark4 { display: block; height: 3px; width: 3px; background-color: #d1b82b; position: absolute; left: 20px; border-radius: 50%; bottom: 20px; transition: 0.4s; opacity: 0; } .switch input:checked ~ label .bulb {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0