div+css布局实现四角径向渐变漩涡效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现四角径向渐变漩涡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @layer demo { .demo { --color1HSL: 180 100% 50%; --color2HSL: 330 100% 50%; --color3HSL: 270 100% 50%; --color4HSL: 100 100% 50%; --size: 75vmin; --space:; inline-size: var(--size); block-size: var(--size); background: white; background-image: radial-gradient( calc(var(--size) * .75) circle at top left var(--space), hsl(var(--color1HSL)), hsl(var(--color1HSL) / 0%) ), radial-gradient( calc(var(--size) * .75) circle at top right var(--space), hsl(var(--color2HSL)), hsl(var(--color2HSL) / 0%) ), radial-gradient( .........完整代码请登录后点击上方下载按钮下载查看
网友评论0