用html5写一个动态爱心代码,代码量尽可能的少
时间: 2023-05-12 11:06:08 浏览: 75
HTML动态爱心特效代码
5星 · 资源好评率100%
以下是一个简单的用 HTML5 写的动态爱心代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态爱心代码</title>
<style>
.heart {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
transform: rotate(45deg);
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="heart"></div>
<script>
var heart = document.querySelector('.heart');
var x = 0;
var y = 0;
var heartBeat = setInterval(function() {
x += 1;
y = Math.sin(x / 10) * 20;
heart.style.left = x + 'px';
heart.style.top = y + 'px';
}, 10);
</script>
</body>
</html>
```
这段代码使用了 HTML5 的动画和变换功能,通过 JavaScript 控制爱心的位置和动画效果。
阅读全文