首页❉ html+css+javascript制作爱心表白代码(卡通人物爱心表白-爱心形状浮动特效 )备

❉ html+css+javascript制作爱心表白代码(卡通人物爱心表白-爱心形状浮动特效 )备

时间: 2023-09-26 08:13:33 浏览: 174

好的，以下是一个简单的HTML+CSS+JavaScript制作的卡通人物爱心表白代码，带有爱心形状浮动特效： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>卡通人物爱心表白</title> <style> body { background-color: #FFC0CB; font-family: Arial, sans-serif; } .container { margin: 0 auto; text-align: center; padding-top: 50px; } #heart { width: 100px; height: 90px; position: relative; margin: 0 auto; animation: heart-float 1s ease-in-out infinite; } #heart:before, #heart:after { content: ""; position: absolute; left: 50px; top: 0; width: 50px; height: 80px; background: #FFC0CB; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } #heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } #text { margin-top: 50px; font-size: 24px; color: white; text-shadow: 1px 1px #FF69B4; } @keyframes heart-float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } </style> </head> <body> <div class="container"> <div id="heart"></div> <div id="text">亲爱的，我爱你！</div> </div> <script> document.getElementById("text").addEventListener("mouseover", function() { this.style.color = "#FF69B4"; this.style.textShadow = "2px 2px #F08080"; }); document.getElementById("text").addEventListener("mouseout", function() { this.style.color = "white"; this.style.textShadow = "1px 1px #FF69B4"; }); </script> </body> </html> ``` 这个代码实现了一个卡通人物爱心表白的效果，其中爱心形状使用CSS中的伪元素:before和:after来实现，浮动特效使用了CSS3中的animation属性，而文字颜色的变化使用了JavaScript来实现。

阅读全文