介绍 div {
位置:才能相对;
,,:100 px;
,,左:50%;
,,宽度:100 px;
,,身高:100 px;
,,背景颜色:番茄;
} div: before {
内容:,“才能”;
位置:绝对的,才能
,,:-50 px;
,,左:0;
,,宽度:100 px;
,,身高:100 px;
,,这个特性:50%;
,,背景颜色:蓝色;
}
div:{后
内容:,“才能”;
位置:才能,绝对;
,,:0 px;
,,左:50 px;
,,宽度:100 px;
,,身高:100 px;
,,背景颜色:黄色;
,,这个特性:50%;
} div: before {
,,…
,,背景颜色:番茄;
}
div:{后
,,…
,,背景颜色:番茄;
} div {
位置:才能相对;
,,:100 px;
,,左:50%;
,,宽度:100 px;
,,身高:100 px;
,,背景颜色:番茄;
变换才能:旋转(-45度);
} & lt; h2>爱无处不在…& lt;/h2>
& lt; div 类=癶eart"祝辞& lt;/div>
& lt; div 类=癶eart"祝辞& lt;/div>
& lt; div 类=癶eart"祝辞& lt;/div>
& lt; div 类=癶eart"祝辞& lt;/div>
& lt; div 类=癶eart"祝辞& lt;/div>
& lt; div 类=癶eart"祝辞& lt;/div>
& lt; div 类=癶eart"祝辞& lt;/div>
& lt; div 类=癶eart"祝辞& lt;/div>
… .heart {
位置:,才能相对;
,,宽度:100 px;
,,身高:90 px;
浮:,才能离开;
} .heart:之前,
.heart:{后
位置:才能,绝对;
内容:,“才能”;
,,左:50 px;
,,:0;
,,宽度:50 px;
,,身高:80 px;
,,背景:# fc2e5a;
,,这个特性:50 px 50 px 0, 0;
,,transform-origin: 0, 100%;
}
.heart:{后
,,左:0;
transform-origin 才能:100%,100%;
} .heart:之前,
.heart:{后
,,…
变换才能:旋转(-45度);
}
.heart:{后
,,…
变换才能:旋转(45度);
}
如何使用CSS画心形?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
<强> 1。一颗div一颗心
用一个div画出一个心,核心的方法就是使用伪元素。
首先,我们在页面上先写出一个div:
<代码> & lt; div> & lt;/div>
使用CSS,将这个div变为一个橘红色的正方形:
,
接着我们利用元素的两个伪元素:之前和:之后,画出一个蓝色的圆和一个黄色的圆,并且将它们的圆心分别定位在正方形的上边和右边。
再来,将刚刚实现的两个圆变成和正方形一样的颜色:
最后,将元素div旋转45度,我们要的心形就实现了!就是这么简单。
2。一颗心不够,那我们就画一屏
一颗心不够表达我的心意,那么就给她画出一屏幕的心。
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
我对你有表达不完的心意,就有写不完的div: HTML
浮动让它们填满整个屏幕:
两个伪元素代表我的左心房和右心房:
让左右心房都旋转45度,就形成了我满满的一屏幕心:
<强> 3。我对你的爱有多深
"以前我看事物,是用肉眼去看,但是在我死去的那一刹,那我开始用心眼去看这个世界,所有的事物,真的可以看得前所未有的那么清楚。”——周星驰
无论有多少颗心都不能表达出我对你的爱意有多深,于是,我要让你看到我的心都是由每一个爱你的细胞所组成的:
<代码> & lt; div类=癶eart"祝辞& lt;/div>
CSS:
