css实现放射图纹背景效果代码-html代码-BFW代码库

css实现放射图纹背景效果代码

代码语言：html

所属分类：背景

代码描述：css实现放射图纹背景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
body {
  background: #0a0a0a;
}

figure {
  width: 66.6666vmin;
  transform: translate(calc(50vw - 33.3333vmin), calc(50vh - 33.3333vmin));
}

div {
  display: inline-block;
  padding: 11.1111vmin;
  vertical-align: top;
  border-radius: 0 0 50% 50%;
}
div:nth-child(1) {
  background: conic-gradient(transparent, #9e0142, #d13b4b, #f0704a, #fcab63, #fedc8c, #fbf8b0, #e0f3a1, #aadda2, #69bda9, #4288b5, #4288b5);
  transform: rotate(90deg) scale(0.9);
}
div:nth-child(2) {
  background: conic-gradient(transparent, #9e0142, #d13b4b, #f0704a, #fcab63, #fedc8c, #fbf8b0, #e0f3a1, #aadda2, #69bda9, #4288b5, #4288b5);
  transform: rotate(180deg) scale(0.9);
}
div:nth-child(3) {
  background: conic-gradient(transparent, #9e0142, #d13b4b, #f0704a, #fcab63, #fedc8c, #fbf8b0, #e0f3a1, #aadda2, #69bda9, #4288b5, #4288b5);
  transform: rotate(270deg) scale(0.9);
}
div:nth-child(4) {
  background: conic-gradient(transparent, #9e0142, #d13b4b, #f0704a, #fcab63, #fedc8c, #fbf8b0, #e0f3a1, #aadda2, #69bda9, #4288b5, #4288b5);
  transform: rotate(360deg) scale(0.9);
}
div:nth-child(5) {
  background: conic-gradient(transparent, #9e014.........完整代码请登录后点击上方下载按钮下载查看