选择框checkbox选择与反选美化动画效果
代码语言:html
所属分类:表单美化
代码描述:通过css的设置,让原生的checkbox样式 变得更加美丽,动态交互效果跟人性化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Varela+Round&display=swap'> <style> #checklist { --background: #ffffff; --text: #414856; --check: #4F29F0; --disabled: #C3C8DE; --width: 100px; --height: 140px; --border-radius: 10px; background: var(--background); width: var(--width); height: var(--height); border-radius: var(--border-radius); position: relative; box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); padding: 30px 45px; display: grid; grid-template-columns: 30px auto; -webkit-box-align: center; align-items: center; } #checklist label { color: var(--text); position: relative; cursor: pointer; display: grid; -webkit-box-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-transition: color .3s ease; transition: color .3s ease; } #checklist label::before { position: absolute; content: ""; height: 2px; width: 8px; left: -27px; background: var(--check); border-radius: 2px; -webkit-transition: background .3s ease; transition: background .3s ease; } #checklist label:after { position: absolute; content: ""; height: 4px; width: 4px; left: -25px; border-radius: 50%; } #checklist input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; position: relative; height: 15px; width: 15px; outline: none; margin: 0 15px 0 0; cursor: pointer; background: var(--background); display: grid; -webkit-box-align: center; align-items: center; } #checklist input[type="checkbox"]::before, #checklist input[type="checkbox"]::after { content: ""; position: absolute; height: 2px; top: auto; background: var(--check); border-radius: 2px; } #checklist input[type="checkbox"]::before { width: 0px; right: 60%; -webkit-transform-origin: right bottom; transform-origin: right bottom; } #checklist input[type="checkbox"]::after { width: 0px; left: 40%; -webkit-transform-origin: left bottom; transform-origin: left bottom; } #checklist input[type="checkbox"]:checked::before { -webkit-animation: check-01 .4s ease forwards; animation: check-01 .4s ease forwards; } #checklist input[type="checkbox"]:checked::after { -webkit-animation: check-02 .4s ease forwards; animation: check-02 .4s ease forwards; } #checklist input[type="checkbox"]:checked + label { color: var(--disabled); -webkit-animation: move .3s ease .1s forwards; animation: move .3s ease .1s forwards; } #checklist input[type="checkbox"]:checked + label::before { background: var(--disabled); -webkit-animation: slice .4s ease forwards; animation: slice .4s ease forwards; } #checklist input[type="checkbox"]:checked + label::after { -webkit-animation: firework .5s ease forwards .1s; animation: firework .5s ease forwards .1s; } @-webkit-keyframes move { 50% { padding-left: 8px; padding-right: 0px; } 100% { padding-right: 4px; } } @keyframes move { 50% { padding-left: 8px; padding-right: 0px; } 100% { padding-right: 4px; } } @-webkit-keyframes slice { 60% { width: 100%; left: 4px; } 100% { width: 100%; left: -2px; padding-left: 0; } } @keyframes slice { 60% { width: 100%; left: 4px; } 100% { width: 100%; left: -2px; padding-left: 0; } } @-webkit-keyframes check-01 { 0% { width: 4px; top: auto; -webkit-transform: rotate(0); transform: rotate(0); } 50% { width: 0px; top: auto; -webkit-transform: rotate(0); transform: rotate(0); } 51% { width: 0px; top: 8px; -webkit-transform: rotate(45deg); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0