内容简介:常遇到心形图案,比如点赞和取消点赞的使用场景。之前的使用方式是图片接入,作为准备一个添加宽高
常遇到心形图案,比如点赞和取消点赞的使用场景。之前的使用方式是图片接入,作为 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 绘制心形》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Complexity and Approximation
G. Ausiello、P. Crescenzi、V. Kann、Marchetti-sp、Giorgio Gambosi、Alberto M. Spaccamela / Springer / 2003-02 / USD 74.95
This book is an up-to-date documentation of the state of the art in combinatorial optimization, presenting approximate solutions of virtually all relevant classes of NP-hard optimization problems. The......一起来看看 《Complexity and Approximation》 这本书的介绍吧!