css实现点状线状渐变效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现点状线状渐变效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } :root { --clr1: #eee; --clr2: #4A148C; } body { font-family: "Open Sans", sans-serif; background-color: #000; color: #fff; padding: 6em 2em; } .content { width: 100%; max-width: 550px; counter-reset: count; } .dotsDashes { position: relative; width: 100%; height: 12em; margin: 4em auto; } .dotsDashes::before { counter-increment: count; content: "#" counter(count); color: #777; position: absolute; top: -1.5em; left: 0; } .pattern1 { background-size: 3em 1.5em; background-image: radial-gradient(circle at 50% 50%, var(--clr2) 12%, var(--clr1) 12% 36%, transparent 18%), linear-gradient(var(--clr1) 40%, var(--clr2) 40% 60%, var(--clr1) 60%); } .pattern2 { background-size: 3em 3em; background-image: radial-gradient(circle at 25% 25%, var(--clr2) 6%, var(--clr1) 6% 18%, transparent 18%), radial-gradient(circle at 75% 75%, var(--clr2) 6%, var(--clr1) 6% 18%, transparent 18%), linear-gradient(90deg, var(--clr1) 20%, var(--clr2) 20% 30%, var(--clr1) 30% 70%, var(--clr2) 70% 80%, var(--clr1) 80%); } .pattern3 { background-size: 3em 3em; background-image: radial-gradient(circle at 75% 75%, var(--clr2) 6%, var(--clr1) 6% 18%, transparent 18%), linear-gradient(180deg, transparent 70%, var(--clr2) 70% 80%, transparent 80%), linear-gradient(90deg, var(--clr1) 70%, var(--clr2) 70% 80%, var(--clr1) 80%); } .pattern4 { background-size: 3em 3em; background-image: linear-gradient(var(--clr1), transparent), radial-gradient(circle at 25% 25%, var(--clr2) 6%, var(--clr1) 6% 18%, transparent 18%), radial-gradient(circle at 75% 75%, var(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0