Thêm hiệu ứng chim bay 3D vào WordPress

chim 3D duoc tao tu HTML va CSS

Chim 3D được tạo từ HTML và CSS

Trong bài này Hocban.vn chia sẻ các bạn cách thêm thêm hiệu ứng chim bay 3D vào WordPress. Cũng khá đơn giản thôi, sau đây là nội dung chi tiết.

Mà mình nói trước là cái này thêm cho vui thôi, lâu lâu nổi hứng thêm cái này cái kia vào cho sinh động website, hết hứng ta xóa đi.

Nếu các bạn nhúng thêm tiếng chim hót vào web nữa thì sẽ khá là đồng bộ luôn, chim vừa bay được, lại còn hót được nữa chứ.



Các bạn copy đoạn code HTML dưới đây dán vào vị trí mong muốn, ở đây mình dán vào phần dưới header, cụ thể là dưới menu chính như hình minh họa ở trên.

<div id="pictureframe">
  <div id="bird">
    <div id="body2"></div>
    <div id="body1"></div>
    <div id="wing-l"></div>  
    <div id="wing-r"></div>  
  </div>
  <div id="shadow"></div>
</div>

Bạn nào chưa biết thì thêm vào dưới cùng cùng trong file header.php như ảnh minh họa sau:

chen code HTML cua chim 3D vao file header.php

Chèn code HTML của chim 3D vào file header.php

Tiếp theo để các hiệu ứng được thực thi thì các bạn tiếp tục chèn đoạn code sau vào phần Addtion CSS của theme.

@-webkit-keyframes flap-r {
  0%,10%   { 	border-top-width: 60px; }
  40%,60%  { 	border-top-width: 10px; }
  100%     { 	border-top-width: 60px; }
}

@-webkit-keyframes flap-l {
  0%       { 	border-bottom-width: 0px; }
  40%,60%  { 	border-bottom-width: 40px; }
  100%     { 	border-bottom-width: 0px; }
}

@-webkit-keyframes fly {
  0%   { 	left: 0%; top:100px;-webkit-transform:scale3d(0.5,0.5,1) }
  100% { 	left: 65%; top:300px; -webkit-transform:scale3d(1,1,1) }
}

@-webkit-keyframes bob {
  0%   { 	top: 25px; }
  50%   { 	top: 0px; }
  100% { 	top: 25px; }
}

#pictureframe {
  position:relative;
  width:100px;
  margin-top:0px;
  -webkit-animation: fly 3.0s infinite linear;
}

#shadow {
  position:absolute;
  width: 0px; height: 0px; 
  top: 140px; left: 00px;
  border-width: 10px;
  border-left-width:50px;
  border-top-width:0px;
  border-right-width: 40px;
  border-color: transparent;
  border-bottom-color: rgba(210,210,210,0.6);
  border-style:solid;
  -webkit-filter: blur(5px);
}

#shadow:after {
  content: " ";
  position:absolute;
  width: 00px; height: 0px; 
  top: 10px; left: -50px;
  border-width: 10px;
  border-left-width:50px;
  border-bottom-width:0px;
  border-right-width: 40px;
  border-color: transparent;
  border-top-color: rgba(210,210,210,0.6);
  border-style:solid;
}

#bird div {
  position:absolute;
}

#bird { 
  position:absolute;
  -webkit-animation: bob 0.7s infinite cubic-bezier(0.7, 0.7, 0.1, 0.4);
 }


#body1,#body2,#wing-l,#wing-r {
  	width: 0px; height: 0px;
    border-color: transparent;
    border-style: solid;
}
#body1 {
	border-width: 15px; 
  border-left-width:25px;
  border-top-width:15px;
  border-right-width: 55px;
  border-top-color: #333;
}

#body2 { 
  left: 50px; bottom: 0px;
	border-width: 10px; 
  border-left-width:5px;
  border-top-width:0px;
  border-right-width: 15px;
  border-bottom-color: #777;
}

#wing-l {
  left: 22px; bottom: 0px; 
	border-width: 60px; 
  border-left-width:20px;
  border-top-width:0px;
  border-right-width: 6px;
  border-bottom-color: #444;
  -webkit-animation: flap-l 0.7s infinite; 
}

#wing-r {
  left: 22px; top:0px;
	border-width: 60px; 
  border-left-width:20px;
  border-bottom-width:0px;
  border-right-width: 10px;
  border-top-color: #777;
  -webkit-animation: flap-r 0.7s infinite; 
}

Hình ảnh cho bạn nào chưa biết chỗ chèn nhé, cứ chèn trên cùng của phần Addtion CSS này là được, bữa sau không xài nữa thì xóa đi thôi.

Dan code CSS vao phan Addtion CSS cua theme

Dán code CSS vào phần Addtion CSS của theme

Vậy là xong rồi đấy, bây giờ bạn đã có một con chim 3D bay lượn trên bầu zời của quếch site rầu. Cái này thêm cho vui thôi nhé, site nào nhẹ thì chơi, còn nặng quá thì đừng thêm vào chi.

Bài viết này nằm trong bộ sưu tập các mẫu hiệu ứng động dành cho WordPress, nếu anh em nào có thể chia sẻ link ở phần bình luận nhé ! Cảm ơn anh em 😀

Bài viết liên quan

Mời bạn oánh giá 😇

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đẹp ZAI, dễ thương VL 😂

avatar
8 Comment threads
11 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
sinh viên shareStar Cường ITVỹ SpiritĐặng Quốc ThắngBlog Duy Đàm Recent comment authors
sinh viên share <span class="wpdiscuz-comment-count">3 bình luận </span>

con chim này nó hơi mịt mờ bác tịnh ạ :)) có con gì nổi nổi không ???

sinh viên share <span class="wpdiscuz-comment-count">3 bình luận </span>

ok! tks bác 😀 😀 😀

Star Cường IT <span class="wpdiscuz-comment-count">59 bình luận </span>

Hóng chim bay ở blogspot :v

Vỹ Spirit <span class="wpdiscuz-comment-count">106 bình luận </span>

Be mé ơi con được lên ti zi kìa :v

Đặng Quốc Thắng <span class="wpdiscuz-comment-count">13 bình luận </span>

Bài viết khá thú vị 😀

Đặng Quốc Thắng <span class="wpdiscuz-comment-count">13 bình luận </span>

Thấy hay thui chứ nó cũng không cần thiết lắm 😀
Cho nhẹ Blog

Blog Duy Đàm <span class="wpdiscuz-comment-count">60 bình luận </span>

He he. Khá hay.

kien <span class="wpdiscuz-comment-count">17 bình luận </span>

Hờ hờ, bác nhốt tụi nó lại rồi à. Thả ra cho vui :))

Blog92.com <span class="wpdiscuz-comment-count">150 bình luận </span>

Đổi con khác ví dụ như bướm trắng được không bác

Trần Thanh Bình <span class="wpdiscuz-comment-count">3 bình luận </span>

quá chất… chim + chó :v