CSS3白鶴展翅效果

antzone發表於2018-07-09
CSSS3

分享一段程式碼例項，它實現了白鶴展翅效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
    background: black;
}
 
.rayo {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 300px solid transparent;
    border-right: 300px solid transparent;
    border-bottom: 300px solid rgba(255,255,255,.03);
    margin: 300px 102px;
}
 
.rayo::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 300px solid rgba(255,255,255,.03);
    margin: -300px -95px;
}
 
.rayo::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 121px solid transparent;
    border-right: 121px solid transparent;
    border-bottom: 300px solid rgba(255,255,255,.03);
    margin: -300px -127px;
}
 
.cisne {
    position: absolute;
    margin: -50px 112px;
    transform: scale(.7);
    animation: sube 3s alternate infinite;
}
 
.cisne3 {
    position: absolute;
    margin: 612px 570px;
    opacity: .3;
    transform: scale(.4) rotate(-180deg);
    animation: sube3 3s alternate infinite;
}
 
.cabeza {
    position: absolute;
    margin: 0 0;
    width: 30px;
    height: 30px;
    background: red;
}
 
.contenedor {
    position: relative;
    width: 800px;
    height: 600px;
    background: #122838;
    margin: 121px auto;
}
 
.contenedor::before {
    content: "";
    position: absolute;
    width: 800px;
    height: 300px;
    background: #173242;
    margin: 300px 0;
}
 
.cuello {
    position: absolute;
    width: 60px;
    height: 172px;
    border-top: 40px solid white;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-radius: 132px / 100px;
    margin: 212px 300px;
    transform: rotate(-70deg);
}
 
.cuello::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 150px;
    border-top: 40px solid white;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-radius: 100px / 100px;
    margin: -46px -65px;
    transform: rotate(60deg);
}
 
.cuello::after {
    content: "";
    position: absolute;
    width: 172px;
    height: 150px;
    border-top: 43px solid white;
    border-left: 40px solid transparent;
    border-right: 60px solid transparent;
    border-radius: 182px / 100px;
    margin: -53px -172px;
    transform: rotate(187deg);
}
 
.cuello3 {
    position: absolute;
    width: 75px;
    height: 89px;
    border-top: 40px solid white;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-radius: 121px / 100px;
    margin: 242px 293px;
    transform: rotate(65deg);
}
 
.body {
    position: absolute;
    width: 231px;
    height: 165px;
    border-radius: 100%;
    background: #ccc;
    margin: 423px 300px;
}
 
.body::before {
    content: "";
    display: block;
    width: 152px;
    height: 152px;
    border-radius: 100%;
    border-bottom: 70px solid #ccc;
    transform: rotate(-40deg);
    margin: -121px 63px;
}
 
.body3 {
    position: absolute;
    width: 216px;
    height: 162px;
    border-radius: 100%;
    background: white;
    margin: 421px 307px;
}
 
.body3::before {
    content: "";
    display: block;
    width: 142px;
    height: 132px;
    border-radius: 100%;
    border-bottom: 60px solid white;
    transform: rotate(-35deg);
    margin: -85px 60px;
}
 
.body3::after {
    content: "";
    display: block;
    width: 142px;
    height: 142px;
    border-radius: 100%;
    border-bottom: 60px solid white;
    transform: rotate(-45deg);
    margin: -241px 30px;
}
 
.head {
    position: absolute;
    width: 60px;
    height: 73px;
    border-radius: 100%;
    background: white;
    margin: 271px 259px;
    animation: baja 3s alternate infinite;
}
 
.ala {
    position: absolute;
    width: 21px;
    height: 227px;
    border-radius: 21px 0px 0px 0px;
    background: #ddd;
    margin: 172px 512px;
    transform: rotate(21deg);
}
 
.ala::before {
    content: "";
    position: absolute;
    width: 21px;
    height: 192px;
    border-radius: 21px 0px 0px 0px;
    background: #ddd;
    margin: -135px 70px;
    transform: rotate(50deg);
}
 
.ala3 {
    position: absolute;
    width: 21px;
    height: 261px;
    border-radius: 0px 21px 0px 0px;
    background: #ccc;
    margin: 172px 312px;
    transform: rotate(-21deg);
}
 
.ala3::before {
    content: "";
    position: absolute;
    width: 21px;
    height: 192px;
    border-radius: 21px 0px 0px 0px;
    background: #ccc;
    margin: -135px -70px;
    transform: rotate(-50deg);
}
 
.alas, .alas3 {
    position: absolute;
    margin: 0 0;
    animation: sube5 3s alternate infinite;
}
 
.a1 {
    position: absolute;
    width: 251px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .3);
    margin: 149px 550px;
    transform: rotate(-21deg);
}
 
.a1::before {
    content: "";
    position: absolute;
    width: 251px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .3);
    margin: 12px -12px;
    transform: rotate(3deg);
}
 
.a1::after {
    content: "";
    position: absolute;
    width: 241px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .3);
    margin: 21px -12px;
    transform: rotate(7deg);
}
 
.a2 {
    position: absolute;
    width: 241px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .4);
    margin: 185px 545px;
    transform: rotate(-9deg);
}
 
.a2::before {
    content: "";
    position: absolute;
    width: 231px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .4);
    margin: 9px -9px;
    transform: rotate(5deg);
}
 
.a2::after {
    content: "";
    position: absolute;
    width: 221px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .4);
    margin: 21px -12px;
    transform: rotate(9deg);
}
 
.a3 {
    position: absolute;
    width: 212px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 221px 535px;
    transform: rotate(5deg);
}
 
.a3::before {
    content: "";
    position: absolute;
    width: 212px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 9px 0px;
    transform: rotate(7deg);
}
 
.a3::after {
    content: "";
    position: absolute;
    width: 201px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 21px 0px;
    transform: rotate(12deg);
}
 
.a4 {
    position: absolute;
    width: 201px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 251px 530px;
    transform: rotate(25deg);
}
 
.a4::before {
    content: "";
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 12px 3px;
    transform: rotate(3deg);
}
 
.a4::after {
    content: "";
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 21px 3px;
    transform: rotate(7deg);
}
 
.a5 {
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 281px 521px;
    transform: rotate(35deg);
}
 
.a5::before {
    content: "";
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 12px 3px;
    transform: rotate(3deg);
}
 
.a5::after {
    content: "";
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 21px 3px;
    transform: rotate(7deg);
}
 
.a6 {
    position: absolute;
    width: 182px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 312px 512px;
    transform: rotate(43deg);
}
 
.a6::before {
    content: "";
    position: absolute;
    width: 182px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 12px 3px;
    transform: rotate(5deg);
}
 
.a6::after {
    content: "";
    position: absolute;
    width: 172px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 21px 3px;
    transform: rotate(7deg);
}
 
.a7 {
    position: absolute;
    width: 172px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 330px 495px;
    transform: rotate(53deg);
}
 
.a7::before {
    content: "";
    position: absolute;
    width: 172px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 12px -3px;
    transform: rotate(3deg);
}
 
.a7::after {
    content: "";
    position: absolute;
    width: 172px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 21px -3px;
    transform: rotate(5deg);
}
 
.a8 {
    position: absolute;
    width: 162px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 355px 475px;
    transform: rotate(63deg);
}
 
.a8::before {
    content: "";
    position: absolute;
    width: 152px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 12px 3px;
    transform: rotate(7deg);
}
 
.a8::after {
    content: "";
    position: absolute;
    width: 152px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 21px 3px;
    transform: rotate(12deg);
}
 
.a9 {
    position: absolute;
    width: 142px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 355px 455px;
    transform: rotate(83deg);
}
 
.a9::before {
    content: "";
    position: absolute;
    width: 132px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 12px 3px;
    transform: rotate(7deg);
}
 
.a9::after {
    content: "";
    position: absolute;
    width: 152px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 21px 3px;
    transform: rotate(12deg);
}
 
.b1 {
    position: absolute;
    width: 251px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .3);
    margin: 147px 30px;
    transform: rotate(21deg);
}
 
.b1::before {
    content: "";
    position: absolute;
    width: 251px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .3);
    margin: 12px 9px;
    transform: rotate(-3deg);
}
 
.b1::after {
    content: "";
    position: absolute;
    width: 241px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .3);
    margin: 21px 12px;
    transform: rotate(-7deg);
}
 
.b2 {
    position: absolute;
    width: 241px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .4);
    margin: 179px 37px;
    transform: rotate(9deg);
}
 
.b2::before {
    content: "";
    position: absolute;
    width: 231px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .4);
    margin: 9px 9px;
    transform: rotate(-5deg);
}
 
.b2::after {
    content: "";
    position: absolute;
    width: 221px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .4);
    margin: 21px 21px;
    transform: rotate(-9deg);
}
 
.b3 {
    position: absolute;
    width: 212px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 212px 65px;
    transform: rotate(-5deg);
}
 
.b3::before {
    content: "";
    position: absolute;
    width: 212px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 9px 3px;
    transform: rotate(-7deg);
}
 
.b3::after {
    content: "";
    position: absolute;
    width: 201px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 21px 3px;
    transform: rotate(-12deg);
}
 
.b4 {
    position: absolute;
    width: 201px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 241px 83px;
    transform: rotate(-25deg);
}
 
.b4::before {
    content: "";
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 14px 12px;
    transform: rotate(-3deg);
}
 
.b4::after {
    content: "";
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 25px 12px;
    transform: rotate(-7deg);
}
 
.b5 {
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 271px 112px;
    transform: rotate(-35deg);
}
 
.b5::before {
    content: "";
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 12px 3px;
    transform: rotate(-3deg);
}
 
.b5::after {
    content: "";
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 21px 3px;
    transform: rotate(-7deg);
}
 
.b6 {
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 291px 142px;
    transform: rotate(-43deg);
}
 
.b6::before {
    content: "";
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 12px 3px;
    transform: rotate(-3deg);
}
 
.b6::after {
    content: "";
    position: absolute;
    width: 192px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 21px 3px;
    transform: rotate(-7deg);
}
 
.b7 {
    position: absolute;
    width: 172px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 325px 172px;
    transform: rotate(-53deg);
}
 
.b7::before {
    content: "";
    position: absolute;
    width: 172px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 12px 3px;
    transform: rotate(-3deg);
}
 
.b7::after {
    content: "";
    position: absolute;
    width: 172px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .5);
    margin: 21px 3px;
    transform: rotate(-5deg);
}
 
.b8 {
    position: absolute;
    width: 162px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 355px 201px;
    transform: rotate(-63deg);
}
 
.b8::before {
    content: "";
    position: absolute;
    width: 152px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 12px 3px;
    transform: rotate(-7deg);
}
 
.b8::after {
    content: "";
    position: absolute;
    width: 152px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 23px 5px;
    transform: rotate(-12deg);
}
 
.b9 {
    position: absolute;
    width: 142px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 375px 241px;
    transform: rotate(-83deg);
}
 
.b9::before {
    content: "";
    position: absolute;
    width: 132px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 12px 3px;
    transform: rotate(-7deg);
}
 
.b9::after {
    content: "";
    position: absolute;
    width: 152px;
    height: 21px;
    border-radius: 100%;
    background: rgba(255, 255, 255, .6);
    margin: 21px 12px;
    transform: rotate(-19deg);
}
 
.ojo {
    position: absolute;
    width: 25px;
    height: 30px;
    border-radius: 100%;
    border-bottom: 12px solid black;
    margin: 35px 3px;
    transform: rotate(-70deg);
}
 
.ojo::before {
    content: "";
    position: absolute;
    width: 33px;
    height: 33px;
    border-radius: 100%;
    border-bottom: 21px solid black;
    margin: 17px 12px;
    transform: rotate(90deg);
}
 
.ojo::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: black;
    margin: 25px 21px;
}
 
.boca {
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 33px solid #d84864;
    border-left: 27px solid transparent;
    transform: rotate(-192deg);
    margin: 65px 21px;
}
 
.luna {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background: white;
    margin: 9px 350px;
    box-shadow: 0 0 21px #FFf;
}
 
.luna::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: .3;
    border-radius: 100%;
    background: white;
    margin: 530px 35px;
    box-shadow: 0 0 21px #FFf;
}
 
.s1 {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: white;
    margin: 90px 50px;
    box-shadow: 0 0 3px 3px rgba(255,255,255,.3);
    animation: brillo 5s alternate infinite;
}
 
.s1::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: white;
    margin: 0px 695px;
    box-shadow: 0 0 3px 3px rgba(255,255,255,.3);
    animation: brillo 5s alternate infinite;
}
 
.s2 {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: white;
    margin: 212px 121px;
    box-shadow: 0 0 3px 3px rgba(255,255,255,.3);
    animation: brillo 5s alternate infinite;
}
 
.s2::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: white;
    margin: 0px 540px;
    box-shadow: 0 0 3px 3px rgba(255,255,255,.3);
    animation: brillo 5s alternate infinite;
}
 
.s3 {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: white;
    margin: 500px 221px;
    opacity: .3;
    box-shadow: 0 0 3px 3px rgba(255,255,255,.3);
    animation: brillo 5s alternate infinite;
}
 
.s3::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: white;
    margin: 0px 360px;
    box-shadow: 0 0 3px 3px rgba(255,255,255,.3);
    animation: brillo 5s alternate infinite;
}
 
.s5 {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: white;
    margin: 440px 271px;
    opacity: .3;
    box-shadow: 0 0 3px 3px rgba(255,255,255,.3);
    animation: brillo 5s alternate infinite;
}
 
.s5::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: white;
    margin: 0px 261px;
    box-shadow: 0 0 3px 3px rgba(255,255,255,.3);
    animation: brillo 5s alternate infinite;
}
 
@keyframes sube {
    0% {
        margin: -50px 112px;
    }
 
    50% {
        margin: -47px 112px;
    }
}
 
@keyframes sube3 {
    0% {
        margin: 621px 570px;
    }
 
    50% {
        margin: 612px 570px;
    }
}
 
@keyframes sube5 {
    0% {
        margin: 0px 0px;
    }
 
    50% {
        margin: 3px 3px;
    }
}
 
@keyframes baja {
    0% {
        margin: 271px 259px;
    }
 
    50% {
        margin: 275px 259px;
    }
}
 
@keyframes brillo {
    0% {
        box-shadow: 0 0 3px 3px rgba(255,255,255,.3);
    }
 
    50% {
        box-shadow: 0 0 3px 3px rgba(255,255,255,.7);
    }
 
    100% {
        box-shadow: 0 0 3px 3px rgba(255,255,255,.3);
    }
}
</style>
</head>
<body>
  <div class="contenedor">
    <div class="rayo"></div>
    <div class="cisne">
      <div class="alas">
        <span class="a1"></span>
        <span class="a2"></span>
        <span class="a3"></span>
        <span class="a4"></span>
        <span class="a5"></span>
        <span class="a6"></span>
        <span class="a7"></span>
        <span class="a8"></span>
        <span class="a9"></span>
      </div>
      <div class="alas3">
        <span class="b1"></span>
        <span class="b2"></span>
        <span class="b3"></span>
        <span class="b4"></span>
        <span class="b5"></span>
        <span class="b6"></span>
        <span class="b7"></span>
        <span class="b8"></span>
        <span class="b9"></span>
      </div>
      <div class="ala3">
      </div>
      <div class="cuello"></div>
      <div class="cuello3"></div>
      <div class="body"></div>
      <div class="head"><div class="boca"></div><div class="ojo"></div></div>
      <div class="ala"></div>
      <div class="body3"></div>
    </div>
    <div class="cisne3">
      <div class="alas">
        <span class="a1"></span>
        <span class="a2"></span>
        <span class="a3"></span>
        <span class="a4"></span>
        <span class="a5"></span>
        <span class="a6"></span>
        <span class="a7"></span>
        <span class="a8"></span>
        <span class="a9"></span>
      </div>
      <div class="alas3">
        <span class="b1"></span>
        <span class="b2"></span>
        <span class="b3"></span>
        <span class="b4"></span>
        <span class="b5"></span>
        <span class="b6"></span>
        <span class="b7"></span>
        <span class="b8"></span>
        <span class="b9"></span>
      </div>
      <div class="ala3">
 
      </div>
      <div class="cabeza3">
        <div class="cuello"></div>
        <div class="cuello3"></div>
        <div class="body"></div>
        <div class="head"><div class="boca"></div><div class="ojo"></div></div>
      </div>
      <div class="ala"></div>
      <div class="body3"></div>
 
    </div>
    <div class="luna"></div>
    <div class="estrellas">
      <span class="s1"></span>
      <span class="s2"></span>
    </div>
    <div class="estrellas3">
      <span class="s3"></span>
      <span class="s5"></span>
    </div>
  </div>
</body>
</html>

相關文章