div+css布局实现多彩发散线条效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现多彩发散线条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { background-size: cover; background: linear-gradient(20deg, #392556, #200c53 70%); height: 100%; } .circle { width: 800px; height: 800px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 100%; } .slice { width: 100%; height: 100%; position: absolute; overflow: hidden; transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--offset, 0) * 1deg)); transform-origin: 50% 100%; } .slice:before { width: 100%; height: 100%; background: radial-gradient( circle at 50% 0%, var(--color1, transparent) 0, var(--color1, transparent) 5.5%, var(--color2, transparent) 5.5%, var(--color2, transparent) 11.5%, var(--color3, transparent) 11.5%, var(--color3, transparent) 18%, var(--color4, transparent) 18%, var(--color4, transparent) 24%, var(--color5, transparent) 24%, var(--color5, transparent) 30.5%, var(--color6, transparent) 30.5%, var(--color6, transparent) 38%, var(--color7, transparent) 38%, var(--color7, transparent) 100% ); content: ""; position: absolute; transform: translate(0, 100%) rotate(calc(var(--value, 45) * 1deg)); transform-origin: 50% 0; } </style> <body> <div class="circle"> <!-- NO --> <div class="slice" style="--color1: #fc0000; --color2: #fc0000; --color3: #fc0000; --color4: #fc0000; --offset:14; --value: 6;"></div> <div class="slice" style="--color1: #0750c6; --color2: #0750c6; --color3: #0750c6; --color4: #0750c6; --offset:19; --value: 6;"></div> <!-- DK, SE, FI --> <div class="slice" style="--color1: #fc0000; --color2: #fc0000; --color3: #fc0000; --color4: #0750c6; --color5: #0750c6; --color6: #fff; --offset: 46; --value: 6;"></div> <div class="slice" style="--color1: #fff; --color2: #fff; --color3: #fff; --color4: #ffc832; --color5: #ffc832; --color6: #1ac0f8; --offset: 51; --value: 6;"></div> <!-- LV, EE --> <div class="slice" style="--color1: #be0000; --color2: #be0000; --color3: #be0000; --color4: #be0000; --color5: #be0000; --color6: #000; --offset: 57; --value: 6;"></div> <div class="slice" style="--color1: #fff; --color2: #fff; --color3: #fff; --color4: #fff; --color5: #fff; --color6: #0850c6; --offset: 63; --value: 6;"></div> <!-- LT --> <div class="slice" style="--color1: #ffc732; --color2: #ffc732; --color3: #ffc732; --color4: #ffc732; --color5: #ffc732; --offset: 68; --value: 6;"></div> <div class="slice" style="--color1: #01a95b; --color2: #01a95b; --color3: #01a95b; --color4: #01a95b; --color5: #01a95b; --offset: 73; --value: 6;"></div> <!-- DE, BY, RU --> <div class="slice" style="--color1: #000; --color2: #000; --color3: #fc0000; --color4: #fc0000; --color5: #fc0000; --color6: #fc0000; --color7: #fff; --offset: 79; --value: 6;"></div> <div class="slice" style="--color1: #fc0000; --color2: #fc0000; --color3: #01a95b; --color4: #01a95b; --color5: #01a95b; --color6: #01a95b; --color7: #fc0000; --offset: 84; --value: 6;"></div> <!-- PL, UA --> <div class="slice" style="--color1: #fff; --color2: #fff; --color3: #fff; --color4: #fff; --color5: #1ac0f8; --color6: #1ac0f8; --offset: 90; --value: 6;"></div> <div class="slice" style="--color1: #fc0000; --color2: #fc0000; --color3: #fc0000; --color4: #fc0000; --color5: #ffc732; --color6: #ffc732; --offset: 95; --value: 6;"></div> <!-- CZ, MD, GE, AZ --> <div class="slice" style="--color1: #fff; --color2: #fff; --color3: #fff; --color4: #1ac0f8; --color5: #1ac0f8; --color6: #fff; --color7: #1ac0f8; --offset: 100; --value: 6;"></div> <div class="slice" style="--color1: #fc0000; --color2: #fc0000; --color3: #fc0000; --color4: #fc0000; --color5: #fc0000; --color6: #fc0000; --color7: #01a95b; --offset: 105; --value: 6;"></div> <!-- AT, RO, AM --> <div class="slice" style="--color1: #fc0000; --color2: #fc0000; --.........完整代码请登录后点击上方下载按钮下载查看
网友评论0