写一个可以跳动的爱心代码
时间: 2023-02-26 15:18:02 浏览: 101
用web写一个跳动的爱心-源代码
这是一个使用 HTML 和 CSS 的简单爱心代码:
```
<!DOCTYPE html>
<html>
<head>
<style>
.heart {
width: 40px;
height: 40px;
position: relative;
animation: beat 1s infinite;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
top: 20px;
left: 20px;
width: 0;
height: 0;
border-radius: 50%;
background: red;
}
.heart:before {
transform: rotate(45deg);
}
.heart:after {
transform: rotate(-45deg);
}
@keyframes beat {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
40% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
```
这是一个简单的爱心形状,使用了 CSS3 动画(`animation`)实现了不断跳动的效果。
阅读全文