css画心形原理,科技常识：使用CSS画爱心的过程详解

今天小编跟大家讲解下有关使用CSS画爱心的过程详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用CSS画爱心的过程详解 的相关资料，希望小伙伴们看了有所帮助。

今天小颖给大家分享一个用CSS画的爱心 底下有代码和制作过程 希望对大家有所帮助。

第一步：

先画一个正方形。如图：

.heart-body {

width: 500px;

margin: 100px auto;

position: relative;

}

.heart-shape {

position: relative;

width: 100px;

height: 100px;

background-color: #f70e0e;

}

第二步：

将利用伪元素before和 :after 在正方形的左边和上边各画一个正方形 然后再利用border-radius: 50%;属性 修饰下这两个正方形 然后就得到了两个圆,如图所示：

.heart-shape:before,

.heart-shape:after {

position: absolute;

content: '';

width: 100px;

height: 100px;

background-color: #ffc0cb;

}

.heart-shape:before {

left: -45px;

}

.heart-shape:after {

top: -45px;

}

利用border-radius: 50%; 属性：

.heart-shape:before,

.heart-shape:after {

position: absolute;

content: '';

width: 100px;

height: 100px;

-webkit-border-radius: 50%;

/**兼容苹果；谷歌 等一些浏览器认*/

-moz-border-radius: 50%;

/**兼容火狐浏览器*/

-o-border-radius: 50%;

/**兼容opera浏览器*/

border-radius: 50%;

background-color: #ffc0cb;

}

第三步：

类名为：heart-shape的div 利用transform: rotate(45deg); 属性将他们旋转45度 如图所示：

.heart-shape {

position: relative;

width: 100px;

height: 100px;

background-color: #f70e0e;

-webkit-transform: rotate(45deg);

/* Safari 和 Chrome */

-moz-transform: rotate(45deg);

/* Firefox */

-ms-transform: rotate(45deg);

/* IE 9 */

-o-transform: rotate(45deg);

/* Opera */

transform: rotate(45deg);

}

小颖把圆的背景色和正方形的背景色没给统一的颜色 是为了大家更好的看到明显的效果图 接下来小颖将其背景色设置成统一的 最终的爱心就出来了 如图所示：

.heart-shape:before,

.heart-shape:after {

position: absolute;

content: '';

width: 100px;

height: 100px;

-webkit-border-radius: 50%;

/**兼容苹果；谷歌 等一些浏览器认*/

-moz-border-radius: 50%;

/**兼容火狐浏览器*/

-o-border-radius: 50%;

/**兼容opera浏览器*/

border-radius: 50%;

background-color: #f70e0e;

}

以上所述是小编给大家介绍的使用CSS画爱心的过程详解 希望对大家有所帮助 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。