使用JavaScript编写爱心动画代码 |21xrx.com

使用JavaScript编写爱心动画代码

2023-06-16 16:45:32 深夜i -- --

JavaScript 爱心动画事件监听器

JavaScript是一项非常强大的编程语言，用于创建网站和网页中的交互式元素和动画。今天我们将学习如何使用JavaScript来创建一个美丽的爱心动画，以向您所爱的人表达爱意。

我们将创建一个HTML页面，然后使用CSS和JavaScript来使爱心动画成为现实。

HTML代码：

JavaScript爱心动画

在上面的代码中，我们使用了一个`

`元素来表示我们要创建的爱心动画，并引用了一个用于样式的CSS文件和一个用于JavaScript的脚本文件。

CSS代码：


 #heart {
 width: 100px;
 height: 100px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: #ff6384;
 border-radius: 50%;
 box-shadow: 0px 0px 20px #ff6384;
 animation: pulse 2s ease-in-out infinite;
 }
 @keyframes pulse {
 0% {
 transform: scale(0.95);
 box-shadow: 0px 0px 0px #ff6384;
 }
 50% {
 transform: scale(1);
 box-shadow: 0px 0px 20px #ff6384;
 }
 100% {
 transform: scale(0.95);
 box-shadow: 0px 0px 0px #ff6384;
 }
 }

在CSS代码中，我们设置了`#heart`元素的尺寸和位置，让它在页面的中心。我们还设置了背景颜色、边框半径和阴影样式，并使用`animation`属性来应用名为`pulse`的动画。

JavaScript代码：


 const heart = document.querySelector('#heart');
 heart.addEventListener('mouseenter', function()
 this.style.animation = 'none';
 this.offsetHeight;
 this.style.animation = 'pulse 2s ease-in-out infinite';
 );
 heart.addEventListener('mouseleave', function()
 this.style.animation = 'none';
 this.offsetHeight;
 this.style.animation = 'pulse 2s ease-in-out infinite';
 );

在 JavaScript 代码中，我们先选择了`#heart`元素，并添加了两个事件监听器。第一个监听器用于鼠标移到`#heart`上时，它会停止动画，等待一段时间后重新开始动画。第二个监听器用于鼠标离开`#heart`时，同样停止动画并在时间后重新开始。

在浏览器中打开这个HTML文件，你将看到一个美丽的、具有生命力的爱心动画。现在你可以将其用在你的网站中，向你想要表达的人传达你的爱意。

上一篇: idea打包java可执行jar包

下一篇: Java计算器：实现简易计算的好帮手

评论区

()

相似文章