本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下纯CSS绘制一个爱心的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。需求/功能:
分析:
- 爱心可以通过一个正方形+两个圆形组合成。(学习视频分享:css视频教程)
1、先画一个正方形+圆形, 摆放位置如下:
2、再添加上一个圆形.
3、最后再将整个图形顺时针旋转45度即可.
初步实现:
1、先画一个正方形:
1 2 3 | < body >
< div id = "heart" ></ div >
</ body >
|
1 2 3 4 5 | #heart{
height : 300px ;
width : 300px ;
border : 2px solid black ;
}
|
2、给这个正方形的左边加行一个圆形.这里使用伪类:before来实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #heart{
height : 200px ;
width : 200px ;
border : 2px solid black ;
position : relative ;
}
#heart:before{
content : '' ;
width : 200px ;
height : 200px ;
border : 2px solid black ;
border-radius: 50% ; // 正方形加圆角变成圆
position : absolute ;
left : -100px ; // 向左位移正方形一半的长度
}
|
此时图形长这样:
3、再添加一个圆形, 这里使用after伪类来实现.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #heart{
height : 200px ;
width : 200px ;
border : 2px solid black ;
position : relative ;
}
// 这里偷个懒.直接写一块了
#heart:before,#heart:after{
content : '' ;
width : 200px ;
height : 200px ;
border : 2px solid black ;
border-radius: 50% ;
position : absolute ;
left : -100px ;
}
// 第二个圆, 只需要向上位移正方形一半的高度
#heart:after{
left : 0 ;
top : -100px ;
}
|
4、最后一步, 旋转一下, 然后上个颜色.去掉之前为了看清楚加的边框.
1 2 3 |
transform: rotate( 45 deg);
background-color : red ;
|
完整代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <style>
body,html{
display : flex;
align-items: center ;
justify- content : center ;
height : 100 vh;
}
#heart{
height : 200px ;
width : 200px ;
position : relative ;
transform: rotate( 45 deg);
background-color : red ;
}
#heart:before,#heart:after{
content : '' ;
width : 200px ;
height : 200px ;
border-radius: 50% ;
position : absolute ;
left : -100px ;
background-color : red ;
}
#heart:after{
left : 0 ;
top : -100px ;
}
</style>
</head>
<body>
<div id= "heart" ></div>
</body>
|
总结:
爱心可以由一个正方形和两个圆形组成, 这里使用before和after伪类, 然后, 分别对两个伪类进行位移. 最后挤上颜色, 就可以实现一个爱心。
更多编程相关知识,请访问:编程视频!!
以上就是通过有趣生动的图片,了解怎么使用纯CSS绘制一个爱心!!的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css怎么加滚动条
边框css四边怎么加
css 不规则边框怎么设置
css怎么控制行高?
css怎么让图片旋转90度
css的选择符有哪些
css怎么给图片加上下边框
css >什么选择器
css为什么要放在头部呢
css如何写二级下拉菜单
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 通过有趣生动的图片,了解怎么使用纯CSS绘制一个爱心!!