资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/❤520，就用CSS给你的她（他）送颗心❤

❤520，就用CSS给你的她（他）送颗心❤

mzlogin / 2609人阅读

今天是520。

一句温柔的问候，一束美丽的鲜花，一段真情的告白。
但是作为一名与众不同的程序员，我们可不仅仅拥有上面的传情方法，别忘了每个人的手上可是都有其他人不具备的神奇技能，就是我们每天辛辛苦苦敲下的代码。

在这个特殊的日子，就用我们手中的魔法代码，来给你的她（他）制作出一个与众不同的礼物吧。
下面，介绍三种CSS画心形的方法。实现过程都非常简单，保证你一看就会。

1.一颗div一颗心

用一个div画出一个心，核心的方法就是使用伪元素。
首先，我们在页面上先写出一个div：

</>复制代码 
  1. <div>div>

使用CSS，将这个div变为一个橘红色的正方形：

</>复制代码 
  1. div {
  2.   position:relative;
  3.   top: 100px;
  4.   left: 50%;
  5.   width: 100px;
  6.   height: 100px;
  7.   background-color: tomato;
  8. }

接着我们利用元素的两个伪元素:before和:after，画出一个蓝色的圆和一个黄色的圆，并且将它们的圆心分别定位在正方形的上边和右边。

</>复制代码 
  1. div:before {
  2.   content: "";
  3.   position:absolute;
  4.   top: -50px;
  5.   left: 0;
  6.   width: 100px;
  7.   height: 100px;
  8.   border-radius: 50%;
  9.   background-color: blue;
  10. }
  11. div:after{
  12.   content: "";
  13.   position: absolute;
  14.   top: 0px;
  15.   left: 50px;
  16.   width: 100px;
  17.   height: 100px;
  18.   background-color: yellow;
  19.   border-radius: 50%;
  20. }

再来，将刚刚实现的两个圆变成和正方形一样的颜色：

</>复制代码 
  1. div:before {
  2.   ...
  3.   background-color: tomato;
  4. }
  5. div:after{
  6.   ...
  7.   background-color: tomato;
  8. }

最后，将元素div旋转45度，我们要的心形就实现了！就是这么简单。

</>复制代码 
  1. div {
  2.   position:relative;
  3.   top: 100px;
  4.   left: 50%;
  5.   width: 100px;
  6.   height: 100px;
  7.   background-color: tomato;
  8.   transform: rotate(-45deg);
  9. }

2.一颗心不够，那我们就画一屏

一颗心不够表达我的心意，那么就给她画出一屏幕的心。
❤❤❤❤❤❤❤❤❤❤❤❤
❤❤❤❤❤❤❤❤❤❤❤❤
❤❤❤❤❤❤❤❤❤❤❤❤
❤❤❤❤❤❤❤❤❤❤❤❤
❤❤❤❤❤❤❤❤❤❤❤❤

我对你有表达不完的心意，就有写不完的div：

HTML：

</>复制代码 
  1. <h1>爱无处不在...h1>
  2. <div class="heart">div>
  3. <div class="heart">div>
  4. <div class="heart">div>
  5. <div class="heart">div>
  6. <div class="heart">div>
  7. <div class="heart">div>
  8. <div class="heart">div>
  9. <div class="heart">div>
  10. ...

浮动让它们填满整个屏幕：

</>复制代码 
  1. .heart{
  2.   position: relative;
  3.   width: 100px;
  4.   height: 90px;
  5.   float: left;
  6. }

两个伪元素代表我的左心房和右心房：

</>复制代码 
  1. .heart:before,
  2. .heart:after{
  3.   position: absolute;
  4.   content: "";
  5.   left: 50px;
  6.   top: 0;
  7.   width: 50px;
  8.   height: 80px;
  9.   background: #fc2e5a;
  10.   border-radius: 50px 50px 0 0;
  11.   transform-origin: 0 100%;
  12. }
  13. .heart:after{
  14.   left: 0;
  15.   transform-origin :100% 100%;
  16. }

让左右心房都旋转45度，就形成了我满满的一屏幕心：

</>复制代码 
  1. .heart:before,
  2. .heart:after{
  3.   ...
  4.   transform: rotate(-45deg);
  5. }
  6. .heart:after{
  7.   ...
  8.   transform: rotate(45deg);
  9. }

3.我对你的爱有多深
</>复制代码 
  1. “以前我看事物，是用肉眼去看，但是在我死去的那一刹那，我开始用心眼去看这个世界，所有的事物，真的可以看得前所未有的那么清楚。” -周星驰

无论有多少颗心都不能表达出我对你的爱意有多深，于是，我要让你看到我的心都是由每一个爱你的细胞所组成的：

</>复制代码 
  1. class="heart">div>

CSS：

</>复制代码 
  1. .heart {
  2.   position: absolute;
  3.   left: 50%;
  4.   top: 50%;
  5.   width: 105px;
  6.   height: 105px;
  7.   margin: -52.5px 0 0 -52.5px;
  8. }

像素级的世界可以由box-shadow属性实现（参考文章《CSS3 box-shadow盒阴影图形生成技术》）：

</>复制代码 
  1. .heart::before {
  2.   content: "";
  3.   display: block;
  4.   transition: all 400ms;
  5.   width: 15px;
  6.   height: 15px;
  7.   margin: -15px 0 0 -15px;
  8.   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;
  9.   animation: pulse 1.2s steps(1) infinite;
  10. }

就这样，一个像素级的心形就完成了，接着我们还可以给它添加上一个动画效果，让它的每一个细胞都产生动画的效果，你可以尝试一下。

最后，再送你一个CSS心形动画效果：



获取上面所有心形的代码可以：


云服务器 GPU云服务器 送颗心 给你个 V520 520红包怎么发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6851.html

相关文章

  • ❤520，就用CSS给你的她（他）送颗心❤

    showImg(https://segmentfault.com/img/bVbsRlD?w=211&h=184); 今天是520。一句温柔的问候，一束美丽的鲜花，一段真情的告白。但是作为一名与众不同的程序员，我们可不仅仅拥有上面的传情方法，别忘了每个人的手上可是都有其他人不具备的神奇技能，就是我们每天辛辛苦苦敲下的代码。 在这个特殊的日子，就用我们手中的魔法代码，来给你的她（他）制作出一个与众不...

    Donne 评论0 收藏0

  • ❤520，就用CSS给你的她（他）送颗心❤

    showImg(https://segmentfault.com/img/bVbsRlD?w=211&h=184); 今天是520。一句温柔的问候，一束美丽的鲜花，一段真情的告白。但是作为一名与众不同的程序员，我们可不仅仅拥有上面的传情方法，别忘了每个人的手上可是都有其他人不具备的神奇技能，就是我们每天辛辛苦苦敲下的代码。 在这个特殊的日子，就用我们手中的魔法代码，来给你的她（他）制作出一个与众不...

    Tangpj 评论0 收藏0

  • ❤520，就用CSS给你的她（他）送颗心❤

    showImg(https://segmentfault.com/img/bVbsRlD?w=211&h=184); 今天是520。一句温柔的问候，一束美丽的鲜花，一段真情的告白。但是作为一名与众不同的程序员，我们可不仅仅拥有上面的传情方法，别忘了每个人的手上可是都有其他人不具备的神奇技能，就是我们每天辛辛苦苦敲下的代码。 在这个特殊的日子，就用我们手中的魔法代码，来给你的她（他）制作出一个与众不...

    dockerclub 评论0 收藏0

  • ❤520，就用CSS给你的她（他）送颗心❤

    今天是520。一句温柔的问候，一束美丽的鲜花，一段真情的告白。但是作为一名与众不同的程序员，我们可不仅仅拥有上面的传情方法，别忘了每个人的手上可是都有其他人不具备的神奇技能，就是我们每天辛辛苦苦敲下的代码。在这个特殊的日子，就用我们手中的魔法代码，来给你的她（他）制作出一个与众不同的礼物吧。下面，介绍三种CSS画心形的方法。实现过程都非常简单，保证你一看就会。1.一颗div一颗心用一个div画出一...

    番茄西红柿 评论0 收藏0

  • 准备情人节礼物比写代码难？来看看IT直男给女友们的礼物

    摘要：今天是情人节，据说直男在每个这样弥漫着恋爱气息的日子里都能把礼物送成辣眼睛现场，为了反驳这个观点，小编特意走访了网易云的架构师工程师产品经理程序猿哥哥们。 今天是情人节，据说IT直男在每个这样弥漫着恋爱气息的日子里都能把礼物送成辣眼睛现场，为了反（zheng）驳（shi）这个观点，小编特意走访了网易云的架构师、工程师、产品经理、程序猿哥哥们。 刘超，网易云计算首席架构师，江湖人称超哥，...

    Flink_China 评论0 收藏0

发表评论

登陆后可评论

0条评论

mzlogin

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<