css实现咖啡开关切换checkbox效果代码
代码语言:html
所属分类:其他
代码描述:css实现咖啡开关切换checkbox效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: grid; place-items: center; overflow: hidden; margin: 0; height: 100vh; background: #963; } .coffee { font-size: 0.75rem; appearance: none; position: relative; width: 20em; height: 9em; background: #eee8; border-radius: 20em; &::before { content: ""; width: 7em; aspect-ratio: 1; position: absolute; border-radius: 50%; top: 50%; left: 23%; transform: translate(-50%, -50%) rotate(0); background-image: linear-gradient(#210 0 0), radial-gradient(farthest-side, #0000 90%, #fff 0 99%, #0000), radial-gradient(farthest-side, #642 99%, #0000), radial-gradient(farthest-side, #210 99%, #0000), radial-gradient(farthest-side, #ddd 99%, #0000), linear-gradient(#fff 0 0), radial-gradient(farthest-side, #fff 99%, #0000), radial-gradient(farthest-side, #ddd 99%, #0000), radial-gradient(farthest-side, #0000 60%, #fff 0 99%, #0000); background-repeat: no-repeat; background-position: 50% 50%, 50% 50%, 50% 50%, 53% 50%, 54.5% 24.5%, 55% 27.5%, 55% 20%, 45% 15%, 50% 50% ; background-size: 1% 50%, 120% 120%, 44% 60%, 44% 60%, 0 0, 0 0, 0 0, 0 0, 0 0 ; background-color: #00f3; trans.........完整代码请登录后点击上方下载按钮下载查看
网友评论0