介绍 CSS的全称是什么 需求/功能: <李> 分析: <李> 初步实现: & lt; body>
,,,& lt; div id=癶eart"祝辞& lt;/div>
& lt;/body> #{心
,,,,,,身高:,300 px;
,,,,,,宽度:,300 px;
,,,,,,:边界,2 px solid 黑色;
,,,} ,,,,,#{心
,,,,,,,,,,,身高:,200 px;
,,,,,,,,,,,宽度:,200 px;
,,,,,,,,,,,:边界,2 px solid 黑色;
,,,,,,,,,,,位置:,相对;
,,,,,,,}
,,,之前#心:{
,,,,,,,内容:,& # 39;& # 39;;
,,,,,,,宽度:,200 px;
,,,,,,,身高:,200 px;
,,,,,,,:边界,2 px solid 黑色;
,,,,,,,这个特性:,50%,,//,正方形加圆角变成圆
,,,,,,,位置:,绝对;
,,,,,,,左:,-100 px;,,//,向左位移正方形一半的长度
,,,} & lt; style>
,,,,,,,的身体,html {
,,,,,,,,,,,显示:,flex;
,,,,,,,,,,,对齐项目:,中心;
,,,,,,,,,,,justify-content:,中心;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下如何使用纯CSS绘制一个爱的心,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
CSS的全称是层叠样式表(层叠样式表),它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
怎么用CSS + HTML绘画出一个爱的心。
爱心可以通过一个正方形+两个圆形组合成。(学习视频分享:css视频教程)
1,先画一个正方形+圆形、摆放位置如下:
2,再添加上一个圆形。
3,最后再将整个图形顺时针旋转45度即可。
1,先画一个正方形:
2,给这个正方形的左边加行一个圆形。这里使用伪类:在来实现
此时图形长这样:
3,再添加一个圆形,这里使后用伪类来实现。
,,,,#{心
,,,,,,,,,,,身高:,200 px;
,,,,,,,,,,,宽度:,200 px;
,,,,,,,,,,,:边界,2 px solid 黑色;
,,,,,,,,,,,位置:,相对;
,,,,,,,}
,,,,,,,//,这里偷个懒。直接写一块了
,,,#心:{后,#心:
,,,,,,,内容:,& # 39;& # 39;;
,,,,,,,宽度:,200 px;
,,,,,,,身高:,200 px;
,,,,,,,:边界,2 px solid 黑色;
,,,,,,,这个特性:,50%;
,,,,,,,位置:,绝对;
,,,,,,,左:,-100 px;
,,,}
,,,//,第二个圆,,只需要向上位移正方形一半的高度
,,,#心:{后
,,,,,,,左:,0;
,,,,,,,:,-100 px;
,,,} 
4,最后一步,旋转一下,然后上个颜色。去掉之前为了看清楚加的边框。
,,,,/*给心进行旋转并加上颜色*/变换才能:旋转(45度); ,,背景颜色:红色;
完整代码:
