无div纯css实现小岛屿效果代码-html代码-BFW代码库

代码语言：html
代码描述：无div纯css实现小岛屿效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --water: #50d6f9;
  --size: 90;
  --unit: calc((var(--size) / 1600) * 1vmin);
  --island-green: #31cd79;
  /* --island-green: red; */
  --island-green-shadow: #28ae5c;
  --island-dirt: #a2693b;
  --island-dirt-shadow: #85592d;
  --island-grass-1: #39e14e;
  --island-grass-2: #39dd83;
  /* --island-grass-1: blue;
  --island-grass-2: red; */
  --tree-bark: #8b7b43;
  --tree-bark-shadow: #a2693b;
  --tree-leaves: #209234;
  --tree-leaves-shadow: #1c7b28;
  --post-side: #dfc18c;
  --post-top: #ffdda7;
  --post-shadow: #c1a067;
  --balloon: #419cde;
  --balloon-glean: #53b2ee;
  --balloon-shadow: #2e7dc2;
  --present-top: #eaeae2;
  --present-side: #c9cec9;
  --present-shadow: #aca9a8;
  --present-ribbon: #da5122;
  --present-ribbon-shadow-1: #a22a11;
  --present-ribbon-side: #c14018;
  --balloon-string: #eaeae2;
  --flower-stem: #37e04f;
  --flower-yellow: #e2dd0f;
  --flower-yellow-top: #dfc70c;
  --flower-pink: #f9bce2;
  --flower-pink-top: #f48fd0;
  --shallow-water: #8ee6f7;
  --deep-water: #37aeed;
  --transparent: rgba(0,0,0,0.0);
}

body {
  background-color: var(--water);
  height: 100vh;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc(var(--unit) * 1200);
  width: calc(var(--unit) * 1600);
  opacity: 5;
}

/* Island */
body::before {
  content: "";
  display: block;

  height: calc(var(--unit) * 1200);
  width: calc(var(--unit) * 1600);

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  background-image:
    /* Grass patch left*/
    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-1),var(--island-grass-1)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-1),var(--island-grass-1)), 

    /* Grass patch right*/
    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-1),var(--island-grass-1)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)),     

    /* Posts */
    radial-gradient(ellipse, var(--post-top) 50%, var(--transparent) 51%),
    radial-gradient(50% 50% at 50% 0%, var(--post-side) 50%, var(--transparent) 51%),
    linear-gradient(90deg, var(--post-side) 50%, var(--post-shadow) 50%),
    radial-gradient(ellipse, var(--post-shadow) 50%, var(--transparent) 51%),
    linear-gradient(48deg, var(--transparent) 15%, var(--island-green-shadow) 16% 50%, var(--transparent) 51%),
    radial-gradient(circle, var(--island-green-shadow) 50%, var(--transparent) 51%),

    radial-gradient(ellipse, var(--post-top) 50%, var(--transparent) 51%),
    radial-gradient(50% 50% at 50% 0%, var(--post-side) 50%, var(--transparent) 51%),
    linear-gradient(90deg, var(--post-side) 50%, var(--post-shadow) 50%),
    radial-gradient(ellipse, var(--post-shadow) 50%, var(--transparent) 51%),
    linear-gradient(48deg, var(--transparent) 15%, var(--island-green-shadow) 16% 50%, var(--transparent) 51%),
    radial-gradient(circle, var(--island-green-shadow) 50%, var(--transparent) 51%),

    radial-gradient(ellipse, var(--post-top) 50%, var(--transparent) 51%),
    radial-gradient(50% 50% at 50% 0%, var(--post-side) 50%, var(--transparent) 51%),
    linear-gradient(90deg, var(--post-side) 50%, var(--post-shadow) 50%),
    radial-gradient(ellipse, var(--post-shadow) 50%, var(--transparent) 51%),
    linear-gradient(48deg, var(--transparent) 15%, var(--island-green-shadow) 16% 50%, var(--transparent) 51%),
    radial-gradient(circle, var(--island-green-shadow) 50%, var(--transparent) 51%),

    radial-gradient(ellipse, var(--post-top) 50%, var(--transparent) 51%),
    radial-gradient(50% 50% at 50% 0%, var(--post-side) 50%, var(--transparent) 51%),
    linear-gradient(90deg, var(--post-side) 50%, var(--post-shadow) 50%),
    radial-gradient(ellipse, var(--post-shadow) 50%, var(--transparent) 51%),
    linear-gradient(48deg, var(--transparent) 15%, var(--island-green-shadow) 16% 50%, var(--transparent) 51%),
    radial-gradient(circle, var(--island-green-shadow) 50%, var(--transparent) 51%),

    /* Tree */
    radial-gradient(63% 87% at -15% 116%, var(--tree-leaves) 50%, var(--transparent) 51%),
    radial-gradient(63% 87% at 12% 7%, var(--tree-leaves) 50%, var(--transparent) 51%),
    radial-gradient(52% 81% at 118% 0%, var(--tree-leaves) 50%, var(--transparent) 51%),
    radial-gradient(62% 81% at 84% 100%, var(--tree-leaves) 50%, var(--transparent) 51%),
    radial-gradient(circle, var(--tree-leaves-shadow) 50%, var(--transparent) 51%),
    radial-gradient(ellipse, var(--tree-leaves) 50%, var(--transparent) 51%),
    radial-gradient(circle, var(--tree-leaves) 50%, var(--transparent) 51%),
    radial-gradient(circle, var(--tree-leaves) 50%, var(--transparent) 51%),
    radial-gradient(circle, var(--tree-leaves-shadow) 50%, var(--transparent) 51%),
    radial-gradient(ellipse, var(--tree-leaves) 50% , var(--transparent) 51%),
    radial-gradient(circle, var(--tree-leaves-shadow) 50%, var(--transparent) 51%),
    linear-gradient(107deg, var(--transparent) 25%, var(--tree-bark) 26%),
    linear-gradient(73deg, var(--tree-bark) 75%, var(--transparent) 76%),
    radial-gradient(ellipse at 50% 0%, var(--tree-bark) 50%, var(--transparent) 51%),
    radial-gradient(ellipse, var(--island-green-shadow) 50%, var(--transparent) 51%),
    
    /* Level 2*/
    radial-gradient(141% 118% at 112% 103%, var(--transparent) 88%, var(--water) 89%),
    radial-gradient(115% 120% at 16% 93%, var(--transparent) 78%, var(--water) 79%),
    radial-gradient(221% 215% at 114% -8%, var(--transparent) 50%, var(--island-green) 51%),
    radial-gradient(225% 200% at 114% -8%, var(--transparent) 50%, var(--island-green-shadow) 51% 67%, var(--transparent) 67%),
    radial-gradient(200% 200% at -14% -8%, var(--transparent) 50%, var(--island-green-shadow) 51% 67%, var(--transparent) 67%),
    /* radial-gradient(215% 222% at -14% -8%, var(--transparent) 50%, var(--island-green-shadow) 51%), */
    linear-gradient(var(--island-green), var(--island-green)),
    linear-gradient(var(--island-green-shadow), var(--island-green-shadow)),
    radial-gradient(115% 194% at 100% -8%, var(--transparent) 50%, var(--island-green) 51%),
    radial-gradient(114% 213% at 0% 0%, var(--transparent) 50%, var(--island-green-shadow) 51%),
    linear-gradient(var(--island-dirt-shadow), var(--island-dirt-shadow)),
    linear-gradient(var(--island-dirt), var(--island-dirt)),

    /* Grass patch left*/
    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-1),var(--island-grass-1)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-1),var(--island-grass-1)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-1),var(--island-grass-1)), 

    /* Grass patch right*/
    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-1),var(--island-grass-1)),   
    
    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 

    linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
    linear-gradient(var(--island-grass-2),var(--island-grass-2)), 
    
    /* Flowers */
    radial-gradient(ellipse, var(--flower-yellow-top) 50%, var(--transparent) 51%),
    linear-gradient(114deg, var(--transparent) 25%, var(--flower-yellow) 26%),
    linear-gradient(66deg, var(--flower-yellow) 75%, var(--transparent) 76%),
    radial-gradient(ellipse at 50% 0%, var(--flower-yellow) 50%, var(--transparent) 51%),
    linear-gradient(var(--flower-stem), var(--flower-stem)),
    radial-gradient(circle, var(--flower-stem) 50%, var(--transparent) 51%),
    radial-gradient(ellipse, var(--island-green-shadow) 50%, var(--transparent) 51%),

    radial-gradient(ellipse, var(--flower-yellow-top) 50%, var(--transparent) 51%),
    linear-gradient(114deg, var(--transparent) 25%, var(--flower-yellow) 26%),
    linear-gradient(66deg, var(--flower-yellow) 75%, var(--transparent) 76%),
    radial-gradient(ellipse at 50% 0%, var(--flower-yellow) 50%, var(--transparent) 51%),
    linear-gradient(var(--flower-stem), var(--flower-stem)),
    radial-gradient(circle, var(--flower-stem) 50%, var(--transparent) 51%),
    radial-gradient(ellipse, var(--island-green-shadow) 50%, var(--transparent) 51%),

    

    radial-gradient(ellipse, var(--flower-pink-top) 50%, var(--transparent) 51%),
    linear-gradient(114deg, var(--transparent) 25%, var(--flower-pink) 26%),
    linear-gradient(66deg, var(--flower-pink) 75%, var(--transparent) 76%),
    radial-gradient(ellipse at 50% 0%, var(--flower-pink) 50%, var(--transparent) 51%),
    linear-gradient(var(--flower-stem), var(--flower-stem)),
    radial-gradient(circle, var(--flower-stem) 50%, var(--transparent) 51%),
    radial-gradient(ellipse, var(--island-green-shadow) 50%, var(--transparent) 51%),

    /* Level 1 */
    radial-gradient(150% 213% at 0% 100%, var(--transparent) 50%,var(--island-green) 51%),
    radial-gradient(150% 213% at 0% 0%, var(--transparent) 50%, var(--island-green) 51%),
    linear-gradient(var(--island-green-shadow), var(--island-green-shadow)),
    radial-gradient(141% 118% at 112% 103%, var(--transparent) 88%, var(--water) 89%),
    radial-gradient(123% 118% at 12% 103%, var(--transparent) 88%, var(--water) 89%),
    radial-gradient(122% 104% at 112% 3%, var(--transparent) 88%, var(--shallow-water) 89%),
    radial-gradient(122% 104% at 12% 3%, var(--transparent) 88%, var(--shallow-water) 89%),
    radial-gradient(190% 170% at 100% 0%, var(--transparent) 50%, var(--island-green-shadow) 51% 79%, var(--transparent) 80%),
    radial-gradient(190% 170% at 0% 0%, var(--transparent) 50%, var(--island-green-shadow) 51% 79%, var(--transparent) 80%),
    linear-gradient(var(--island-green), var(--island-green)),
    linear-gradient(var(--island-green-shadow), var(--island-green-shadow)),

    /* Island Base */
    radial-gradient(108% 106% at 100% 0%, var(--transparent) 90%, var(--island-dirt) 91%),
    radial-gradient(108% 106% at 0% 0%, var(--transparent) 90%, var(--island-dirt) 91%),
    linear-gradient(var(--island-dirt-shadow), var(--island-dirt-shadow)),
    radial-gradient(73% 132% at 100% 0%, var(--transparent) 50%, var(--shallow-water)51%),
    radial-gradient(76% 130% at 0% 0%, var(--transparent) 50%, var(--shallow-water) 51%),
    radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
    radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
    linear-gradient(var(--island-dirt), var(--island-dirt)),

    /* Shallow Water */
    /* Left */
    radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
    radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
    radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
    linear-gradient(var(--shallow-water), var(--shallow-water)),
    radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
    radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),

    /* Bottom */
    radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
    linear-gradient(var(--.........完整代码请登录后点击上方下载按钮下载查看