在HTML中添加心型图案，可以使用CSS和SVG两种方法，下面分别介绍这两种方法的实现过程。
使用CSS创建心型图案
1、使用CSS的::before和::after伪元素创建两个半圆形，然后将它们组合在一起形成心型图案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心型图案</title>
<style>
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 50px;
height: 80px;
background-color: red;
}
.heart::before {
border-radius: 50px 50px 0 0;
top: -40px;
left: 0;
}
.heart::after {
border-radius: 50% 50% 0 0;
top: 0;
left: 25px;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
2、为了使心型图案更加立体，可以添加一些阴影效果，在.heart::before和.heart::after中添加box-shadow,设置不同的偏移量和模糊半径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心型图案</title>
<style>
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 50px;
height: 80px;
background-color: red;
box-shadow: inset 0 0 5px f00, inset -5px -5px 5px f00, inset 5px -5px 5px f00, inset 0px -25px f00, inset -25px 0 f00, inset 25px 0 f00;
}
.heart::before {
border-radius: 50px 50px 0 0;
top: -40px;
left: 0;
}
.heart::after {
border-radius: 50% 50% 0 0;
top: 0;
left: 25px;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
使用SVG创建心型图案
1、在SVG中绘制一个半圆形，作为心型的底部，再绘制一个半圆形，作为心型的顶部，将这两个半圆形组合在一起，形成心型图案，为了使心型图案更加立体，可以使用<animateTransform>标签添加旋转动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心型图案(SVG)</title>
</head>
<body>
<svg viewBox="0 0 128 128" style="height:128px;">
<path id="heartBase" fill="red" stroke="none" stroke-width="16" transform="rotate(45) translate(64,64)" />
<path id="heartTop" fill="red" stroke="none" stroke-width="16" transform="rotate(45) translate(32,96)" />
</svg>
</body>
</html>
2、为了使心型图案更加立体，可以在<animateTransform>标签中添加attributeName、type、from、to、dur等属性，设置不同的旋转角度和动画持续时间，还可以设置fill属性为透明度较高的颜色，以便观察到下方半圆形的投影效果。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/188685.html
微信扫一扫