请用前端的方式写出一个爱心
时间: 2024-05-10 13:19:14 浏览: 57
以下是使用 HTML 和 CSS 实现的一个简单的爱心:
```html
<div class="heart"></div>
```
```css
.heart {
width: 50px;
height: 50px;
position: relative;
animation: pulse 1s infinite ease-in-out;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
background-color: #ff6b6b;
border-radius: 25px 25px 0 0;
}
.heart::before {
width: 50px;
height: 50px;
top: -25px;
left: 0;
transform: rotate(-45deg);
}
.heart::after {
width: 50px;
height: 50px;
top: 0;
left: 25px;
transform: rotate(45deg);
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
```
通过设置伪元素和动画,我们可以创建一个漂亮的爱心,它会在页面上律动并闪烁。
阅读全文