Tổng cộng
1
Bài viết của
Trang Trí
-
Chia Sẻ Code Trang Trí Website Đôi lờiHôm nay rảnh rồi ngồi mần code, thấy đoạn code khá là ảo diệu :&(蛆音娘_大笑)Tạo 2 cái lồng đèn bay bay trang trí web ngày tếtDemoHướng dẫn[tip type="yellow"]Theo mình anh em gắn hết code vào footer web cho nhanh gọn :&(蛆音娘_OK)[/tip]CSS@media (max-width: 767.98px) { .deng-box1 { transform: scale(0.5) rotate(1deg); } .deng-box2 { transform: scale(0.5) rotate(1deg); } .deng { top: -65px; } } .deng-box1 { transform: scale(0.5) rotate(1deg); } .deng-box2 { transform: scale(0.5) rotate(1deg); } .deng { top: -65px; } .deng-box1 { position: fixed; top: -30px; left: 5px; z-index: 9999; pointer-events: none; } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: rgba(216, 0, 15, 0.8); border-radius: 50%; transform-origin: 50% -100px; animation: 3s ease-in-out 0s infinite normal none running swing; box-shadow: rgb(250, 108, 0) -5px 5px 50px 4px; } .deng::before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0px 0px; border: 1px solid rgb(220, 143, 3); background: linear-gradient(to right, rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3)); } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: rgb(220, 143, 3); } .deng-box1 { pointer-events: none; } .deng-a { width: 100px; height: 90px; background: rgba(216, 0, 15, 0.1); margin: 12px 8px 8px 10px; border-radius: 50%; border: 2px solid rgb(220, 143, 3); } .deng-b { width: 45px; height: 90px; background: rgba(216, 0, 15, 0.1); margin: -2px 8px 8px 26px; border-radius: 50%; border: 2px solid rgb(220, 143, 3); } .deng-t { font-family: Arial, "Lucida Grande", Tahoma, sans-serif; font-size: 1.3rem; color: rgb(255, 165, 0); font-weight: bold; line-height: 42px; text-align: left; width: 25px; margin: 5px auto; } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0px 0px 59px; animation: 4s ease-in-out 0s infinite normal none running swing; transform-origin: 50% -45px; background: rgb(255, 165, 0); border-radius: 0px 0px 5px 5px; } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: rgb(255, 165, 0); border-radius: 0px 0px 0px 5px; } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: rgb(220, 143, 3); border-radius: 50%; } .deng::after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0px 0px 5px 5px; border: 1px solid rgb(220, 143, 3); background: linear-gradient(to right, rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3)); } .deng-box2 { position: fixed; top: -30px; right: 5px; z-index: 9999; pointer-events: none; } .deng-box2 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: rgba(216, 0, 15, 0.8); border-radius: 50%; transform-origin: 50% -100px; animation: 5s ease-in-out 0s infinite normal none running swing; box-shadow: rgb(252, 144, 61) -5px 5px 30px 4px; } .deng-box2 { pointer-events: none; } @-webkit-keyframes swing { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } }HTML Hiển Thị<div class="deng-box1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t"></div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> <div class="deng-box2"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t"></div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div>Chúc các bạn thành công ! :&(蛆音娘_OK)
