div+css布局实现16个桌球台球效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现16个桌球台球效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@600&display=swap'); :root{ --color-yellow: hsl(50 100% 50%); --color-blue: hsl(225 100% 50%); --color-red: hsl(0 100% 50%); --color-violet: hsl(275 100% 25%); --color-orange: hsl(25 100% 50%); --color-green: hsl(125 100% 25%); --color-maroon: hsl(10 100% 25%); --color-black: hsl(0 0% 5%); --color-white: hsl(0 0% 95%); } .billiard-balls { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .billiard-ball{ color: var(--color-black); font-family: 'Noto Serif', serif; font-size: 2rem; width: 8rem; aspect-ratio: 1/1; border-radius: 50%; display: grid; place-items: center; text-decoration: var(--line, none); box-shadow: -1rem 1rem 1rem hsl(0 0% 0% / .5); --_s1: calc(var(--_stripe, 0) * 20%); --_s2: calc(100% - var(--_stripe, 0) * 20%); --grad-highlight: radial-gradient(100% 100% at 70% 15%, hsl(0 0% 100%/.5), hsl(0 0% 100%/.2) 10%, hsl(0 0% 0%/.6) 60%, hsl(0 0% 0%/.9)); --grad-cirle: radial-gradient(100% 100%, var(--color-white) 25%, #0000 calc(25% + 1px)); --grad-stripe: linear-gradient(90deg, #0000 calc(var(--_s1) - 1px), var(--_color, #0000) var(--_s1) var(--_s2), #0000 calc(var(--_s2) + 1px)); background-color: var(--color-white); background-image: var(--grad-highlight), var(--grad-cirle), var(--grad-stripe); } .billiard-ball[data-pool="1" ] { --_color: var(--color-yellow); } .billiard-ball[data-pool="2" ] { --_color: var(--color-blue ); } .billiard-ball[data-pool="3" ] { --_color: var(--color-red ); } .billiard-ball[data-pool="4" ] { --_color: var(--color-violet); } .billiard-ball[data-pool="5" ] { --_color: var(--color-orange); } .billiard-ball[data-pool="6" ] { --_color: var(--color-green ); --line: underline;} .billiard-ball[data-pool="7" ] { --_color: var(--color-maroon); } .billiard-ball[data-pool="8" ] { --_color: var(--color-black ); } .billiard-ball[data-pool="9" ] { --_color: var(--color-yellow); --_stripe: 1; --line: u.........完整代码请登录后点击上方下载按钮下载查看
网友评论0