写一个动态爱心的网页。
时间: 2023-12-15 20:05:35 浏览: 66
一行代码写出爱心网页!!!
要写一个动态爱心的网页,您需要使用 HTML,CSS 和 JavaScript。
HTML 部分:
```
<div class="heart">❤️</div>
```
CSS 部分:
```
.heart {
font-size: 36px;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
```
JavaScript 部分:
```
const heart = document.querySelector('.heart');
heart.addEventListener('click', () => {
heart.style.color = randomColor();
});
function randomColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
```
以上代码可以在网页上显示一个动态爱心,并且点击后颜色会随机变化。
阅读全文