生活随笔
收集整理的這篇文章主要介紹了
利用CSS写简单爱心
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
學習CSS三天了，可以利用目前所學的制作一個簡單的愛心
僅僅需要三個盒子
一個正方形，兩個圓
如下圖：
或許還不是能很清楚的看出來，我把多余的部分消除了，如下：
好了，有了結(jié)構(gòu)，就可以來寫代碼了
主體部分很簡單，就是三個盒子
<div class="box"><div class="yuan1"></div><div class="yuan2"></div></div>
下面就通過css樣式來實現(xiàn)我們想要的效果
給這三個盒子設(shè)置同樣的寬高屬性，大盒子里面的小盒子需要邊框圓角
<style>.box{width: 100px;height: 100px;background-color: indianred;margin: 200px auto;}.box div{width: 100px;height: 100px;background-color: indianred;border-radius: 50%;}
</style>
做到這一步，實現(xiàn)的效果如下
此時第一個小圓是在正方形中
所以再給這兩個圓添加display屬性，轉(zhuǎn)換為行內(nèi)塊，讓他們可以在一行顯示
但是如果你學了浮動，就更簡單，最后再講
此時轉(zhuǎn)換成行內(nèi)塊還有注意一點：行內(nèi)塊之間有間隙
所以你還要消除行內(nèi)塊的影響
有這幾種方法：
1.font-size設(shè)置為0px
這種方法僅使用于無文本元素，有文本的話處理比較麻煩，需要把字體大小再設(shè)置回來
2.調(diào)整margin值
行內(nèi)塊間隙默認4px,自己可以看著調(diào)
消除掉行內(nèi)塊的影響后，再把兩個圓向上移動高度的一半，第二個圓再向右移動寬度的一半就可以呈現(xiàn)心的效果了
完整代碼如下：
<style>.box{width: 100px;height: 100px;background-color: indianred;margin: 200px auto;font-size: 0px;transform: rotate(-45deg);}.box div{width: 100px;height: 100px;background-color: indianred;margin-top: -50px;border-radius: 50%;display: inline-block;}.yuan2{margin-left: 50px;}</style>
</head>
<body><div class="box"><div class="yuan1"></div><div class="yuan2"></div></div>
</body>
拓展知識：
代碼里有一個屬性，初學者可能不知道
transform：rotate（-45deg）
;
這是旋轉(zhuǎn)屬性，后面會學到，用這里可以讓心呈現(xiàn)的更好看
這里說一下用浮動怎么做
讓他們左浮動，就可以在一行顯示，完整代碼如下：
<style>.box{width: 100px;height: 100px;background-color: indianred;margin: 200px auto;transform: rotate(-45deg);}.box div{width: 100px;height: 100px;background-color: indianred;margin-top: -50px;border-radius: 50%;float: left;}.yuan2{margin-left: 50px;}</style>
</head>
<body><div class="box"><div class="yuan1"></div><div class="yuan2"></div></div>
</body>
這是我用目前所學到的知識寫出來的簡單版，后續(xù)我學的更多的時候，會更新這個做法。
總結(jié)
以上是生活随笔為你收集整理的利用CSS写简单爱心的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
