HTML爱心特效代码源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML爱心特效代码</title>
<style>
.heart {
display: inline-block;
position: relative;
height: 50px;
width: 50px;
transform: rotate(-45deg);
transition: all 0.2s ease-in-out;
}
.heart:hover {
cursor: pointer;
transform: scale(1.1) rotate(-45deg);
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background-color: red;
}
.heart:before {
height: 50px;
width: 50px;
top: 0;
left: 25px;
border-radius: 25px 25px 0 0;
}
.heart:after {
height: 50px;
width: 50px;
top: -25px;
left: 0;
border-radius: 25px 0 0 25px;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>以上代码是实现纯CSS的HTML爱心特效，当鼠标悬停在爱心上时，爱心会放大并旋转。该效果使用了伪类:before和:after来生成两个三角形为爱心的两瓣。其中，:before位于整个爱心的正中心，高度为爱心的一半，宽度为整个爱心的宽度。:after则覆盖在同时与:before同高度的位置，宽度为整个爱心的一半，只是左侧直角将其裁剪成了两个三角形。我们使用了transform来旋转爱心，使用transition来使其过渡更加柔和。最后，通过拓展可以将其用于表单，比如爱心的选中状态。试试看吧！