本文摘自PHP中文网,作者藏色散人,侵删。
css把div设置成爱心的方法:首先创建一个HTML示例文件;然后准备一个dom元素,并为其id赋值为heart;接着操作伪元素;最后将before和after两块内容旋转绘制成心形即可。
本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑
使用 css 绘制心形
常遇到心形图案,比如点赞和取消点赞的使用场景。之前的使用方式是图片接入,作为img 或 backgroundImage 插入到 dom 中去。现在自己动手用css绘制一个心形图案。
心形
准备一个dom元素如下,为其id赋值为heart
1 |
|
添加宽高
1 2 3 4 5 |
|
现在它应该是一个宽50px,高40px的矩形,没跑了。现在开始操作伪元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
emmm... 形状无法描述,上图吧还是...到现在为止的形状应该是这个样子的。
接下来要做的是将before和after两块内容旋转。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
上图上图...
【推荐学习:css视频教程】
以上就是css怎么把div设置成爱心的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者