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.

=> Bài viết được viết bởi admin blog S2TopVN
=> Vui lòng để lại nguồn nếu đăng tải lại bài viết này.

Nguồn code: Chiase78 
Demo
- - 19 bình luận
CHUYÊN MỤC
- Đối với tôi mọi thứ mình biết chưa nên tự cho mình là giỏi,hãy nên học hỏi nhiều hơn để thành công...
- Mọi chi tiết xin liên hệ:
Email: Naruto95qt@gmail.com
Zalo Me: Zalo.com/01625271155

BÌNH LUẬN (19)

  1. comment đầu ngại vờ lờ :D

    Trả lờiXóa
  2. Chết rồi chết rồi ! Chim của em bay mất rồi

    Trả lờiXóa
    Trả lời
    1. Haha em đùa ác dữ Còi :v

      Xóa
    2. hha :v nay đi làm ctv khắp nơi a à :v

      Xóa
  3. Hello a
    Kí tên : trần nhật sinh

    Trả lờiXóa
  4. a quốc ơi e Nguyễn Anh Quốc nè fb a sao v

    Trả lờiXóa
  5. a Quốc ơi face a đâu rồi sao mà tìm hoài k thấy

    Trả lờiXóa

Một số lưu ý khi bình luận

Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)