纯css实现火龙果布局效果
代码语言：html
所属分类：布局界面
代码描述：纯css实现火龙果布局效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #edacfa;
}
.container {
height: 600px;
width: 750px;
background-color: #edacfa;
position: relative;
margin: auto;
}
.mainbody {
background-color: background: rgb(177,87,183);
background: linear-gradient(0deg, rgba(177,87,183,1) 0%, rgba(213,53,207,1) 52%, rgba(212,131,221,1) 100%);
height: 290px;
width: 300px;
top: 180px;
left: 195px;
position: absolute;
clip-path: polygon(51% 0%, 37% 5%, 28% 14%, 24% 23%, 21% 31%, 19% 40%, 18% 48%, 19% 54%, 21% 58%, 25% 65%, 29% 71%, 34% 75%, 38% 77%, 44% 78%, 49% 79%, 55% 79%, 60% 78%, 65% 75%, 70% 71%, 70% 71%, 74% 67%, 77% 62%, 79% 56%, 81% 49%, 81% 43%, 80% 38%, 80% 30%, 79% 26%, 77% 19%, 72% 13%, 68% 8%, 62% 4%);
z-index: 0;
}
.tri1 {
height: 200px;
width: 250px;
top: 190px;
left: 198px;
background-color: background: rgb(156,52,163);
background: linear-gradient(0deg, rgba(156,52,163,1) 0%, rgba(171,68,177,1) 49%, rgba(248,138,255,1) 100%);
position: absolute;
z-index: 4;
clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}
.tri2 {
height: 200px;
width: 250px;
top: 170px;
left: 267px;
transform: rotate(350deg);
background-color: background: rgb(156,52,163);
background: linear-gradient(0deg, rgba(156,52,163,1) 0%, rgba(171,68,177,1) 49%, rgba(248,138,255,1) 100%);
position: absolute;
z-index: 4;
clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}
.tri3 {
height: 314px;
width: 236px;
top: 225px;
left: 276px;
transform: rotate(15deg);
background-color: background: rgb(201,55,203);
background: linear-gradient(0deg, rgba(201,55,203,1) 2%, rgba(201,55,203,1) 51%, rgba(216,74,220,1) 83%, rgba(245,122,250,1) 100%);
position: absolute;
z-index: 5;
clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}
.tri4 {
height: 245px;
width: 276px;
top: 257px;
left: 220px;
transform: rotate(0deg);
background-color: background: rgb(201,55,203);
background: linear-gradient(0deg, rgba(201,55,203,1) 2%, rgba(185,24,187,1) 51%, rgba(216,74,220,1) 83%, rgba(245,122,250,1) 100%);
position: absolute;
z-index: 5;
clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}
.tri5 {
height: 314px;
width: 256px;
top: 245px;
left: 179px;
transform: rotate(345deg);
background-color: background: rgb(201,55,203);
background: linear-gradient(0deg, rgba(201,55,203,1) 2%, rgba(201,55,203,1) 51%, rgba(216,74,220,1) 83%, rgba(245,122,250,1) 100%);
position: absolute;
z-index: 5;
clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}
.tri6 {
height: 190px;
width: 270px;
top: 336px;
left: 245px;
transform: rotate(7deg);
background-color: background: rgb(201,55,203);
background: linear-gradient(0deg, rgba(201,55,203,1) 2%, rgba(185,24,187,1) 51%, rgba(216,74,220,1) 83%, rgba(245,122,250,1) 100%);
position: absolute;
z-index: 5;
clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}
.tri7 {
height: 190px;
width: 256px;
top: 335px;
left: 213px;
transform: rotate(340deg);
background-color: background: rgb(138,43,140);
background: linear-gradient(0deg, rgba(138,43,140,1) 31%, rgba(152,47,156,1) 49%, rgba(170,52,176,1) 60%, rgba(189,66,196,1) 72%, rgba(220,93,228,1) 87%, rgba(246,116,255,1) 100%);
position: absolute;
z-index: 7;
clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}
.leaf1 {
background-color: background: rgb(217,236,146);
background: linear-gradient(0deg, rgba(217,236,146,1) 0%, rgba(113,183,87,1) 52%, rgba(84,112,57,1) 100%);
height: 100px;
width: 100px;
left: 295px;
top: 50px;
clip-path: polygon(52% 0%, 47% 11%, 42% 26%, 38% 52%, 34% 100%, 70% 100%, 66% 52%, 62% 26%, 57% 11%);
position: absolute;
z-index: 1;
}
.leaf2 {
background-color: background: rgb(217,236,146);
background: linear-gradient(0deg, rgba(217,236,146,1) 0%, rgba(113,183,87,1) 52%, rgba(84,112,57,1) 100%);
height: 120px;
width: 100px;
left: 305px;
top: 80px;
transform: rotate(345deg);
clip-path: polygon(52% 0%, 47% 11%, 42% 26%, 38% 52%, 34% 100%, 70% 100%, 66% 52%, 62% 26%, 57% 11%);
position: absolute;
z-index: 2;
}
.leaf3 {
background-color: background: rgb(217,236,146);
background: linear-gradient(0deg, rgba(217,236,146,1) 0%, rgba(113,183,87,1) 52%, rgba(84,112,57,1) 100%);
height: 140px;
width: 100px;
left: 290px;
top: 75px;
transform: rotate(20deg);
clip-path: polygon(52% 0%, 47% 11%, 42% 26%, 38% 52%, 34% 100%, 70% 100%, 66% 52%, 62% 26%, 57% 11%);
position: absolute;
z-index: 3;
}
.leaf4 {
background-color: background: rgb(217,236,146);
background: linear-gradient(0deg, rgba(217,236,146,1) 0%, rgba(113,183,87,1) 52%, rgba(84,112,57,1) 100%);
height: 100px;
width: 80px;
left: 380px;
top: 160px;
clip-path: polygon(52% 0%, 47% 11%, 42% 26%, 38% 52%, 34% 100%, 70% 100%, 66% 52%, 62% 26%, 57% 11%);
position: absolute;
z-index: 5;
}
.leaf5 {
background-color: background: rgb(217,236,146);
background: linear-gradient(0deg, rgba(217,236,146,1) 0%, rgba(113,183,87,1) 52%, rgba(84,112,57,1) 100%);
height: 64px;
width: 97px;
left: 301px;
top: 217px;
clip-path: polygon(52% 0%, 47% 11%, 42% 26%, 38% 52%, 34% 100%, 70% 100%, 66% 52%, 62% 26%, 57% 11%);
position: absolute;
z-index: 5;
}
.leaf6 {
background-color: background: rgb(217,236,146);
background: linear-gradient(0deg, rgba(217,236,146,1) 0%, rgba(113,183,87,1) 52%, rgba(84,112,57,1) 100%);
height: 98px;
width: 130px;
left: 208px;
top: 207px;
transform: rotate(360deg);
clip-path: polygon(52% 0%, 47% 11%, 42% 26%, 38% 52%, 34% 100%, 70% 100%, 66% 52%, 62% 26%, 57% 11%);
position: absolute;
z-index: 3;
}
.leaf7 {
background-color: background: rgb(217,236,146);
background: linear-gradient(0deg, rgba(217,236,146,1) 0%, rgba(113,183,87,1) 52%, rgba(84,112,57,1) 100%);
height: 66px;
width: 97px;
left: 341px;
top: 295px;
transform: rotate(10deg);
clip-path: polygon(52% 0%, 47% 11%, 42% 26%, 38% 52%, 34% 100%, 70% 100%, 66% 52%, 62% 26%, 57% 11%);
position: absolute;
z-index: 5;
}
.leaf8 {
background-color: background: rgb(217,236,146);
background: linear-gradient(0deg, rgba(217,236,146,1) 0%, rgba(113,183,87,1) 52%, rgba(84,112,57,1) 100%);
height: 71px;
width: 99px;
left: 254px;
top: 290px;
transform: rotate(350deg);
clip-path: polygon(52% 0%, 47% 11%, 42% 26%, 38% 52%, 34% 100%, 70% 100%, 66% 52%, 62% 26%, 57% 11%);
position: absolute;
z-index: 6;
}
.mainbody2 {
background-color: background: rgb(177,87,183);
background: linear-gradient(0deg, rgba(177,87,183,1) 0%, rgba(213,53,207,1) 52%, rgba(212,131,221,1) 100%);
transform: rotate(35deg);
height: 270px;
width: 280px;
top: 260px;
left: 305px;
position: absolute;
clip-path: polygon(51% 0%, 37% 5%, 28% 14%, 24% 23%, 21% 31%, 19% 40%, 18% 48%, 19% 54%, 21% 58%, 25% 65%, 29% 71%, 34% 75%, 38% 77%, 44% 78%, 49% 79%, 55% 79%, 60% 78%, 65% 75%, 70% 71%, 70% 71%, 74% 67%, 77% 62%, 79% 56%, 81% 49%, 81% 43%, 80% 38%, 80% 30%, 79% 26%, 77% 19%, 72% 13%, 68% 8%, 62% 4%);
z-index: 6;
}
.mainflesh {
background-color: #f5fcfc;
transform: rotate(35deg);
height: 230px;
width: 240px;
top: 270px;
left: 325px;
position: absolute;
clip-path: polygon(51% 0%, 37% 5%, 28% 14%, 24% 23%, 21% 31%, 19% 40%, 18% 48%, 19% 54%, 21% 58%, 25% 65%, 29% 71%, 34% 75%, 38% 77%, 44% 78%, 49% 79%, 55% 79%, 60% 78%, 65% 75%, 70% 71%, 70% 71%, 74% 67%, 77% 62%, 79% 56%, 81% 49%, 81% 43%, 80% 38%, 80% 30%, 79% 26%, 77% 19%, 72% 13%, 68% 8%, 62% 4%);
z-index: 7;
}
.seed1 {
background-color: #000000;
height: 28px;
width: 28px;
transform: rotate(38deg);
position: absolute;
top: 295px;
left: 440px;
z-index: 7;
clip-path: polygon(49% 16%, 44% 22%, 41% 29%, 42% 34%, 46% 38%, 50% 38%, 54% 37%, 54% 37%, 56% 34%, 56% 29%, 55% 25%, 52% 21%);
}
.seed2 {
background-color: #000000;
height: 28px;
width: 28px;
transform: rotate(38deg);
position: absolute;
top: 315px;
left: 455px;
z-index: 7;
clip-path: polygon(49% 16%, 44% 22%, 41% 29%, 42% 34%, 46% 38%, 50% 38%, 54% 37%, 54% 37%, 56% 34%, 56% 29%, 55% 25%, 52% 21%);
}
.seed3 {
background-color: #000000;
height: 28px;
width: 28px;
transform: rotate(38deg);
position: absolute;
top: 295px;
left: 465px;
z-index: 7;
clip-path: polygon(49% 16%, 44% 22%, 41% 29%, 42% 34%, 46% 38%, 50% 38%, 54% 37%, 54% 37%, 56% 34%, 56% 29%, 55% 25%, 52% 21%);
}
.seed4 {
background-color: #000000;
height: 28px;
width: 28px;
transform: rotate(38deg);
position: absolute;
top: 310px;
left: 490px;
z-index: 7;
clip-path: polygon(49% 16%, 44% 22%, 41% 29%, 42% 34%, 46% 38%, 50% 38%, 54% 37%, 54% 37%, 56% 34%, 56% 29%, 55% 25%, 52% 21%);
}
.seed5 {
background-color: #000000;
height: 28px;
width: 28px;
transform: rotate(38deg);
position: absolute;
top: 336px;
left: 473px;
z-index: 7;
clip-path: polygon(49% 16%, 44% 22%, 41% 29%, 42% 34%, 46% 38%, 50% 38%, 54% 37%, 54% 37%, 56% 34%, 56% 29%, 55% 25%, 52% 21%);
}
.seed6 {
background-color: #000000;
height: 28px;
width: 28px;
transform: rotate(38deg);
position: absolute;
top: 329px;
left: 499px;
z-index: 7;
clip-path: polygon(49% 16%, 44% 22%, 41% 29%, 42% 34%, 46% 38%, 50% 38%, 54% 37%, 54% 37%, 56% 34%, 56% 29%, 55% 25%, 52% 21%);
}
.seed7 {
background-color: #000000;
height: 28px;
width: 28px;
transform: rotate(38deg);
position: absolute;
top: 349px;
left: 499px;
z-index: 7;
clip-path: polygon(49% 16%, 44% 22%, 41% 29%, 42% 34%, 46% 38%, 50% 38%, 54% 37%, 54% 37%, 56% 34%, 56% 29%, 55% 25%, 52% 21%);
}
.seed8 {
background-color: #000000;
height: 28px;
width: 28px;
transform: rotate(38deg);
position: absolute;
top: 304px;
left: 416px;
z-index: 7;
clip-path: polygon(49% 16%, 44% 22%, 41% 29%, 42% 34%, 46% 38%, 50% 38%, 54% 37%, 54% 37%, 56% 34%, 56% 29%, 55% 25%, 52% 21%);
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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