HTML愛心漂浮源代碼
<!DOCTYPE html>
<html>
<head>
<title>HTML愛心漂浮示例</title>
<style>
body {
background: #f1f1f1;
}
.heart {
display: inline-block;
position: relative;
transform: rotate(45deg);
width: 20px;
height: 20px;
margin: 0 10px;
}
.heart:before,
.heart:after {
display: block;
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #e6a7bf;
border-radius: 50%;
}
.heart:before {
top: -10px;
}
.heart:after {
left: -10px;
}
#container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.animate {
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div id="container">
<div class="heart animate"></div>
<div class="heart animate"></div>
<div class="heart animate"></div>
<div class="heart animate"></div>
<div class="heart animate"></div>
</div>
</body>
</html>以上是一個簡單的HTML愛心漂浮示例，它使用了CSS3的動畫效果，讓多個愛心不斷飄動。代碼中心中使用了一個div作為容器，放置了多個class為heart的div元素，并通過@keyframes定義了animation實現了動畫效果。你可以在自己的網站中添加這個可愛的小元素，瞬間提升頁面的友善度。