css实现点击振动反馈的胶囊开关切换按钮效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现点击振动反馈的胶囊开关切换按钮效果代码
代码标签: css 点击 振动 反馈 胶囊 开关 切换 按钮
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --displacement: -0.1rem; --tremble: -10deg; --trembleF: 5deg; --iPos: 50%; --bPos: -75%; --fPos: -50%; } body { display: grid; height: 100vh; margin: 0; background: #212121; } .switch { margin: auto; } .switch__wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 4rem; height: 2rem; border: 2px solid red; border-radius: 99rem; transform-origin: left center; animation: checked__wrapper 380ms ease-in forwards; mix-blend-mode: lighten; } .switch__wrapper::before, .switch__wrapper::after { content: ""; position: absolute; width: 100%; height: 100%; border: 2px solid #000; border-radius: inherit; transform-origin: inherit; animation: inherit; mix-blend-mode: inherit; } .switch__wrapper::before { --tremble: -12deg; --trembleF: -7deg; border-color: lime; animation-delay: 50ms; } .switch__wrapper::after { --tremble: -8deg; --trembleF: -4deg; border-color: blue; animation-delay: 75ms; } .switch__toggle { width: 1.5rem; height: 1.5rem; border-radius: 99rem; box-shadow: inset 0 0 0 2px #fff; transform-origin: inherit; animation: checked__toggle 380ms ease-in forwards; } input:checked + .switch__wrapper { transform-origin: right center; animation-name: checked__wrapper--r; } input:checked + .switch__wrapper .switch__toggle { background: #fff; animation-name: checked__toggle--r; } @keyframes checked__wrapper { 0%, 45%, 100% { transform: rotateY(0deg); } 48% { transform: transla.........完整代码请登录后点击上方下载按钮下载查看
网友评论0