html跳动爱心代码怎么写

lewis 6年前 (2019-01-17) 阅读数 11 #程序编程

文章标签 html

下面是一个简单的HTML跳动爱心代码示例：

<!DOCTYPEhtml><html>
<head>
<title>跳动爱心</title>
<style>
.heart{
position:relative;
width:100px;
height:100px;
transform:rotate(45deg);
animation:beat1.2sinfiniteease-in-out;
}
.heart:before,
.heart:after{
content:"";
position:absolute;
top:0;
width:100px;
height:100px;
border-radius:50%;
background-color:#e74c3c;
}
.heart:before{
left:-50px;
}
.heart:after{
left:50px;
}
@keyframesbeat{
0%{
transform:scale(1)rotate(45deg);
}
50%{
transform:scale(0.6)rotate(45deg);
}
100%{
transform:scale(1)rotate(45deg);
}
}
</style>
</head>
<body>
<divclass="heart"></div>
</body>
</html>