HTML和CSS中的几何图形案例

HTML代码

<div class="container"></div>
<div class="container2"></div>
<div class="container3"></div>
<div class="container4"></div>
<div class="star"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="star5"></div>
<div class="star6"></div>
<div class="center"></div>
<div class="center2"></div>
<div class="center3"></div>
<div class="center4"></div>
<div class="center5"></div>
<div class="center6"></div>

css代码

html,body,div {width:100%;height:100%;}
body {background:#2f2933;overflow:hidden;}
div {
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
 margin-right:auto;
 margin-left:auto;
 margin-top:auto;
 margin-bottom:auto;
}
.container,.center6 {
 background-color:#ffffa6;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffa6),color-stop(1, #bdf271));
 background-image: -o-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: -moz-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: -webkit-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: -ms-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: linear-gradient(to bottom, #ffffa6 0%, #bdf271 100%);
}
.container2,.center5 {
 background-color:#bdf271;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #bdf271),color-stop(1, #29d9c2));
 background-image: -o-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: -moz-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: -webkit-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: -ms-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: linear-gradient(to bottom, #bdf271 0%, #29d9c2 100%);
 -webkit-animation-delay:200ms;
 -moz-animation-delay:200ms;
 -o-animation-delay:200ms;
 animation-delay:200ms;
}
.container3,.center4 {
 background-color:#29d9c2;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #29d9c2),color-stop(1, #01a2a6));
 background-image: -o-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: -moz-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: -webkit-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: -ms-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: linear-gradient(to bottom, #29d9c2 0%, #01a2a6 100%);
 -webkit-animation-delay:400ms;
 -moz-animation-delay:400ms;
 -o-animation-delay:400ms;
 animation-delay:400ms;
}
.container4,.center {
 background-color:#f4f4f4;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f4f4f4),color-stop(1, #2f2933));
 background-image: -o-linear-gradient(bottom, #f4f4f4 0%, #2f2933 100%);
 background-image: -moz-linear-gradient(bottom, #f4f4f4 0%, #2f2933 100%);
 background-image: -webkit-linear-gradient(bottom, #f4f4f4 0%, #2f2933 100%);
 background-image: -ms-linear-gradient(bottom,#f4f4f4 0%, #2f2933 100%);
 background-image: linear-gradient(to bottom, #f4f4f4 0%, #2f2933 100%);
 -webkit-animation-delay:600ms;
 -moz-animation-delay:600ms;
 -o-animation-delay:600ms;
 animation-delay:600ms;
}
.container,.container2,.container3,.container4 {
 -webkit-animation:container 1s infinite linear;
 -moz-animation:container 1s infinite linear;
 -o-animation:container 1s infinite linear;
 animation:container 1s infinite linear;
 opacity:0.5;
}
.container{
 width:400px;
 height:400px;
 border-radius:200px;
 z-index:6;
}
.container2 {
 width:500px;
 height:500px;
 border-radius:250px;
 z-index:5;
}
.container3 {
 width:600px;
 height:600px;
 border-radius:300px;
 z-index:4;
}
.container4 {
 width:700px;
 height:700px;
 border-radius:350px;
 z-index:3;
}
.star,.star:after,.star2,.star2:after,.star3,.star3:after,.star4,.star4:after,.star5,.star5:after,.star6,.star6:after {
 width: 0;
 height: 0;
 border-left: 130px solid transparent;
 border-right: 130px solid transparent;
}
.star,.star2,.star3,.star4,.star5,.star6 {top:-5%;}
.star:after,.star2:after,.star3:after,.star4:after,.star5:after,.star6:after {
 position: absolute;
 content: "";
 top: 60px;
 left: -130px;
}
.star {border-bottom: 250px solid #ff4669;z-index:12;}
.star:after {border-top: 250px solid #ff4669;}
.star2 {
 border-bottom: 250px solid #ff86c1;
 z-index:11;
 -webkit-transform: rotate(-30deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-30deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-30deg) translateX(-15px) translateY(0px);
 transform: rotate(-30deg) translateX(-15px) translateY(0px);
}
.star2:after {border-top: 250px solid #ff86c1;}
.star3{
 border-bottom: 250px solid #ff4691;
 z-index:10;
 -webkit-transform: rotate(-35deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-35deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-35deg) translateX(-15px) translateY(0px);
 transform: rotate(-35deg) translateX(-15px) translateY(0px);
}
.star3:after {border-top: 250px solid #ff4691;}
.star4{
 border-bottom: 250px solid #ff4691;
 z-index:9;
 -webkit-transform: rotate(-40deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-40deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-40deg) translateX(-15px) translateY(0px);
 transform: rotate(-40deg) translateX(-15px) translateY(0px);
}
.star4:after {border-top: 250px solid #ff4669;}
.star5{
 border-bottom: 250px solid #ff4669;
 z-index:8;
 -webkit-transform: rotate(-45deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-45deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-45deg) translateX(-15px) translateY(0px);
 transform: rotate(-45deg) translateX(-15px) translateY(0px);
}
.star5:after {border-top: 250px solid #ff4669;}
.star6{
 border-bottom: 250px solid #ff4669;
 z-index:7;
 -webkit-transform: rotate(-50deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-50deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-50deg) translateX(-15px) translateY(0px);
 transform: rotate(-50deg) translateX(-15px) translateY(0px);
}
.star6:after {border-top: 250px solid #ff4669;}
.center,.center2,.center3,.center4,.center5,.center6 {
 -webkit-animation:container 1s infinite linear;
 -moz-animation:container 1s infinite linear;
 -o-animation:container 1s infinite linear;
 animation:container 1s infinite linear;
 opacity:0.5;
}
.center {
 width:60px;
 height:60px;
 border-radius:30px;
 z-index:13;
}
.center2 {
 width:50px;
 height:50px;
 border-radius:25px;
 background:#2f2933;
 z-index:14;
}
.center3 {
 width:40px;
 height:40px;
 border-radius:20px;
 background:#2f2933;
 z-index:15;
}
.center4 {
 width:30px;
 height:30px;
 border-radius:15px;
 z-index:16;
}
.center5 {
 width:20px;
 height:20px;
 border-radius:10px;
 z-index:17;
}
.center6 {
 width:10px;
 height:10px;
 border-radius:5px;
 z-index:18;
}
/*animation container*/
@-webkit-keyframes container {
 0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
 100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@-moz-keyframes container {
 0% {-moz-transform:rotate(0deg);transform:rotate(0deg);}
 100% {-moz-transform:rotate(360deg);transform:rotate(360deg);}
}
@-o-keyframes container {
 0% {-o-transform:rotate(0deg);transform:rotate(0deg);}
 100% {-o-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes container {
 0% {transform:rotate(0deg);}
 100% {transform:rotate(360deg);}
}

本文来源于codepad

（本文如有侵权，请联系作者，必删）