div+css实现 代办事项列表点击划掉打对号效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现 代办事项列表点击划掉打对号效果代码
代码标签: div css 代办事项 列表 点击 划掉 打对号
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <title>BFW NEW PAGE</title> <style> body{ padding: 100px; } #checklist { --background: #fff; --text: #414856; --check: #4f29f0; --disabled: #c3c8de; --width: 100px; --height: 180px; --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 85px; display: grid; grid-template-columns: 30px auto; align-items: center; justify-content: center; } #checklist label { color: var(--text); position: relative; cursor: pointer; display: grid; align-items: center; width: fit-content; transition: color 0.3s ease; margin-right: 20px; } #checklist label::before, #checklist label::after { content: ""; position: absolute; } #checklist label::before { height: 2px; width: 8px; left: -27px; background: var(--check); border-radius: 2px; transition: background 0.3s ease; } #checklist label:after { height: 4px; width: 4px; top: 8px; left: -25px; border-radius: 50%; } #checklist input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; position: relative; height: 15px; width: 15px; outline: none; border: 0; margin: 0 15px 0 0; cursor: pointer; background: var(--background); display: grid; align-items: center; margin-right: 20px; } #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%; transform-origin: right bottom; } #checklist input[type="checkbox"]::after { width: 0px; left: 40%; transform-origin: left bottom; } #checklist input[type="checkbox"]:checked::before { animation: check-01 0.4s ease forwards; } #checklist input[type="checkbox"]:checked:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0