纯css实现巧克力checkbox点击效果
代码语言:html
所属分类:表单美化
代码描述:纯css实现巧克力checkbox点击效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap'); * { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; } *:focus { outline: none; } html, body { height: 100%; margin: 0; padding: 0; } .container { height: 100%; background: #f4f4f4; display: flex; justify-content: center; align-items: center; flex-direction: column; } .title { height: 25%; font-family: Cookie; font-size: 48pt; text-align: center; } .switch { --cookie-size: 6em; --outer-border: 0.5em; --inner-border: 1.0em; --border-color: #d8a04d; --height: calc(var(--cookie-size) + (2 * (var(--outer-border) + var(--inner-border)))); --width: calc(var(--height) * 2); position: relative; width: var(--width); height: var(--height); } .switch input { display: none; } .switch label { cursor: pointer; } .switch input:checked ~ .cookie { transform: translateX(calc(var(--width) / 2)) rotate(360deg); color: #d8a04d; background-color: currentColor; } .switch input:checked ~ .cookie span[class^="cookie-part-"], .switch input:checked ~ .cookie span[class^="chocolate-chips-"] { transform: translate(0px, 0px); } .background { height: 100%; border-radius: calc(var(--width) / 4); border: var(--outer-border) solid var(--border-color); background: linear-gradient(to right, #484848 0%,#202020 100%); } .cookie { --chip-size: calc(var(--cookie-size) / 8); --split-offset: calc(var(--cookie-size) / 24); position: absolute; top: calc(var(--outer-border) + var(--inner-border)); left: calc(var(--outer-border) + var(--inner-border));; width: var(--cookie-size); height: var(--cookie-size); border-radius: 50%; transition: transform 1s linear; } .cookie span[class^="cookie-part-"] { position: absolute; width: 100%; height: 100%; border-radius: 50%; color: #d8a04d; background-color: currentColor; } .cookie-part-1 { clip-path: polygon(0% 0%, 55% 0%, 52% 8%, 55% 10%, 55% 16%, 52% 19%, 52% 24%, 47% 26%, 45% 30%, 50% 33%, 47% 37%, 47% 42%, 51% 47%, 47% 49%, 40% 50%, 34% 50%, 30% 53%, 25% 53%, 20% 56%, 16% 56%, 14% 61%, 0% 60%); transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * -1)); } .cookie-part-2 { clip-path: polygon(55% 0%, 100% 0%, 100% 72%, 88% 68%, 84% 61%, 78% 60%, 77% 56%, 75% 53%, 71% 55%, 66% 50%, 63% 47%, 58% 49%, 56% 44%, 51% 47%, 47% 42%, 47% 37%, 50% 33%, 45% 30%, 47% 26%, 52% 24%, 52% 19%, 55% 16%, 55% 10%, 52% 8%); transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * -1)); } .cookie-part-3 { clip-path: polygon(0% 60%, 14% 61%, 16% 56%, 20% 56%, 25% 53%, 30% 53%, 34% 50%, 40% 50%, 47% 49%, 51% 47%, 55% 53%, 60% 56%, 56% 62%, 53% 67%, 57% 72%, 57% 81%, 57% 87%, 63% 92%, 60% 100%, 0% 100%); transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * 1)); } .cookie-part-4 { clip-path: polygon(100% 100%, 100% 72%, 88% 68%, 84% 61%, 78% 60%, 77% 56%, 75% 53%, 71% 55%, 66% 50%, 63% 47%, 58% 49%, 56% 44%, 51% 47%, 55% 53%, 60% 56%, 56% 62%, 53% 67%, 57% 72%, 57% 81%, 57% 87%, 63% 92%, 60% 100%); transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * 1)); } .cookie span[class^="chocolate-chips-"] { p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0