checkbox勾选带动画
![](https://img2022.cnblogs.com/blog/1482937/202206/1482937-20220625220955698-121428984.png)
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Checkbox复选框动画效果</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <input class="inp-cbx" id="morning" type="checkbox" style="display: none;"> <label class="cbx" for="morning"> <span> <svg width="12px" height="10px"> <use xlink:href="#check"></use> </svg> </span><span>Morning</span> </label> <input class="inp-cbx" id="noon" type="checkbox" style="display: none;"> <label class="cbx" for="noon"> <span> <svg width="12px" height="10px"> <use xlink:href="#check"></use> </svg> </span><span>Noon</span> </label> <input class="inp-cbx" id="afternoon" type="checkbox" style="display: none;"> <label class="cbx" for="afternoon"> <span> <svg width="12px" height="10px"> <use xlink:href="#check"></use> </svg> </span><span>Afternoon</span> </label> <input class="inp-cbx" id="evening" type="checkbox" style="display: none;"> <label class="cbx" for="evening"> <span> <svg width="12px" height="10px"> <use xlink:href="#check"></use> </svg> </span><span>Evening</span> </label> <!--SVG Sprites--> <svg class="inline-svg"> <symbol id="check" viewBox="0 0 12 10"> <polyline points="1.5 6 4.5 9 10.5 1"></polyline> </symbol> </svg> </body> </html>
* { box-sizing: border-box; } .cbx { -webkit-user-select: none; user-select: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; overflow: hidden; transition: all 0.2s ease; } .cbx:not(:last-child) { margin-right: 6px; } .cbx:hover { background: rgba(125,100,247,0.06); } .cbx span { float: left; vertical-align: middle; transform: translate3d(0, 0, 0); } .cbx span:first-child { position: relative; width: 18px; height: 18px; border-radius: 4px; transform: scale(1); border: 2px solid #c8ccd4; transition: all 0.2s ease; } .cbx span:first-child svg { position: absolute; top: 2px; left: 1px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: 16px; transition: all 0.3s ease; transition-delay: 0.1s; transform: translate3d(0, 0, 0); } .cbx span:last-child { padding-left: 8px; line-height: 18px; } .cbx:hover span:first-child { border-color: #7d64f7; } .inp-cbx:checked + .cbx span:first-child { background: #7d64f7; border-color: #7d64f7; animation: wave 0.4s ease; } .inp-cbx:checked + .cbx span:first-child svg { stroke-dashoffset: 0; } body { font-family: "Open Sans", sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; color: #223254; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .inline-svg { position: absolute; width: 0; height: 0; pointer-events: none; user-select: none; } @media screen and (max-width: 640px) { body { width: auto; display: inherit; padding: 20px; } .cbx { width: 100%; margin-bottom: 4px; display: inline-block; } } @-moz-keyframes wave { 50% { transform: scale(0.9); } } @-webkit-keyframes wave { 50% { transform: scale(0.9); } } @-o-keyframes wave { 50% { transform: scale(0.9); } } @keyframes wave { 50% { transform: scale(0.9); } }
作者:子钦加油
出处:https://www.cnblogs.com/zmdComeOn/
个性签名:努力生活,努力走路
阿里云拼团:https://www.aliyun.com/1111/home?userCode=f4ee1llo1核2G1M,86一年,229三年;2核4G5M,799三年;2核8G5M,1399三年
腾讯云三月采购计划特价:https://cloud.tencent.com/act/cps/redirect?redirect=1073&cps_key=15d0b1673287c43fe946626d9f4e2eee&from=console1核2G1M,88一年;1核2G1M,268三年;2核4G5M,998一年;4核8G5M,2888元三年
出处:https://www.cnblogs.com/zmdComeOn/
个性签名:努力生活,努力走路
阿里云拼团:https://www.aliyun.com/1111/home?userCode=f4ee1llo1核2G1M,86一年,229三年;2核4G5M,799三年;2核8G5M,1399三年
腾讯云三月采购计划特价:https://cloud.tencent.com/act/cps/redirect?redirect=1073&cps_key=15d0b1673287c43fe946626d9f4e2eee&from=console1核2G1M,88一年;1核2G1M,268三年;2核4G5M,998一年;4核8G5M,2888元三年