无div纯css实现小岛屿效果代码
代码语言：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(--.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0