1、先來個class="heart"的div
<div class="heart"></div>
2、講上面的 div 整成紅色的正方形，然後轉 45 度變成個菱形樣
.heart {
position: relative;
width: 300px;
height: 300px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
background: red;
}
3、通過:after和:before偽元素，畫兩個一樣大小的圓
.heart:before, .heart:after {
position: absolute;
display: block;
content: '';
width: 300px;
height: 300px;
border-radius: 100%;
background: red;
}
4、把上面的兩個圓移到div適當的位置，心形就出來了
.heart:before {
left: -50%;
top: 0;
}
.heart:after {
right: 0;
top: -50%;
}
5、最後效果，可以給它加個 css3 動畫效果，實現心臟跳動的動畫(縮小一倍後居中顯示)：
1、新建個div，或者span什麼的
<span class="ex-search"></span>
.ex-search {
position: relative;
}
2、用:before偽元素畫一個圓並給一些內陰影，內陰影根據需要調整
.ex-search:before {
content: ' ';
position: absolute;
width: 30px;
height: 30px;
border: 1px solid #666;
border-radius: 30px;
box-shadow: inset 1px 1px 10px rgba(0,0,0,.3);
}
3、用:after偽元素畫一個放大鏡手柄狀圖，要是夠無聊還可以 css3 漸變一下，並旋轉 45 度，旋轉度數可以按自己需要設定
.ex-search::after {
content: ' ';
position: absolute;
width: 18px;
height: 5px;
background: #666;
border-radius: 5px 0 0 5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
4、把上面兩部畫的圖形移動到一起組合成一個放大鏡的圖標，實際位置根據實際情況調整
.ex-search:before {
top: 0;
left: 0;
}
.ex-search:after {
right: -42px;
bottom: -36px;
}
5、最後效果，可以結合其他 hover 什麼的效果使用
在字體圖標面前，這些都是浮雲，就是無聊玩玩
覺得本文對你有幫助？請分享給更多人
關注「網頁設計自學平臺」快速提升技能
來源：愛思資源網
每天學一點·小白快速進階大神
微信ID：WEB_wysj
▲長按二維碼關注
▼戳閱讀原文入群免費領取全套視頻