最近我学会了用HTML制作卡通表白动画，非常有趣！下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>卡通表白动画</title>
<style type="text/css">
#heart {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
}
#heart:before,#heart:after {
content: "";
position: absolute;
background-color: red;
}
#heart:before {
width: 200px;
height: 200px;
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
top: -100px;
left: 0;
}
#heart:after {
width: 200px;
height: 200px;
border-radius: 50% 50% 0 0;
transform: rotate(-45deg);
top: -100px;
left: -200px;
}
#text {
position: absolute;
left: 50%;
top: 70%;
transform: translate(-50%,-50%);
font-size: 36px;
color: black;
animation: float 3s infinite;
}
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div id="heart"></div>
<p id="text">我喜欢你，你愿意做我的女朋友吗？</p>
</body>
</html>
这段代码中，我用CSS制作了一个红色的心形，然后将其和文字都放在页面的中间。动画效果是文字会上下浮动。最后，就可以用这段代码向自己喜欢的人表白啦！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
