css+js实现圆形checkbox复选框效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现圆形checkbox复选框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { background-color: #111; color: #fff; display: grid; place-items: center; height: 100vh; width: 100vw; } .checkyborder { width: 100px; height: 100px; border-radius: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; } .ischecked { background: conic-gradient(from var(--angle), #00bfff 1%, #800080 40%, #ff69b4 65%, #00f 80%, #00bfff 85% /* Sky Blue */); } .checky { width: 80px; height: 80px; appearance: none; border-radius: 100%; box-shadow: inset 0 0 5px rgba(0,0,0,0.5); display: flex; background: #111; justify-content: center; align-items: center; z-index: 10; } .checky:checked:after { content: '\2714'; width: 100%; height: 100%; border-radius: 8px; position: absolute; color: #87ceeb; display: flex; justify-content: center; align.........完整代码请登录后点击上方下载按钮下载查看
网友评论0