【圣诞表白特效----HTML CSS JS实现（附效果+源代码）】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Christmas Love Special</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f7f7f7;
font-family: Arial, sans-serif;
overflow: hidden;
}
.heart {
position: absolute;
width: 100px;
height: 90px;
background: #f00;
transform: translate(-50px, 0) scale(0.8);
animation: jump 2s infinite alternate ease-in-out;
}
.heart:before,
.heart:after {
content: '';
position: absolute;
width: 100px;
height: 90px;
background: #f00;
border-radius: 50px 50px 0 0;
top: 0;
left: 0;
}
.heart:before {
transform: translate(0, -50px);
}
.heart:after {
transform: translate(0, -100px) rotate(-45deg);
}
@keyframes jump {
0% {
transform: translate(-50px, 0) scale(0.8) rotate(0deg);
}
100% {
transform: translate(-50px, -30px) scale(0.8) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>这段代码使用了CSS动画制作了一个心形图案，并通过CSS样式将其定位在页面中心。动画通过@keyframes规则实现心形的跳动效果。这个简单的示例展示了如何使用HTML和CSS创建交互式的网页特效，而无需依赖复杂的JavaScript代码。
评论已关闭