checkbox美化点击动画选中效果代码
代码语言:html
所属分类:表单美化
代码描述:checkbox美化点击动画选中效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } .checkbox { background: white; display: block; font-size: 10vmin; width: 1em; height: 1em; border: solid 2px grey; position: relative; cursor: pointer; } .checkbox > input { opacity: 0; position: absolute; } .check { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: -3px; -webkit-clip-path: polygon(0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%); clip-path: polygon(0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%); border: solid 4px hotpink; transition: 0.4s cubic-bezier(0.8, 0, 0.2, 1); transition-property: background-color, border-color, -webkit-clip-path; transition-property: background-color, clip-path, border-color; transition-property: background-color, clip-path, border-color, -webkit-clip-path; transition-delay: 0.1s, 0s; } input:checked + .check { background-color: hotpink; border-color: transparent; transition-delay: 0s; -webkit-clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%); clip-path: polygon(28% 38%, 41%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0