css实现闪动塑料开关切换checkbox效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现闪动塑料开关切换checkbox效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { width: 100%; height: 100%; } body { background-color: #fafcff; background-image: radial-gradient(circle, transparent, #afb5bf), linear-gradient(transparent, #d3d8e0); display: flex; align-items: center; justify-content: center; } .switch { background-color: black; width: 150px; height: 195px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black; border-radius: 5px; padding: 20px; perspective: 700px; } .switch input { display: none; } .switch input:checked + .button { transform: translateZ(20px) rotateX(25deg); box-shadow: 0 -10px 20px #ff0202; } .switch input:checked + .button .light { animation: flicker 0.2s infinite 0.3s; } .switch input:checked + .button .shine { opacity: 1; } .switch input:checked + .button .shadow { opacity: 0; } .switch .button { transition: all 0.3s cubic-bezier(1, 0, 1, 1); transform-origin: center center -20px; transform: translateZ(20px) rotateX(-25deg); transform-style: preserve-3d; background-color: #9b0621; width: 100%; height: 100%; position: relative; cursor: pointer; background: linear-gradient(#9b0621 0%, #6d0719 30%, #6d0719 70%, #9b0621 100%); background-repeat: no-repeat; } .switch .button::before { content: ""; background: linear-gradient(rgba(255, 255, 255, 0.8) 20%, #650c1d 55%, #3c0610) 50% 50%/97% 97%, #9b0621; background-repeat: no-repeat; width: 100%; height: 50px; transform-origin: top; transform: rotateX(-90deg); position: absolute; top: 0; } .switch .button::after { content: ""; background-image: linear-gradient(#650c1d, #3c0610); width: 100%; height: 50px; transform-origin: top; transform: translateY(50px) rotateX(-90deg); position: absolute; bottom: 0; box-shadow: 0 50px 8px 0px black, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0