【特效——使用 Html + CSS + JS 等实现，附 源代码 + 特效】
以下是实现爱心飘落特效的基本HTML、CSS和JavaScript代码。
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heart Falling Animation</title>
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #1f2a33;
}
.heart {
position: absolute;
width: 100px;
height: 90px;
background: #f04646;
transform: rotate(45deg);
animation: fall 5s infinite;
}
.heart::before, .heart::after {
content: '';
position: absolute;
width: 100px;
height: 90px;
background: #f04646;
border-radius: 50%;
top: 0;
left: 0;
transform: translateX(-50%);
}
.heart::before {
transform: translateX(-90%);
}
.heart::after {
border-radius: 50%;
top: 20px;
left: 90%;
}
@keyframes fall {
0% {
transform: translateY(0) rotate(45deg);
}
50% {
transform: translateY(-500px) rotate(45deg);
}
100% {
transform: translateY(-1000px) rotate(45deg);
}
}
</style>
</head>
<body>
<div class="heart"></div>
<script>
// JavaScript 代码为空，因为特效完全由 CSS 动画驱动
</script>
</body>
</html>这段代码创建了一个心形的HTML元素，并通过CSS中定义的fall关键帧动画使其飘落。你可以将这段代码保存为.html文件，并在支持HTML和CSS的浏览器中打开以查看效果。
评论已关闭