写一个爱心跳动代码,用html
时间: 2023-05-29 17:05:03 浏览: 92
douyin 跳动爱心 代码 html
和css实现
HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>爱心跳动</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="heart"></div>
</body>
</html>
CSS代码:
.heart {
width: 100px;
height: 100px;
background-color: #ff5b5b;
position: relative;
margin: 0 auto;
animation: heartbeat 1s linear infinite;
transform-origin: center;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background-color: #ff5b5b;
}
.heart:before {
top: 0;
left: 50px;
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
top: 0;
right: 50px;
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(0.75);
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.75);
}
100% {
transform: scale(1);
}
}
解释说明:
HTML中只有一个div标签,class为"heart",这个div就是爱心的主体。
CSS样式中,我们设置了爱心的宽高、背景颜色、位置、动画等。其中,transform-origin属性是设置变形的基点,这里设置为中心点;animation属性是设置动画的名称、时间、速度等;:before和:after是伪类,用于实现爱心的两个半边。
最后,在@keyframes中定义了心跳动画的变化过程,包括缩放大小和变化时间。
阅读全文