使用CSS畫愛心的過程詳解
發(fā)布時(shí)間：2017-01-05 09:59:04 作者：佚名 
我要評(píng)論
我要評(píng)論本文給大家分享使用css制作愛心的過程詳解，本文分步驟給大家介紹的非常詳細(xì)，需要的的朋友參考下
今天小穎給大家分享一個(gè)用CSS畫的愛心，底下有代碼和制作過程，希望對(duì)大家有所幫助。
第一步：
先畫一個(gè)正方形。如圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css畫桃心</title>
<style media="screen">
.heart-body {
width: 500px;
margin: 100px auto;
position: relative;
}
.heart-shape {
position: relative;
width: 100px;
height: 100px;
background-color: #f70e0e;
}
</style>
</head>
<body>
<div class="heart-body">
<div class="heart-shape"></div>
</div>
</body>
</html>
第二步：
將利用偽元素before和 :after，在正方形的左邊和上邊各畫一個(gè)正方形，然后再利用border-radius: 50%;屬性，修飾下這兩個(gè)正方形，然后就得到了兩個(gè)圓,如圖所示：
.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%;
/**兼容蘋果；谷歌，等一些瀏覽器認(rèn)*/
-moz-border-radius: 50%;
/**兼容火狐瀏覽器*/
-o-border-radius: 50%;
/**兼容opera瀏覽器*/
border-radius: 50%;
background-color: #ffc0cb;
}
第三步：
類名為：heart-shape的div 利用transform: rotate(45deg); 屬性將他們旋轉(zhuǎn)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);
}
小穎把圓的背景色和正方形的背景色沒給統(tǒng)一的顏色，是為了大家更好的看到明顯的效果圖，接下來小穎將其背景色設(shè)置成統(tǒng)一的，最終的愛心就出來了，如圖所示：
.heart-shape:before,
.heart-shape:after {
position: absolute;
content: '';
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
/**兼容蘋果；谷歌，等一些瀏覽器認(rèn)*/
-moz-border-radius: 50%;
/**兼容火狐瀏覽器*/
-o-border-radius: 50%;
/**兼容opera瀏覽器*/
border-radius: 50%;
background-color: #f70e0e;
}
以上所述是小編給大家介紹的使用CSS畫愛心的過程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
利用CSS3的border-radius繪制太極及愛心圖案示例
CSS3中的border-radius可以輕松地用來繪制弧線,如果只用來做圓角矩形的話可就太浪費(fèi)了,下面就來展示一下利用CSS3的border-radius繪制太極及愛心圖案示例,需要的朋友可以參2016-05-17純CSS畫的基本圖形（矩形、圓形、三角形、多邊形、愛心、八卦等）
今天在css-tricks上看到一篇文章，那篇文章讓我不禁心頭一震，強(qiáng)大的CSS啊，居然能畫出這么多基本的圖形2012-01-21