内容简介:常遇到心形图案,比如点赞和取消点赞的使用场景。之前的使用方式是图片接入,作为准备一个添加宽高
常遇到心形图案,比如点赞和取消点赞的使用场景。之前的使用方式是图片接入,作为 img
或 backgroundImage
插入到 dom 中去。现在自己动手用css绘制一个心形图案。
心形
准备一个 dom
元素如下,为其 id
赋值为 heart
<div id="heart"></div> 复制代码
添加宽高
#heart { position: relative; width:50px; height:40px; } 复制代码
现在它应该是一个宽 50px
,高 40px
的矩形,没跑了。现在开始操作伪元素
/*上一步骤的代码省略...*/ #heart:before, #heart:after{ position: absolute; left:0; top:0; content: ''; width: 25px; height: 40px; background: red; border-radius: 20px 20px 0 0; } #heart:after { content: ''; left: 25px; top:0 } 复制代码
emmm... 形状无法描述,上图吧还是...到现在为止的形状应该是这个样子的。
接下来要做的是将 before
和 after
两块内容旋转。代码如下:
#heart:before, #heart:after{ position: absolute; left:25px; top:0; content: ''; width: 25px; height: 40px; background: red; border-radius: 40px 40px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } #heart:after { content: ''; left: 0; top:0; transform: rotate(45deg); transform-origin: 100% 100%; } 复制代码
上图上图...
效果已出,感谢阅读。
源码在此 或访问我的博客
以上所述就是小编给大家介绍的《如何使用 css 绘制心形》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法与数据结构(第二版)
傅清祥、王晓东 / 电子工业出版社 / 2001-8-1 / 34.00
本书是《计算机学科教学计划1993》的配套教材之一。它覆盖了《计算机学科教学计划1993》中开列的关于算法与数据结构主科目的所有知识单元。其主要内容有:算法与数据结构的概念、抽象数据类型(ADT)、基于序列的ADT(如表,栈,队列和串等)。反映层次关系的ADT(如树,堆和各种平衡树等)、关于集合的ADT(如字典,优先队列和共查集等)、算法设计的策略与技巧、排序与选择算法、图的算法、问题的计算复杂性一起来看看 《算法与数据结构(第二版)》 这本书的介绍吧!