div+css实现可爱两个海琼跳舞旋转代码
代码语言：html
所属分类：动画
代码描述：div+css实现可爱两个海琼跳舞旋转代码
代码标签： div css 可爱 两个 海琼 跳舞 旋转 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body{
background: rgb(18, 98, 121);
width: 100%;
}
#orilla{
width: 100%;
height: 30px;
background: -moz-radial-gradient(center, ellipse cover, rgba(159,238,242,1) 53%, rgba(122,185,193,1) 84%, rgba(98,208,214,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(53%,rgba(159,238,242,1)), color-stop(84%,rgba(122,185,193,1)), color-stop(100%,rgba(98,208,214,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(159,238,242,1) 53%,rgba(122,185,193,1) 84%,rgba(98,208,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(159,238,242,1) 53%,rgba(122,185,193,1) 84%,rgba(98,208,214,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(159,238,242,1) 53%,rgba(122,185,193,1) 84%,rgba(98,208,214,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(159,238,242,1) 53%,rgba(122,185,193,1) 84%,rgba(98,208,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9feef2', endColorstr='#62d0d6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
margin:0 auto;
overflow:hidden;
}
#cuadro{
width: 70%;
height: 850px;
position:relative;
background: rgb(18, 98, 121);
margin: 0 auto;
overflow:hidden;
}
#agua{
width: 100%;
height: 880px;
position:absolute;
float:left;
background-color: rgba(255, 255, 255, 0.16);
border:9px solid rgb(18, 98, 121);
overflow:hidden;
z-index:50;
top:0px;
}
#fondo{
width: 100%;
height: 30px;
position:absolute;
float:left;
background: rgb(98,208,214); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(98,208,214,1) 27%, rgba(0,126,158,1) 83%, rgba(122,185,193,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(27%,rgba(98,208,214,1)), color-stop(83%,rgba(0,126,158,1)), color-stop(100%,rgba(122,185,193,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(98,208,214,1) 27%,rgba(0,126,158,1) 83%,rgba(122,185,193,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(98,208,214,1) 27%,rgba(0,126,158,1) 83%,rgba(122,185,193,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(98,208,214,1) 27%,rgba(0,126,158,1) 83%,rgba(122,185,193,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(98,208,214,1) 27%,rgba(0,126,158,1) 83%,rgba(122,185,193,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62d0d6', endColorstr='#7ab9c1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
top:850px;
overflow:hidden;
}
#delfin {
width: 530px;
height: 370px;
-webkit-transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
transform: rotate(-300deg);
background: rgb(140, 142, 145); /* Old browsers */
border-right: 3px solid #B8B5B5;
border-radius: 100%;
position: absolute;
float:left;
left:633px;
top:221px;
box-shadow: 6px -12px 12px #C3BDD3 inset, 3px -3px 50px #281602 inset;
-moz-box-shadow: 6px -12px 12px #C3BDD3 inset, 3px -3px 50px #281602 inset;
-webkit-box-shadow: 6px -12px 12px #C3BDD3 inset, 3px -3px 50px #281602 inset;
-o-box-shadow: 6px -12px 12px #C3BDD3 inset, 3px -3px 50px #281602 inset;
-ms-box-shadow: 6px -12px 12px #C3BDD3 inset, 3px -3px 50px #281602 inset;
-webkit-animation: nadar 21s alternate infinite;
-moz-animation: nadar 21s alternate infinite;
-o-animation: nadar 21s alternate infinite;
}
#delfin::before{
content:"";
width: 421px;
height: 330px;
background: rgb(18, 98, 121);
border-radius: 100%;
position: absolute;
left: 132px;
top:162px;
border-top: 50px solid #CEDCE7;
}
#delfin3{
width: 330px;
height: 470px;
-webkit-transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
transform: rotate(-300deg);
background: rgb(140, 142, 145); /* Old browsers */
border-radius: 100%;
position: absolute;
float:left;
left:251px;
top:121px;
box-shadow: 6px -12px 12px #C3BDD3 inset, 3px -3px 50px #281602 inset;
-moz-box-shadow: 6px -12px 12px #C3BDD3 inset, 3px -3px 50px #281602 inset;
-webkit-box-shadow: 6px -12px 12px #C3BDD3 inset, 3px -3px 50px #281602 inset;
-o-box-shadow: 6px -12px 12px #C3BDD3 inset, 3px -3px 50px #281602 inset;
-ms-box-shadow: 6px -12px 12px #C3BDD3 inset, 3px -3px 50px #281602 inset;
-webkit-animation: nadar 21s alternate infinite;
-moz-animation: nadar 21s alternate infinite;
-o-animation: nadar 21s alternate infinite;
}
#delfin3::before{
content:"";
width: 172px;
height: 403px;
background: rgb(18, 98, 121);
-webkit-transform: rotate(-345deg);
-moz-transform: rotate(-345deg);
-ms-transform: rotate(-345deg);
-o-transform: rotate(-345deg);
transform: rotate(-345deg);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
position: absolute;
left: 132px;
top:75px;
border-left: 30px solid #CEDCE7;
border-right:1px solid rgb(18, 98, 121);
}
#boca2{
-webkit-border-radius: 0px 30px 12px 0px;
border-radius: 0px 30px 12px 0px;
transform: rotate(-197deg);
-moz-transform: rotate(-197deg);
-webkit-transform: rotate(-197deg);
-o-transform: rotate(-197deg);
-ms-transform: rotate(-197deg);
background:#8B8796;
height: 93px;
position: relative;
width: 21px;
top: 186px;
left: 112px;
box-shadow: 0px -3px 35px #8D8D8F inset;
-moz-box-shadow: 0px -3px 35px #8D8D8F inset;
-webkit-box-shadow: 0px -3px 35px #8D8D8F inset;
-o-box-shadow: 0px -3px 35px #8D8D8F inset;
-ms-box-shadow: 0px -3px 35px #8D8D8F inset
border-left: 3px solid #DA9C9C;
border-right: 12px solid rgb(187, 183, 202);
border-left: 9px solid rgb(162, 162, 162);
}
#boca1{
-webkit-border-radius: 30px 0px 0px 12px;
border-radius: 30px 0px 0px 12px;
transform: rotate(-197deg);
-moz-transform: rotate(-197deg);
-webkit-transform: rotate(-197deg);
-o-transform: rotate(-197deg);
-ms-transform: rotate(-197deg);
background:#8B8796;
height: 93px;
position: relative;
border-right: 7px solid #DA9C9C;
border-left: 12px solid rgb(143, 149, 162);
width: 21px;
box-shadow: -3px 3px -3px #3A2104 inset;
-moz-box-shadow:3px 3px -3px #3A2104 inset;
-webkit-box-shadow: 3px 3px -3px #3A2104 inset;
-o-box-shadow: 3px 3px -3px #3A2104 inset;
-ms-box-shadow: 3px 3px -3px #3A2104 inset;
-webkit-animation: boca 25s alternate infinite;
-moz-animation: boca 25s alternate infinite;
-o-animation: boca 25s alternate infinite;
top: 275px;
left: 124px;
}
#boca3{
-webkit-border-radius: 12px 0px 0px 30px;
border-radius: 12px 0px 0px 30px;
transform: rotate(-73deg);
-moz-transform: rotate(-73deg);
-webkit-transform: rotate(-73deg);
-o-transform: rotate(-73deg);
-ms-transform: rotate(-73deg);
background:#8B8796;
height: 83px;
position: relative;
border-right: 7px solid #DA9C9C;
border-left: 3px solid rgb(143, 149, 162);
width: 21px;
box-shadow: -3px 3px -3px #3A2104 inset;
-moz-box-shadow:3px 3px -3px #3A2104 inset;
-webkit-box-shadow: 3px 3px -3px #3A2104 inset;
-o-box-shadow: 3px 3px -3px #3A2104 inset;
-ms-box-shadow: 3px 3px -3px #3A2104 inset;
top: 7px;
left: 283px;
}
#boca4{
-webkit-border-radius: 0px 12px 30px 0px;
border-radius: 0px 12px 30px 0px;
transform: rotate(-73deg);
-moz-transform: rotate(-73deg);
-webkit-transform: rotate(-73deg);
-o-transform: rotate(-73deg);
-ms-transform: rotate(-73deg);
background:#8B8796;
height: 83px;
position: relative;
width: 21px;
top: -88px;
left: 287px;
box-shadow: 0px -3px 35px #8D8D8F inset;
-moz-box-shadow: 0px -3px 35px #8D8D8F inset;
-webkit-box-shadow: 0px -3px 35spx #8D8D8F inset;
-o-box-shadow: 0px -3px 35px #8D8D8F inset;
-ms-box-shadow: 0px -3px 35px #8D8D8F inset;
border-right: 9px solid rgb(123, 121, 131);
border-left:1px solid rgb(162, 162, 162);
-webkit-animation: boca3 25s alternate infinite;
-moz-animation: boca3 25s alternate infinite;
-o-animation: boca3 25s alternate infinite;
}
@keyframes nadar{
0% {
transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-webkit-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);}
25% {
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
30% {
top:227px;
transform: rotate(-642deg);
-moz-transform: rotate(-642deg);
-webkit-transform: rotate(-642deg);
-o-transform: rotate(-642deg);
-ms-transform: rotate(-642deg);}
50% {
top:201px;
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
75% {
transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-webkit-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);}
90% {
top:201px;
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
100% {
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
}
@-moz-keyframes nadar /*Firefox*/{
0% {
transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-webkit-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);}
25% {
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
30% {
top:227px;
transform: rotate(-642deg);
-moz-transform: rotate(-642deg);
-webkit-transform: rotate(-642deg);
-o-transform: rotate(-642deg);
-ms-transform: rotate(-642deg);}
50% {
top:201px;
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
75% {
transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-webkit-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);}
90% {
top:201px;
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
100% {
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
}
@-webkit-keyframes nadar /* Safari y Chrome */{
0% {
transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-webkit-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);}
25% {
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
30% {
top:227px;
transform: rotate(-642deg);
-moz-transform: rotate(-642deg);
-webkit-transform: rotate(-642deg);
-o-transform: rotate(-642deg);
-ms-transform: rotate(-642deg);}
50% {
top:201px;
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
75% {
transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-webkit-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);}
90% {
top:201px;
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
100% {
transform: rotate(-321deg);
-moz-transform: rotate(-321deg);
-webkit-transform: rotate(-321deg);
-o-transform: rotate(-321deg);
-ms-transform: rotate(-321deg);}
}
.cola1{
-webkit-border-radius: 0px 290px 21px 330px;
border-radius: 0px 290px 21px 330px;
transform: rotate(63deg);
-moz-transform: rotate(63deg);
-webkit-transform: rotate(63deg);
-o-transform: rotate(63deg);
-ms-transform: rotate(63deg);
box-shadow: -6px -3px 3px #AAA6B3 inset;
-moz-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-box-shadow: -6px -3px 3px #AAA6B3 inset;
-o-box-shadow: -6px -3px 3px #AAA6B3 inset;
-ms-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-animation: coleteo 3s alternate infinite;
-moz-animation: coleteo 3s alternate infinite;
-o-animation: coleteo 3s alternate infinite;
height: 124px;
position: absolute;
float: left;
top: 221px;
background:rgb(124, 123, 124);
width:170px;
left:430px;
}
.cola1::before{
content:"";
-webkit-border-radius: 0px 290px 21px 330px;
border-radius: 0px 290px 21px 330px;
transform: rotate(-145deg);
-moz-transform: rotate(-145deg);
-webkit-transform: rotate(-145deg);
-o-transform: rotate(-145deg);
-ms-transform: rotate(-145deg);
box-shadow: -6px -3px 3px #AAA6B3 inset;
-moz-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-box-shadow: -6px -3px 3px #AAA6B3 inset;
-o-box-shadow: -6px -3px 3px #AAA6B3 inset;
-ms-box-shadow: -6px -3px 3px #AAA6B3 inset;
height: 124px;
position: absolute;
top: -112px;
background:rgb(124, 123, 124);
width:170px;
left:-90px;
}
.cola2{
-webkit-border-radius: 0px 290px 21px 330px;
border-radius: 0px 290px 21px 330px;
transform: rotate(63deg);
-moz-transform: rotate(63deg);
-webkit-transform: rotate(63deg);
-o-transform: rotate(63deg);
-ms-transform: rotate(63deg);
box-shadow: -6px -3px 3px #AAA6B3 inset;
-moz-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-box-shadow: -6px -3px 3px #AAA6B3 inset;
-o-box-shadow: -6px -3px 3px #AAA6B3 inset;
-ms-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-animation: coleteo 3s alternate infinite;
-moz-animation: coleteo 3s alternate infinite;
-o-animation: coleteo 3s alternate infinite;
height: 95px;
position: absolute;
float: left;
top: 483px;
background:rgb(124, 123, 124);
width:132px;
left:90px;
}
.cola2::before{
content:"";
-webkit-border-radius: 0px 290px 21px 330px;
border-radius: 0px 290px 21px 330px;
transform: rotate(-139deg);
-moz-transform: rotate(-139deg);
-webkit-transform: rotate(-139deg);
-o-transform: rotate(-139deg);
-ms-transform: rotate(-139deg);
box-shadow: -6px -3px 3px #AAA6B3 inset;
-moz-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-box-shadow: -6px -3px 3px #AAA6B3 inset;
-o-box-shadow: -6px -3px 3px #AAA6B3 inset;
-ms-box-shadow: -6px -3px 3px #AAA6B3 inset;
height: 95px;
position: absolute;
top: -90px;
background:rgb(124, 123, 124);
width:132px;
left:-70px;
}
.aleta{
-webkit-border-radius: 0px 21px 12px 70px;
border-radius: 0px 21px 12px 70px;
transform: rotate(-285deg);
-moz-transform: rotate(-285deg);
-webkit-transform: rotate(-285deg);
-o-transform: rotate(-285deg);
-ms-transform: rotate(-285deg);
box-shadow: -6px -3px 3px #AAA6B3 inset;
-moz-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-box-shadow: -6px -3px 3px #AAA6B3 inset;
-o-box-shadow: -6px -3px 3px #AAA6B3 inset;
-ms-box-shadow: -6px -3px 3px #AAA6B3 inset;
height: 65px;
position: relative;
top: -473px;
background:rgb(124, 123, 124);
width: 75px;
left:140px;
}
.aleta7{
-webkit-border-radius: 70px 12px 21px 0px;
border-radius: 70px 12px 21px 0px;
transform: rotate(-350deg);
-moz-transform: rotate(-350deg);
-webkit-transform: rotate(-350deg);
-o-transform: rotate(-350deg);
-ms-transform: rotate(-350deg);
box-shadow: -6px -3px 3px #AAA6B3 inset;
-moz-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-box-shadow: -6px -3px 3px #AAA6B3 inset;
-o-box-shadow: -6px -3px 3px #AAA6B3 inset;
-ms-box-shadow: -6px -3px 3px #AAA6B3 inset;
height: 55px;
position: relative;
top: -208px;
background:rgb(124, 123, 124);
width: 63px;
left:-59px;
}
.aleta3{
-webkit-border-radius: 0px 621px 0px 540px;
border-radius: 0px 621px 0px 540px;
transform: rotate(-403deg);
-moz-transform: rotate(-403deg);
-webkit-transform: rotate(-403deg);
-o-transform: rotate(-403deg);
-ms-transform: rotate(-403deg);
box-shadow: -6px -3px 3px #AAA6B3 inset;
-moz-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-box-shadow: -6px -3px 3px #AAA6B3 inset;
-o-box-shadow: -6px -3px 3px #AAA6B3 inset;
-ms-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-animation: ale 3s alternate infinite;
-moz-animation: ale 3s alternate infinite;
-o-animation: ale 3s alternate infinite;
height: 102px;
position: relative;
top: -187px;
background:rgb(124, 123, 124);
width: 102px;
left:241px;
}
.aleta4{
-webkit-border-radius: 0px 621px 0px 540px;
border-radius: 0px 621px 0px 540px;
transform: rotate(-406deg);
-moz-transform: rotate(-406deg);
-webkit-transform: rotate(-406deg);
-o-transform: rotate(-406deg);
-ms-transform: rotate(-406deg);
box-shadow: -6px -3px 3px #AAA6B3 inset;
-moz-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-box-shadow: -6px -3px 3px #AAA6B3 inset;
-o-box-shadow: -6px -3px 3px #AAA6B3 inset;
-ms-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-animation: ale 3s alternate infinite;
-moz-animation: ale 3s alternate infinite;
-o-animation: ale 3s alternate infinite;
height: 90px;
position: relative;
top: -63px;
background:rgb(124, 123, 124);
width: 80px;
left:281px;
}
.aleta5{
-webkit-border-radius: 0px 621px 0px 540px;
border-radius: 0px 621px 0px 540px;
transform: rotate(25deg);
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
box-shadow: -6px -3px 3px #AAA6B3 inset;
-moz-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-box-shadow: -6px -3px 3px #AAA6B3 inset;
-o-box-shadow: -6px -3px 3px #AAA6B3 inset;
-ms-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-animation: ale3 3s alternate infinite;
-moz-animation: ale3 3s alternate infinite;
-o-animation: ale3 3s alternate infinite;
height: 80px;
position: relative;
top: -12px;
background:rgb(124, 123, 124);
width: 70px;
left:165px;
}
.aleta6{
-webkit-border-radius: 0px 621px 0px 540px;
border-radius: 0px 621px 0px 540px;
transform: rotate(25deg);
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
box-shadow: -6px -3px 3px #AAA6B3 inset;
-moz-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-box-shadow: -6px -3px 3px #AAA6B3 inset;
-o-box-shadow: -6px -3px 3px #AAA6B3 inset;
-ms-box-shadow: -6px -3px 3px #AAA6B3 inset;
-webkit-animation: ale3 3s alternate infinite;
-moz-animation: ale3 3s alternate infinite;
-o-animation: ale3 3s alternate infinite;
height: 80px;
position: relative;
top: -109px;
background:rgb(124, 123, 124);
width: 80px;
left:143px;
}
#burbujas{
left: -63px;
position: absolute;
z-index:35;
}
.burbuja {
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0.16);
border: 1px solid #129ECA;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.x1 {
-webkit-animation: burbujeo 15s linear infinite;
-moz-animation: burbujeo 15s linear infinite;
-o-animation: burbujeo 15s linear infinite;
}
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: burbujeo 25s linear infinite;
-moz-animation: burbujeo 25s linear infinite;
-o-animation: burbujeo 25s .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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