css+js实现225个checkbox拼凑出南瓜头效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现225个checkbox拼凑出南瓜头效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { display: grid; place-items: center; min-height: 100vh; background: #222; color: #888; text-align: center; font-family: sans-serif; font-size: 12px; --block-size: calc(50vmin / 15); } #pumpkin { width: 50vmin; height: 50vmin; background: linear-gradient(to bottom, transparent calc(var(--block-size) - 1px), rgba(0,0,0,.25) var(--block-size)), linear-gradient(to right, transparent calc(var(--block-size) - 1px), rgba(0,0,0,.25) var(--block-size)), darkorange; background-size: var(--block-size) var(--block-size), var(--block-size) var(--block-size), auto auto; font-size: 0; position: relative; border-radius: 5rem; overflow: hidden; box-shadow: inset 0 0 50px #630, 0 10px 20px rgba(0,0,0,.8); } input { width: 5vmin; height: 5vmin; padding: 0; margin: 0; background: darkorange; position: relative; opacity: 1; display: inline-block; position: absolute; left: -9999px; left: -9999px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0