怎么使用CSS畫
這篇文章給大家分享的是有關(guān)怎么使用CSS畫的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)頁設(shè)計,高端網(wǎng)頁制作,對成都混凝土攪拌罐等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計,網(wǎng)站優(yōu)化推廣哪家好,專業(yè)營銷推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。
今天小穎給大家分享一個用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%;
/**兼容蘋果；谷歌，等一些瀏覽器認(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;
}感謝各位的閱讀！關(guān)于“怎么使用CSS畫”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
當(dāng)前標(biāo)題：怎么使用CSS畫
瀏覽路徑：
http://weahome.cn/article/gsiccg.html
重慶分公司
重慶分公司
