HTML 制作 的红心代码。

2023-12-21 12:43:17


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#heart{
margin: 0 auto;
width:200px;

}
#left,#right{
float:left;
width:100px;
height:200px;
background-color: red;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}

#left{
transform:rotate(-45deg)translate(20px);
box-shadow: 0px 0px 10px 3px rgba(255, 0, 0, 0.5);
}

#right{
transform:rotate(45deg)translate(-20px);
box-shadow: 0px 0px 10px 3px rgba(255, 0, 0, 0.5);
}
#heart:hover {
	transform:rotate(-90deg);
}
p{
height:40px;
}
</style>
</head>
<body>
<p></p>

<div id="heart">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>

?

文章来源:https://blog.csdn.net/laocooon/article/details/135126420
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。