Thêm hiệu ứng chim bay 3D vào WordPress
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.
|
1 2 3 4 5 6 7 8 9 |
<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:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
@-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.
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 😀
con chim này nó hơi mịt mờ bác tịnh ạ :)) có con gì nổi nổi không ???
Để hiệu ứng nó sinh động nhiều hơn thì sẽ nặng hơn, vì đây là code chứ không phải là ảnh gif 😀 Đồng chí bắt con chó này về thả vào widget bên sidebar coi thử thế nào 😀
https://codepen.io/davidkpiano/pen/kkpGWj?q=dog&limit=all&type=type-pens
ok! tks bác 😀 😀 😀
Hóng chim bay ở blogspot :v
Thanh niên thử chưa nào ?
Be mé ơi con được lên ti zi kìa :v
Haha, sướng rầu, dạo này hay lơn tư quy qué mè :v
Bài viết khá thú vị 😀
Nghịch thử chưa nào ? :v
Thấy hay thui chứ nó cũng không cần thiết lắm 😀
Cho nhẹ Blog
Thả vào nghịch tí cho vui thôi chứ nặng phết, ông nào code ra cái con chym đó cũng nể thật 😀
He he. Khá hay.
Bác nghịch thử chưa :v
Hờ hờ, bác nhốt tụi nó lại rồi à. Thả ra cho vui :))
Haha, cái đó gọi là thí nghiệm thôi bác, nghịch xong lại xóa đi, kiếm trò khác chơi tiếp :v tất cả những cái e viết ra đều làm thử như vậy đó :v
Đổi con khác ví dụ như bướm trắng được không bác
Không bác nhé, CSS ra một con như thế này đã là rất kinh rồi :v
quá chất… chim + chó :v
Haha, sở thú chỉ mở cửa trong 1 ngày, mai nhốt mấy con động dật đó dô lại luôn rầu 😀