html+css实现爱心制作，通俗易懂

电玩女神 2023-03-13 03:16 61阅读 0赞

> 今天刚好是母亲节，祝全天下的母亲节日快乐幸福~

前端工程师怎么能不懂骚操作？制作爱心有很多方法可以实现，今天介绍本人认为目前最简单的方法，仅依靠html+css。

一、先看看html结构，仅需一个容器和爱心元素，容器主要作用为相对定位，方便子元素爱心进行绝对定位调整。

<div class="heartCon">
    	<div class="heart"></div>
    </div>

二、进行css部分。刚说到heartCon给个相对定位先，然后就是爱心元素了，这里用到了伪类before和after，节省代码和方便调整。其实样式不多，**首先是宽高，其次背景颜色，接着给它们绝对定位以备后面的位置调整，最后将上方两个角设置圆角，弧度为50%。**

.heartCon { 
        position: relative;
    }
    .heart::before, .heart::after { 
        content: "";
        width: 30px;
        height: 45px;
        background-color: red;
        position: absolute;
        border-radius: 15px 15px 0 0;
    }

现在的样子应该是这样，两个伪类元素重叠着，但已经有点意思了。  
![在这里插入图片描述][20200510122533399.png]  
三、最后一步，作css3调整。先将两个伪类元素分别旋转角度45°和-45°，然后根据实际情况调整位置偏移，使两个伪类重叠至刚好形成爱心。

.heart::before { 
        transform: rotate(-45deg);
    }
    .heart::after { 
        transform: rotate(45deg);
        left: 10px;
    }

![在这里插入图片描述][20200510122909915.png]  
ok爱心完成，并不复杂，快用心写个爱心送给母亲吧~

[20200510122533399.png]: /images/20230312/f26a92c5a78b49f9893c8d21a7c52ed3.png
[20200510122909915.png]: /images/20230312/d62dec62d91b4ae49edc97b79c2f8fe9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，61人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTTPS通俗易懂

[https://www.wosign.com/News/httpsjiami\_20180817.htm][https_www.wosign.com_News_httpsji

r囧r小猫/ 2023年07月10日 12:52/ 0 赞/ 124 阅读

相关通俗易懂DenseNet

文章目录写在前面 Dense Block与Transition Layer DenseNet网络架构与性能理解DenseNet Plai

梦里梦外;/ 2023年07月10日 05:17/ 0 赞/ 125 阅读

相关 html+css实现爱心制作，通俗易懂

> 今天刚好是母亲节，祝全天下的母亲节日快乐幸福~ 前端工程师怎么能不懂骚操作？制作爱心有很多方法可以实现，今天介绍本人认为目前最简单的方法，仅依靠html+css。一、

电玩女神/ 2023年03月13日 03:16/ 0 赞/ 62 阅读

相关数据库范式——通俗易懂

数据库范式是数据库设计中必不可少的知识，没有对范式的理解，就无法设计出高效率、优雅的数据库。甚至设计出错误的数据库。而想要理解并掌握范式却并不是那么容易。教科书中一般以关系代

拼搏现实的明天。/ 2022年07月27日 15:50/ 0 赞/ 344 阅读

相关 kmp算法--通俗易懂

今天花了好几个小时学习这个算法，担心之后忘记，所以在这里做些总结。也方便其它人学习借鉴。学习理解的过程中也看了很多帖子，但感觉说的都不是特别清楚，也对照了课本，但是大量

心已赠人/ 2022年07月15日 18:38/ 0 赞/ 423 阅读

相关快速排序（通俗易懂）

高快省的排序算法有没有既不浪费空间又可以快一点的排序算法呢？那就是“快速排序”啦！光听这个名字是不是就觉得很高端呢。假设我们现在对“6 1 2 7 9 3 4

青旅半醒/ 2022年05月16日 08:50/ 0 赞/ 414 阅读

相关通俗易懂分布式

借鉴。原文请[点击这里][Link 1]。 — 分布式不是单单几句java代码就能建立的。如果一定要用java来理解，那java里面的多线程可以理解成一个分布式，他把用户请

迷南。/ 2022年04月25日 04:18/ 0 赞/ 476 阅读

相关【通俗易懂】手把手带你实现DeepFM！

1、模型输入部分，label的shape应该是\[None,1\] ![a06f518cf653646733c34a876a75503e.png][] 2、FM一次项的系数

梦里梦外;/ 2021年12月24日 13:45/ 0 赞/ 601 阅读

相关快速排序,通俗易懂

快速排序: ![在这里插入图片描述][20190819120816578.gif] package 快排; import java.util.A

- 日理万妓/ 2021年10月24日 00:52/ 0 赞/ 542 阅读

相关 tarjan通俗易懂题

洛谷2661 [https://www.luogu.org/problemnew/show/P2661][https_www.luogu.org_problemnew_sho

た入场券/ 2021年10月18日 12:42/ 0 赞/ 573 阅读