CSS
body{
background:black;
}
.contenedor{
position:relative;
width:500px;
height:500px;
border-radius:100%;
background: #aebac4;
background: -moz-linear-gradient(top, #aebac4 50%, #579cc6 50%, #579cc6 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#aebac4), color-stop(50%,#579cc6), color-stop(50%,#579cc6));
background: -webkit-linear-gradient(top, #aebac4 50%,#579cc6 50%,#579cc6 50%);
background: -o-linear-gradient(top, #aebac4 50%,#579cc6 50%,#579cc6 50%);
background: -ms-linear-gradient(top, #aebac4 50%,#579cc6 50%,#579cc6 50%);
background: linear-gradient(to bottom, #aebac4 50%,#579cc6 50%,#579cc6 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebac4', endColorstr='#579cc6',GradientType=0 );
margin:212px auto;
}
.iceberg{
position:absolute;
width:30px;
height:30px;
margin:0 0px;
animation:flo 3s alternate infinite;
-moz-animation:flo 3s alternate infinite;
-webkit-animation:flo 3s alternate infinite;
}
ul.ices{
position:absolute;
width:400px;
height:121px;
margin:117px 112px;
list-style:none;
}
ul.ices li{
display:inline-block;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 132px solid white;
opacity:.7;
margin:0px 3px
}
ul.ices li:nth-child(1){
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 40px solid transparent;
border-bottom: 132px solid white;
margin:0px 0px;
opacity:1;
}
ul.ices li:nth-child(1)::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 21px solid transparent;
border-bottom: 112px solid #999;
opacity:.5;
margin:21px -9px
}
ul.ices li:nth-child(2){
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 70px solid white;
margin:0px -35px;
}
ul.ices li:nth-child(2)::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 70px solid transparent;
border-bottom: 30px solid #999;
margin:39px 3px;
opacity:.5;
}
ul.ices li:nth-child(3){
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 112px solid white;
margin:0px 0px;
opacity:1;
}
ul.ices li:nth-child(3)::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 0px solid transparent;
border-bottom: 70px solid #999;
margin:43px 0px;
opacity:.7;
}
ul.ices li:nth-child(4){
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 80px solid white;
margin:0px -21px;
opacity:1;
}
ul.ices li:nth-child(4)::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 33px solid transparent;
border-bottom: 30px solid #999;
margin:50px -7px;
opacity:.9;
}
ul.ices li:nth-child(5){
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 90px solid white;
margin:0px 0px;
opacity:.5;
}
ul.ices li:nth-child(5)::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 90px solid white;
margin:-30px 12px;
opacity:1;
}
ul.ices li:nth-child(6){
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 102px solid white;
margin:0px -35px;
opacity:.9;
}
ul.ices li:nth-child(6)::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 21px solid transparent;
border-bottom: 112px solid white;
margin:-21px 12px;
opacity:.3;
}
ul.ices li:nth-child(7){
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 30px solid transparent;
border-bottom: 90px solid #999;
margin:0px 9px;
opacity:.7;
}
ul.ices li:nth-child(7)::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 30px solid transparent;
border-bottom: 90px solid #999;
margin:-9px 12px;
opacity:1;
}
ul.ices li:nth-child(8){
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 70px solid white;
margin:0px -37px;
opacity:.7;
}
ul.ices li:nth-child(8)::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 12px solid transparent;
border-bottom: 50px solid #999;
margin:30px -35px;
opacity:.7;
}
ul.ices li:nth-child(9){
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 21px solid transparent;
border-bottom: 112px solid white;
margin:0px 14px;
opacity:.9;
}
ul.ices li:nth-child(9)::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 3px solid transparent;
border-bottom: 30px solid #999;
margin:83px -37px;
opacity:.3;
}
.ice{
position:absolute;
width: 0;
height: 0;
border-top:30px solid #37739B;
border-left: 50px solid transparent;
margin:248px 152px;
}
.ice::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-bottom:30px solid #1a6295; ;
opacity:.5;
-webkit-transform: rotate(63deg);
-moz-transform: rotate(63deg);
transform: rotate(63deg);
margin:-3px -65px;
}
.ice::after{
content:"";
display:block;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right:40px solid transparent;
border-top: 30px solid #345D96;
opacity:.9;
margin:-55px 12px;
}
.ice3{
position:absolute;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 12px solid transparent;
border-bottom: 93px solid #0e3450;
opacity:.5;
margin:-53px -9px;
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
transform: rotate(-9deg);
}
.ice3::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 27px solid transparent;
border-right: 9px solid transparent;
border-bottom: 87px solid #345D96;
margin:-0px -5px;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.ice3:after{
content:"";
display:block;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 33px solid #083956;
border-bottom: 25px solid transparent;
-webkit-transform: rotate(22deg);
-moz-transform: rotate(22deg);
transform: rotate(22deg);
margin: -83px 32px
}
.ice5{
position:absolute;
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 25px solid transparent;
border-top: 40px solid #214360;
opacity:.7;
margin:-53px 90px
}
.ice5::before{
content:"";
display:block;
width: 0;
height: 0;
border-top: 43px solid transparent;
border-left: 73px solid #214360;
border-bottom: 40px solid transparent;
opacity:.6;
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
transform: rotate(14deg);
margin:-30px -55px;
}
.ice5::after{
content:"";
display:block;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 0px solid transparent;
border-bottom: 43px solid #0e3450;
margin:-90px 9px;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
transform: rotate(16deg);
}
.ice30{
position:absolute;
width: 0;
height: 0;
border-left: 90px solid transparent;
border-right: 70px solid transparent;
border-top: 212px solid #214360;
opacity:.3;
margin:-55px -55px
}
.ice30::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 121px solid transparent;
border-right: 50px solid transparent;
border-top: 172px solid #214360;
opacity:.5;
margin:-212px -45px
}
.ice30::after{
content:"";
display:block;
width: 0;
height: 0;
border-left: 132px solid transparent;
border-right: 33px solid transparent;
border-top: 231px solid #214360;
opacity:.5;
margin:40px -75px
}
.ice6{
position:absolute;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 50px solid #cee4f4;
margin:-104px -50px
}
.ice6::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 90px solid #cee4f4;
margin:-40px 0px
}
.ice7{
position:absolute;
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 50px solid white;
margin:-104px -47px
}
.ice7::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 90px solid white;
margin:-40px 3px
}
.ice8::before{
content:"";
display:block;
width: 30px;
height: 17px;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 90px solid white;
margin:-30px 12px
}
.ice8{
position:absolute;
width: 12px;
height: 60px;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 90px solid white;
border-right:7px solid #cee4f4;
margin:-121px 30px
}
.ice8::after{
content:"";
display:block;
width: 45px;
height: 16px;
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
transform: skew(0deg);
background: white;
border-right:7px solid #cee4f4;
margin:30px 0px
}
.ice9{
position:absolute;
width: 12px;
height: 60px;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
transform: skew(-12deg);
background: white;
border-right:7px solid #cee4f4;
margin:-121px 109px
}
.ice9::before{
content:"";
display:block;
width: 30px;
height: 17px;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
transform: skew(-12deg);
background: white;
border-right:7px solid #cee4f4;
margin:0px 12px
}
.ice9::after{
content:"";
display:block;
width: 45px;
height: 16px;
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
transform: skew(0deg);
background: white;
border-right:7px solid #cee4f4;
margin:30px 0px
}
.ice12{
position:absolute;
width: 21px;
height: 16px;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
transform: skew(-12deg);
background: white;
border-right:7px solid #cee4f4;
margin:-97px 119px
}
@keyframes flo{
0%{margin:3px 0;}
50%{margin:0 0px;}
100%{margin:-3px 0;}
}
@-moz-keyframes flo{
0%{margin:3px 0;}
50%{margin:0 0px;}
100%{margin:-3px 0;}
}
@-webkit-keyframes flo{
0%{margin:3px 0;}
50%{margin:0 0px;}
100%{margin:-3px 0;}
}
