纯css无div布局实现一个多彩蜗牛效果代码

代码语言:html

所属分类:布局界面

代码描述:纯css无div布局实现一个多彩蜗牛效果代码

代码标签: div 布局 实现 一个 多彩 蜗牛 效果

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body{
        
          background: 
              
              radial-gradient(40% 40% at 50% 50%, #8a2be2 47% , transparent 53%) 65em 23.5em/6.5em 4em,
              radial-gradient(40% 40% at 50% 50%, #8a2be2 47% , transparent 53%) 62.65em 25em/3.5em 5em,
              radial-gradient(40% 40% at 50% 50%, #8a2be2 47% , transparent 53%) 61.5em 29em/3em 5em,
              radial-gradient(40% 40% at 50% 50%, #8a2be2 47% , transparent 53%) 70.75em 25.75em/2.5em 4.5em,
              radial-gradient(40% 40% at 50% 50%, #8a2be2 47% , transparent 53%) 71.5em 29em/3em 5em,
              
              radial-gradient(40% 40% at 50% 50%, #ffb6c1 49% , transparent 51%) 65em 26em/8em 12em,
              radial-gradient(40% 40% at 50% 50%, #b22222 49% , transparent 51%) 64.75em 26em/10em 14em,
              radial-gradient(40% 40% at 50% 50%, #ffb6c1 49% , transparent 51%) 61em 22.85em/15.5em 23em,
              radial-gradient(40% 40% at 50% 50%, #b22222 49% , transparent 51%) 59em 19em/18em 28em,
              
              radial-gradient(40% 40% at 50% 50%, #9cd8ff 49% , transparent 51%) 60.75em 25.25em/3em 1em,
              radial-gradient(40% 40% at 50% 50%, #9cd8ff 49% , transparent 51%) 55.25em 25.25em/3em 1em,
              
              radial-gradient(40% 40% at bottom, #9cd8ff 49% , transparent 51%) 54.25em 18em/8em 8em,
              radial-gradient(40% 40% at bottom, #9cd8ff 49% , transparent 51%) 56.75em 18em/8em 8em,
              
              radial-gradient(40% 40% at top, #000 49% , transparent 51%) 59em 25.85em/3em 3em,
              radial-gradient(40% 40% at top, #000 49% , transparent 51%) 56.75em 25.85em/3em 3em,
              
              radial-gradient(40% 40% at top, #ff0000 49% , transparent 51%) 58em 25.75em/5em 5em,
              radial-gradient(40% 40% at top, #ff0000 49% , transparent 51%) 55.65em 25.75em/5em 5em,
              
              radial-gradient(40% 40% at 50% 50%, #f1ff62 49% , transparent 51%) 56.75em 22em/8em 8em,
              radial-gradient(40% 40% at 50% 50%, #f1ff62 49% , transparent 51%) 54.25em 22em/8em 8em,
              
              radial-gradient(40% 40% at 50% 50%, #9cd8ff 49% , transparent 51%) 55.25em 35.25em/13.5em 5.5em,
              linear-gradient(90deg , #9cd8ff 50% , transparent 50%) 60em 27em/ 1.5em 10em,
              radial-gradient(40% 40% at 50% 50%, #ffb6c1 49% , transparent 51%) 50em 10em/35em 40em,
              radial-gradient(40% 40% at 50% 50%, #ffb6c1 49% , transparent 51%) 50em 33em/35em 8em,
              linear-gradient(90deg , #9cd8ff 50% , transparent 50%) 58.25em 27.5em/ 1.5em 10em,
              
              
              radial-gradient(40% 40% at 50% 50%, #9cd8ff 49% , transparent 51%) 41em 34em/52em 8em,
              radial-gradient(40% 40% at 50% 50%, #f1ff62 49% , transparent 51%) 36em 34.75em/62em 8em,
              radial-gradient(40% 40% at 50% 50%, #f1ff62 49% , transparent 51%) 52em 37em/7em 4em,
              radial-gradient(40% 40% at 50% 50%, #f1ff62 49% , transparent 51%) 55em 36.75em/9em 5em,
              radial-gradient(40% 40% at 50% 50%, #f1ff62 49% , transparent 51%) 58em 37em/9em 5em,
              radial-gradient(40% 40% at 50% 50%, #f1ff62 49% , transparent 51%) 61.5em 37em/9em 5em,
              radial-gradient(40% 40% at 50% 50%, #f1ff62 49% , transparent 51%) 65em 37.25em/9em 5em,
              radial-gradient(40% 40% at 50% 50%, #f1ff62 49% , transparent 51%) 67.5em 37.25em/9em 5em,
              radial-gradient(40% 40% at 50% 50%, #f1ff62 49% , transparent 51%) 71.25em 36.75em/9em 5em;
          background-repeat:no-repeat;
          font-size:10px;
          height:80em;
          width:80em;
          
        
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0