Cách tạo Hiệu Ứng Chim Bay Hoàn Toàn Bằng Css Cho Blogspot.

Ngay tại bài này mình sẽ hướng dẫn các bạn cách để tạo ra hàng loạt chú chim bay chỉ với css và html. Với các bước cũng khá đơn giãn.

+ Mục Đích:

Trang trí blog
Tương hợp với các code khác
...

+ Các Bước Làm:

Chèn đoạn này ở bất cứ đâu bạn muốn nó hiển thị:

<div class="container container-bird">
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
<div class="wing wing-left">
<div class="wing-left-top"></div>
</div>
<div class="wing wing-right">
<div class="wing-right-top"></div>
</div>
</div>
</div>

Chèn đoạn này trên ]]></b:skin>

@import url("https://fonts.googleapis.com/css?family=Lato|Russo+One");
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.container-bird {
-webkit-perspective: 2000px;
perspective: 2000px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bird {
position: absolute;
z-index: 1000;
left: 50%;
top: 50%;
height: 40px;
width: 50px;
-webkit-transform: translate3d(-100vw, 0, 0) rotateY(90deg);
transform: translate3d(-100vw, 0, 0) rotateY(90deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.bird-container {
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(50px, 30px, -300px);
transform: translate3d(50px, 30px, -300px);
}
.wing {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 3px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
z-index: 300;
}
.wing-left {
background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
-webkit-transform: translate3d(0, 0, 0) rotateX(-30deg);
transform: translate3d(0, 0, 0) rotateX(-30deg);
-webkit-animation: wingLeft 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
animation: wingLeft 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}
.wing-right {
background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
-webkit-transform: translate3d(0, 0, 0) rotateX(-30deg);
transform: translate3d(0, 0, 0) rotateX(-30deg);
-webkit-animation: wingRight 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
animation: wingRight 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}
.wing-right-top,
.wing-left-top {
border-right: 25px solid transparent;
border-left: 25px solid transparent;
top: -20px;
width: 100%;
position: absolute;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.wing-right-top {
border-bottom: 20px solid #b8a5d1;
-webkit-transform: translate3d(0, 0, 0) rotateX(60deg);
transform: translate3d(0, 0, 0) rotateX(60deg);
-webkit-animation: wingRightTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
animation: wingRightTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}
.wing-left-top {
border-bottom: 20px solid #7979a8;
-webkit-transform: translate3d(0, 0, 0) rotateX(-60deg);
transform: translate3d(0, 0, 0) rotateX(-60deg);
-webkit-animation: wingLeftTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
animation: wingLeftTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}
.bird-anim:nth-child(1) {
-webkit-animation: bird1 30s linear infinite forwards;
animation: bird1 30s linear infinite forwards;
}
.bird-anim:nth-child(2) {
-webkit-animation: bird2 30s linear infinite forwards;
animation: bird2 30s linear infinite forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
z-index: -1;
}
.bird-anim:nth-child(3) {
-webkit-animation: bird3 30s linear infinite forwards;
animation: bird3 30s linear infinite forwards;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.bird-anim:nth-child(4) {
-webkit-animation: bird4 30s linear infinite forwards;
animation: bird4 30s linear infinite forwards;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bird-anim:nth-child(5) {
-webkit-animation: bird5 30s linear infinite forwards;
animation: bird5 30s linear infinite forwards;
-webkit-animation-delay: 14s;
animation-delay: 14s;
}
.bird-anim:nth-child(6) {
-webkit-animation: bird6 30s linear infinite forwards;
animation: bird6 30s linear infinite forwards;
-webkit-animation-delay: 10s;
animation-delay: 10s;
z-index: -1;
}
@-webkit-keyframes rotate {
0%, 100% {
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes rotate {
0%, 100% {
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes snore {
0%, 100% {
-webkit-transform: scale(1) rotate(30deg);
transform: scale(1) rotate(30deg);
}
50% {
-webkit-transform: scale(0.5) rotate(30deg);
transform: scale(0.5) rotate(30deg);
border-bottom-left-radius: 50%;
}
}
@keyframes snore {
0%, 100% {
-webkit-transform: scale(1) rotate(30deg);
transform: scale(1) rotate(30deg);
}
50% {
-webkit-transform: scale(0.5) rotate(30deg);
transform: scale(0.5) rotate(30deg);
border-bottom-left-radius: 50%;
}
}
@-webkit-keyframes twinkle {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 0.3;
}
}
@keyframes twinkle {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 0.3;
}
}
@-webkit-keyframes wingLeft {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(-50deg);
transform: translate3d(0, 0, 0) rotateX(-50deg);
}
50% {
-webkit-transform: translate3d(0, -20px, 0) rotateX(-130deg);
transform: translate3d(0, -20px, 0) rotateX(-130deg);
background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
}
}
@keyframes wingLeft {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(-50deg);
transform: translate3d(0, 0, 0) rotateX(-50deg);
}
50% {
-webkit-transform: translate3d(0, -20px, 0) rotateX(-130deg);
transform: translate3d(0, -20px, 0) rotateX(-130deg);
background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
}
}
@-webkit-keyframes wingLeftTop {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(-10deg);
transform: translate3d(0, 0, 0) rotateX(-10deg);
}
50% {
-webkit-transform: translate3d(0px, 0px, 0) rotateX(-40deg);
transform: translate3d(0px, 0px, 0) rotateX(-40deg);
border-bottom: 20px solid #b8a5d1;
}
}
@keyframes wingLeftTop {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(-10deg);
transform: translate3d(0, 0, 0) rotateX(-10deg);
}
50% {
-webkit-transform: translate3d(0px, 0px, 0) rotateX(-40deg);
transform: translate3d(0px, 0px, 0) rotateX(-40deg);
border-bottom: 20px solid #b8a5d1;
}
}
@-webkit-keyframes wingRight {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(50deg);
transform: translate3d(0, 0, 0) rotateX(50deg);
}
50% {
-webkit-transform: translate3d(0, -20px, 0) rotateX(130deg);
transform: translate3d(0, -20px, 0) rotateX(130deg);
background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
}
}
@keyframes wingRight {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(50deg);
transform: translate3d(0, 0, 0) rotateX(50deg);
}
50% {
-webkit-transform: translate3d(0, -20px, 0) rotateX(130deg);
transform: translate3d(0, -20px, 0) rotateX(130deg);
background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
}
}
@-webkit-keyframes wingRightTop {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(10deg);
transform: translate3d(0, 0, 0) rotateX(10deg);
}
50% {
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(40deg);
transform: translate3d(0px, 0px, 0px) rotateX(40deg);
border-bottom: 20px solid #7979a8;
}
}
@keyframes wingRightTop {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0) rotateX(10deg);
transform: translate3d(0, 0, 0) rotateX(10deg);
}
50% {
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(40deg);
transform: translate3d(0px, 0px, 0px) rotateX(40deg);
border-bottom: 20px solid #7979a8;
}
}
@-webkit-keyframes bird1 {
0% {
-webkit-transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
}
100% {
-webkit-transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
}
}
@keyframes bird1 {
0% {
-webkit-transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
}
100% {
-webkit-transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
}
}
@-webkit-keyframes bird2 {
0%,
15% {
-webkit-transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
}
100% {
-webkit-transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
}
}
@keyframes bird2 {
0%,
15% {
-webkit-transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
}
100% {
-webkit-transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
}
}
@-webkit-keyframes bird3 {
0% {
-webkit-transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
}
100% {
-webkit-transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
}
}
@keyframes bird3 {
0% {
-webkit-transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
}
100% {
-webkit-transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
}
}
@-webkit-keyframes bird4 {
0% {
-webkit-transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
}
100% {
-webkit-transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
}
}
@keyframes bird4 {
0% {
-webkit-transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
}
100% {
-webkit-transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
}
}
@-webkit-keyframes bird5 {
0%,
5% {
-webkit-transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
}
100% {
-webkit-transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
}
}
@keyframes bird5 {
0%,
5% {
-webkit-transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
}
100% {
-webkit-transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
}
}
@-webkit-keyframes bird6 {
0%, 10% {
-webkit-transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
}
100% {
-webkit-transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
}
}
@keyframes bird6 {
0%, 10% {
-webkit-transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
}
100% {
-webkit-transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
}
}
@media screen and (max-width: 580px) {
.container-404 {
width: 100%;
}
.number {
font-size: 100px;
}
.subtitle {
font-size: 20px;
padding: 0 1em;
}
.moon {
width: 100px;
height: 100px;
}
.face {
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
}

Chúc các bạn thành công!