请用html语言生成一段前端代码页面中部展示跳动的红色爱心红色爱心下面用黑色斜体写I love you。
<!DOCTYPE html>
<html>
<head>
<title>跳动的红色爱心</title>
<style>
#heart{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
background-color: red;
border-radius: 25px 25px 0 0;
animation: beat 1s infinite;
}
<pre><code> #heart:before,
#heart:after{
content: "";
position: absolute;
background-color: red;
border-radius: 25px 25px 0 0;
}
#heart:before{
width: 50px;
height: 50px;
top: -25px;
left: 0;
}
#heart:after{
width: 50px;
height: 50px;
top: 0;
left: 25px;
}
@keyframes beat{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.2) rotate(0deg);
}
100%{
transform: scale(1) rotate(0deg);
}
}
#text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: black;
font-style: italic;
font-size: 20px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
</style>
</code></pre>
</head>
<body>
<div id="heart"></div>
<div id="text">I love you</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/Zef 著作权归作者所有。请勿转载和采集!