请选择 进入手机版 | 继续访问电脑版
创作

#楼主# 2020-6-16

跳转到指定楼层
本帖最后由 明教小编 于 2020-6-17 20:52 编辑

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

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

1.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素。
首先,我们在页面上先写出一个div:

  1. <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
复制代码

使用CSS,将这个div变为一个橘红色的正方形:
  1. <span class="hljs-selector-tag">div</span> {
  2.   <span class="hljs-attribute">position</span>:relative;
  3.   <span class="hljs-attribute">top</span>: <span class="hljs-number">100px</span>;
  4.   <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;
  5.   <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
  6.   <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
  7.   <span class="hljs-attribute">background-color</span>: tomato;
  8. }
复制代码


接着我们利用元素的两个伪元素:before和:after,画出一个蓝色的圆和一个黄色的圆,并且将它们的圆心分别定位在正方形的上边和右边。
  1. <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:before</span> {
  2.   <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
  3.   <span class="hljs-attribute">position</span>:absolute;
  4.   <span class="hljs-attribute">top</span>: -<span class="hljs-number">50px</span>;
  5.   <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
  6.   <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
  7.   <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
  8.   <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;
  9.   <span class="hljs-attribute">background-color</span>: blue;
  10. }
  11. <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:after</span>{
  12.   <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
  13.   <span class="hljs-attribute">position</span>: absolute;
  14.   <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;
  15.   <span class="hljs-attribute">left</span>: <span class="hljs-number">50px</span>;
  16.   <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
  17.   <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
  18.   <span class="hljs-attribute">background-color</span>: yellow;
  19.   <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;
  20. }
复制代码


再来,将刚刚实现的两个圆变成和正方形一样的颜色:
  1. <span class="hljs-string">div:</span>before {
  2.   ...
  3.   background-<span class="hljs-string">color:</span> tomato;
  4. }
  5. <span class="hljs-string">div:</span>after{
  6.   ...
  7.   background-<span class="hljs-string">color:</span> tomato;
  8. }
复制代码


最后,将元素div旋转45度,我们要的心形就实现了!就是这么简单。
  1. <span class="hljs-selector-tag">div</span> {
  2.   <span class="hljs-attribute">position</span>:relative;
  3.   <span class="hljs-attribute">top</span>: <span class="hljs-number">100px</span>;
  4.   <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;
  5.   <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
  6.   <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
  7.   <span class="hljs-attribute">background-color</span>: tomato;
  8.   <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
  9. }
复制代码

2.一颗心不够,那我们就画一屏一颗心不够表达我的心意,那么就给她画出一屏幕的心。


❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤


我对你有表达不完的心意,就有写不完的div:
  1. <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>爱无处不在...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
  2. <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"heart"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  3. <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"heart"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  4. <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"heart"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  5. <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"heart"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  6. <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"heart"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  7. <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"heart"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  8. <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"heart"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  9. <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"heart"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
复制代码

浮动让它们填满整个屏幕:
  1. <span class="hljs-selector-class">.heart</span>{
  2.   <span class="hljs-attribute">position</span>: relative;
  3.   <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
  4.   <span class="hljs-attribute">height</span>: <span class="hljs-number">90px</span>;
  5.   <span class="hljs-attribute">float</span>: left;
  6. }
复制代码

两个伪元素代表我的左心房和右心房:
  1. <span class="hljs-selector-class">.heart</span><span class="hljs-selector-pseudo">:before</span>,
  2. <span class="hljs-selector-class">.heart</span><span class="hljs-selector-pseudo">:after</span>{
  3.   <span class="hljs-attribute">position</span>: absolute;
  4.   <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
  5.   <span class="hljs-attribute">left</span>: <span class="hljs-number">50px</span>;
  6.   <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
  7.   <span class="hljs-attribute">width</span>: <span class="hljs-number">50px</span>;
  8.   <span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>;
  9.   <span class="hljs-attribute">background</span>: <span class="hljs-number">#fc2e5a</span>;
  10.   <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50px</span> <span class="hljs-number">50px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;
  11.   <span class="hljs-attribute">transform-origin</span>: <span class="hljs-number">0</span> <span class="hljs-number">100%</span>;
  12. }
  13. <span class="hljs-selector-class">.heart</span><span class="hljs-selector-pseudo">:after</span>{
  14.   <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
  15.   <span class="hljs-attribute">transform-origin </span>:<span class="hljs-number">100%</span> <span class="hljs-number">100%</span>;
  16. }
复制代码



让左右心房都旋转45度,就形成了我满满的一屏幕心:
  1. .<span class="hljs-string">heart:</span>before,
  2. .<span class="hljs-string">heart:</span>after{
  3.   ...
  4. <span class="hljs-symbol">  transform:</span> rotate(<span class="hljs-number">-45</span>deg);
  5. }
  6. .<span class="hljs-string">heart:</span>after{
  7.   ...
  8. <span class="hljs-symbol">  transform:</span> rotate(<span class="hljs-number">45</span>deg);
  9. }
复制代码

076623c4b90e3c87fc22ef78a571f67.png

3.我对你的爱有多深
“以前我看事物,是用肉眼去看,但是在我死去的那一刹那,我开始用心眼去看这个世界,所有的事物,真的可以看得前所未有的那么清楚。” -周星驰
无论有多少颗心都不能表达出我对你的爱意有多深,于是,我要让你看到我的心都是由每一个爱你的细胞所组成的:
  1. <div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"heart"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
复制代码

CSS:
  1. <span class="hljs-selector-class">.heart</span> {
  2.   <span class="hljs-attribute">position</span>: absolute;
  3.   <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;
  4.   <span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;
  5.   <span class="hljs-attribute">width</span>: <span class="hljs-number">105px</span>;
  6.   <span class="hljs-attribute">height</span>: <span class="hljs-number">105px</span>;
  7.   <span class="hljs-attribute">margin</span>: -<span class="hljs-number">52.5px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> -<span class="hljs-number">52.5px</span>;
  8. }
复制代码

像素级的世界可以由box-shadow属性实现
  1. <span class="hljs-selector-class">.heart</span><span class="hljs-selector-pseudo">::before</span> {
  2.   <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
  3.   <span class="hljs-attribute">display</span>: block;
  4.   <span class="hljs-attribute">transition</span>: all <span class="hljs-number">400ms</span>;
  5.   <span class="hljs-attribute">width</span>: <span class="hljs-number">15px</span>;
  6.   <span class="hljs-attribute">height</span>: <span class="hljs-number">15px</span>;
  7.   <span class="hljs-attribute">margin</span>: -<span class="hljs-number">15px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> -<span class="hljs-number">15px</span>;
  8.   <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">30px</span> <span class="hljs-number">15px</span> <span class="hljs-number">#8e1a19</span>, <span class="hljs-number">45px</span> <span class="hljs-number">15px</span> <span class="hljs-number">#ac0500</span>, <span class="hljs-number">75px</span> <span class="hljs-number">15px</span> <span class="hljs-number">#f73f0c</span>, <span class="hljs-number">90px</span> <span class="hljs-number">15px</span> <span class="hljs-number">#fa5f27</span>, <span class="hljs-number">15px</span> <span class="hljs-number">30px</span> <span class="hljs-number">#740100</span>, <span class="hljs-number">30px</span> <span class="hljs-number">30px</span> <span class="hljs-number">#8e0500</span>, <span class="hljs-number">45px</span> <span class="hljs-number">30px</span> <span class="hljs-number">#8e1918</span>, <span class="hljs-number">60px</span> <span class="hljs-number">30px</span> <span class="hljs-number">#ca1300</span>, <span class="hljs-number">75px</span> <span class="hljs-number">30px</span> <span class="hljs-number">#f34f2b</span>, <span class="hljs-number">90px</span> <span class="hljs-number">30px</span> <span class="hljs-number">#df351f</span>, <span class="hljs-number">105px</span> <span class="hljs-number">30px</span> <span class="hljs-number">#f77c2a</span>, <span class="hljs-number">15px</span> <span class="hljs-number">45px</span> <span class="hljs-number">#4b0000</span>, <span class="hljs-number">30px</span> <span class="hljs-number">45px</span> <span class="hljs-number">#690100</span>, <span class="hljs-number">45px</span> <span class="hljs-number">45px</span> <span class="hljs-number">#8e0f0b</span>, <span class="hljs-number">60px</span> <span class="hljs-number">45px</span> <span class="hljs-number">#bf1000</span>, <span class="hljs-number">75px</span> <span class="hljs-number">45px</span> <span class="hljs-number">#f84010</span>, <span class="hljs-number">90px</span> <span class="hljs-number">45px</span> <span class="hljs-number">#f04222</span>, <span class="hljs-number">105px</span> <span class="hljs-number">45px</span> <span class="hljs-number">#fa5724</span>, <span class="hljs-number">15px</span> <span class="hljs-number">60px</span> <span class="hljs-number">#451312</span>, <span class="hljs-number">30px</span> <span class="hljs-number">60px</span> <span class="hljs-number">#5a0100</span>, <span class="hljs-number">45px</span> <span class="hljs-number">60px</span> <span class="hljs-number">#840e0c</span>, <span class="hljs-number">60px</span> <span class="hljs-number">60px</span> <span class="hljs-number">#a51d1a</span>, <span class="hljs-number">75px</span> <span class="hljs-number">60px</span> <span class="hljs-number">#ed2805</span>, <span class="hljs-number">90px</span> <span class="hljs-number">60px</span> <span class="hljs-number">#d9321e</span>, <span class="hljs-number">105px</span> <span class="hljs-number">60px</span> <span class="hljs-number">#f44622</span>, <span class="hljs-number">30px</span> <span class="hljs-number">75px</span> <span class="hljs-number">#3b0000</span>, <span class="hljs-number">45px</span> <span class="hljs-number">75px</span> <span class="hljs-number">#5d1a1b</span>, <span class="hljs-number">60px</span> <span class="hljs-number">75px</span> <span class="hljs-number">#8e1a19</span>, <span class="hljs-number">75px</span> <span class="hljs-number">75px</span> <span class="hljs-number">#a80700</span>, <span class="hljs-number">90px</span> <span class="hljs-number">75px</span> <span class="hljs-number">#b90a00</span>, <span class="hljs-number">45px</span> <span class="hljs-number">90px</span> <span class="hljs-number">#3d0000</span>, <span class="hljs-number">60px</span> <span class="hljs-number">90px</span> <span class="hljs-number">#551415</span>, <span class="hljs-number">75px</span> <span class="hljs-number">90px</span> <span class="hljs-number">#670100</span>, <span class="hljs-number">60px</span> <span class="hljs-number">105px</span> <span class="hljs-number">#340000</span>;
  9.   <span class="hljs-attribute">animation</span>: pulse <span class="hljs-number">1.2s</span> <span class="hljs-built_in">steps</span>(1) infinite;
  10. }
复制代码

1d1606e89460e1741888433199e5933.png


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


最后,再送你一个CSS心形动画效果:




更多关于高级CSS干货内容,尽在大前端开发社区——WEB明教光明顶






转播转播 分享分享 分享淘帖 反对反对
回复

使用道具

0

主题

2

帖子

66

积分

讲师

Rank: 10Rank: 10Rank: 10

积分
66
WEB明教杨左屎 发表于 2020-6-18 09:35:13
屌丝气质拿捏的死死地
回复

使用道具 举报

B Color Link Quote Code Smilies
站点地图|手机版|WEB明教光明顶 |湘ICP备19021820号-1
Powered by WEB明教  © 2017-2020 Starsoft.
返回顶部