CSS画心形的3种方式

日期:2020-12-12 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

下面,详细介绍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种方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!