原生js输出一个可以运行的跳动的心的代码
时间: 2024-10-12 14:11:26 浏览: 10
原生JavaScript中,我们可以使用HTML、CSS和一些简单的动画原理来创建一个动态跳跃的心形图标。下面是一个简单的示例,这个心形会通过改变位置实现上下跳动:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.heart {
position: relative;
width: 50px;
height: 70px;
background-color: red;
border-radius: 50% 50% 0 0;
transform-origin: bottom center;
animation: jump 2s infinite alternate;
}
@keyframes jump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
```
在这个例子中,`.heart` 是一个包含红心的div元素,我们使用CSS的 `transform` 属性和 `@keyframes` 规则来实现动画效果。`jump` 动画定义了心脏从当前位置向上移动10像素再回到原位的过程。
阅读全文