今天讓我來為大家介紹一款最近非常流行的HTML小人表白代碼,它能夠讓你的表白更加的有創意和浪漫。
<html> <head> <title>HTML小人表白代碼</title> <style> .love { width: 20px; height: 20px; background-color: pink; border-radius: 50% 50% 0 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; } .body { width: 80px; height: 100px; background-color: #f3c8a9; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 1; } .hand { width: 10px; height: 30px; background-color: #f3c8a9; position: absolute; z-index: 5; top: 10px; } .l-hand { left: -10px; transform: rotate(45deg); transform-origin: bottom right; } .r-hand { right: -10px; transform: rotate(-45deg); transform-origin: bottom left; } .eye { width: 10px; height: 10px; background-color: white; border-radius: 50%; position: absolute; top: 20px; z-index: 5; } .l-eye { left: 25%; } .r-eye { right: 25%; } .mouth { width: 40px; height: 10px; background-color: #dc3c3c; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%); z-index: 5; border-radius: 0 0 50% 50%; } .tongue { width: 10px; height: 5px; background-color: pink; position: absolute; top: 70%; left: 50%; transform: translate(-50%, 50%); z-index: 6; border-radius: 50%; } .message { position: absolute; top: -60px; font-size: 24px; text-align: center; width: 200px; left: 50%; transform: translate(-50%, 0); } .message p { line-height: 30px; } .button { border: none; outline: none; background-color: #dc3c3c; color: white; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 25px; position: absolute; left: 50%; transform: translate(-50%, 50%); } .button:hover { background-color: #f44336; } </style> </head> <body> <div class="love"></div> <div class="body"></div> <div class="hand l-hand"></div> <div class="hand r-hand"></div> <div class="eye l-eye"></div> <div class="eye r-eye"></div> <div class="mouth"></div> <div class="tongue"></div> <div class="message"> <p>我喜歡你,<br>愿意跟你共度一生。</p> </div> <button class="button">接受我的愛吧</button> </body> </html>
以上就是這款HTML小人表白代碼的全部內容,如果你想要讓你的表白更加的有創意和印象深刻,不妨試著使用這個代碼來打造你心目中的浪漫場景吧!