下面，详细介绍3种CSS画心形的方式。完成全过程都十分简易，确保你1看就会。
1.1颗div1颗心
用1个div画出1个心，关键的方式便是应用伪元素。
最先，大家在网页页面上先写出1个div：
<div></div>
应用CSS，将这个div变成1个橘鲜红色的正方形：
div {
position:relative;
top: 100px;
left: 50%;
width: 100px;
height: 100px;
background-color: tomato;
}
接着大家运用元素的两个伪元素:before和:after，画出1个蓝色的圆和1个黄色的圆，而且将它们的圆心各自精准定位在正方形的上边和右侧。
div:before {
content: "";
position:absolute;
top: ⑸0px;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
}
div:after{
content: "";
position: absolute;
top: 0px;
left: 50px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
}
再来，将不久完成的两个圆变为和正方形1样的色调：
div:before {
...
background-color: tomato;
}
div:after{
...
background-color: tomato;
}
最终，将元素div转动45度，大家要的心形就完成了！便是这么简易。
div {
position:relative;
top: 100px;
left: 50%;
width: 100px;
height: 100px;
background-color: tomato;
transform: rotate(⑷5deg);
}
2.1颗心不足，那大家就画1屏
1颗心不足表述我的情意，那末就给她画出1显示屏的心。
❤❤❤❤❤❤❤❤❤❤❤❤
❤❤❤❤❤❤❤❤❤❤❤❤
❤❤❤❤❤❤❤❤❤❤❤❤
❤❤❤❤❤❤❤❤❤❤❤❤
❤❤❤❤❤❤❤❤❤❤❤❤
我对你有表述不完的情意，就有写不完的div：
HTML
<h1>爱无处不在...</h1> <div class="heart"></div> <div class="heart"></div> <div class="heart"></div> <div class="heart"></div> <div class="heart"></div> <div class="heart"></div> <div class="heart"></div> <div class="heart"></div> ...
波动让它们铺满全部显示屏：
.heart{
position: relative;
width: 100px;
height: 90px;
float: left;
}
两个伪元素意味着我的左心室和右心室：
.heart:before,
.heart:after{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
border-radius: 50px 50px 0 0;
transform-origin: 0 100%;
}
.heart:after{
left: 0;
transform-origin :100% 100%;
}
让上下心室都转动45度，就产生了我满满的1显示屏心：
.heart:before,
.heart:after{
...
transform: rotate(⑷5deg);
}
.heart:after{
...
transform: rotate(45deg);
}
3.我对你的爱有多深
“之前我看事情，是用肉眼去看，可是在我死去的那1霎时，我刚开始认真眼去看这个全球，全部的事情，真的能够看得史无前例的那末清晰。” -周星驰
不管有是多少颗心都不可以表述出我对你的情意有多深，因而，我要让你看到我的心全是由每个爱你的体细胞所构成的：
<div class="heart"></div>
CSS：
.heart {
position: absolute;
left: 50%;
top: 50%;
width: 105px;
height: 105px;
margin: ⑸2.5px 0 0 ⑸2.5px;
}
像素级的全球能够由box-shadow特性完成：
.heart::before {
content: '';
display: block;
transition: all 400ms;
width: 15px;
height: 15px;
margin: ⑴5px 0 0 ⑴5px;
box-shadow: 30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27, 15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f34f2b, 90px 30px #df351f, 105px 30px #f77c2a, 15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724, 15px 60px #451312, 30px 60px #5a0100, 45px 60px #840e0c, 60px 60px #a51d1a, 75px 60px #ed2805, 90px 60px #d9321e, 105px 60px #f44622, 30px 75px #3b0000, 45px 75px #5d1a1b, 60px 75px #8e1a19, 75px 75px #a80700, 90px 75px #b90a00, 45px 90px #3d0000, 60px 90px #551415, 75px 90px #670100, 60px 105px #340000;
animation: pulse 1.2s steps(1) infinite;
}
就这样，1个像素级的心形就进行了，接着大家还能够给它加上上1个动漫实际效果，让它的每个体细胞都造成动漫的实际效果，你能够尝试1下。
最终，再送你1个CSS心形动漫实际效果：
总结
以上所述是网编给大伙儿详细介绍的CSS画心形的3种方式,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！
Copyright © 2002-2020 在线网页制作_建网页_个人简介网页制作_简单网页_建立网页 版权所有 （网站地图） 粤ICP备10235580号