整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
兩天，我們分別實現(xiàn)了六邊形和正方形的效果；今天，我們就來實現(xiàn)一下心形效果，心動的感覺哦！
用到的知識點：
接下來，我們就來實現(xiàn)心形的效果：
著手一個div，寬高分別設(shè)置100px；，因為之后的偽類元素可能會用到定位，所以，給div加一個相對定位：position：relative；加個背景色background-color: red；利用transform：rotate（45deg），讓div旋轉(zhuǎn)45°；最后用margin：auto；使div水平居中。
div代碼效果圖
之后，我們就用：：after和：：before來實現(xiàn)兩個圓：
偽類元素屬性設(shè)置：
content：“”；
position：absolute；
top： 0px;
left： 0px;
background-color：red；
width: 100%;
height: 100%;
border-radius: 50%;
注意：偽類元素必寫屬性，content：“”；
接下來，就用transform：translate（），來平移：：after和：：before；
div::after{
transform: translateX(-50%);
}
div::before {
transform: translateY(-50%);
}
寫到這里，我們就大功告成了；
最終效果
這就是我們的心形效果圖，希望對大家有所幫助。
在進行前端開發(fā)時，圖標(biāo)庫的使用是一項必須掌握的技巧，目前流行的圖標(biāo)庫有fontawesome，iconfont等，只需要引入到項目中，然后使用對應(yīng)的class，就會得到對應(yīng)的圖標(biāo)。
但是你們有沒有想過，如果是自己的話該怎么去實現(xiàn)這些圖標(biāo)呢？今天我們就來看看一些稍微復(fù)雜的圖標(biāo)是如何使用純CSS3實現(xiàn)吧。
文中的代碼已經(jīng)放到github上了，感興趣的同學(xué)自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html
CSS3
我們可以先來看看稍微復(fù)雜的圖標(biāo)的樣子。
圖標(biāo)庫
從圖標(biāo)中可以看出，都是平時很常用的正確，錯誤，方向鍵，放大，縮小，開鎖，解鎖等。
我們從中抽取幾個，慢慢分析它們是如何實現(xiàn)的吧。
水杯的圖標(biāo)如下所示。
水杯圖標(biāo)
我們對水杯圖標(biāo)進行拆分，分為杯身和杯柄兩個部分。
杯身中的白色長方形就是一個div，設(shè)置寬度和高度。
杯身的四周為黑色都是通過border實現(xiàn)，border-bottom比其他三個放向都要大。
杯身的下方是圓角，通過border-radius設(shè)置，border-radius的右下和左下方向設(shè)置相同的值。
通過上述的分析，我們可以得到杯身部分的CSS代碼。
杯身CSS代碼
杯柄通過偽元素:before實現(xiàn)。
杯柄設(shè)置為絕對定位，修改right值讓中間出現(xiàn)一個空白。
調(diào)整杯柄位置的寬度，只需要和杯身重疊即可。
杯柄右上角和右下角的border-radius設(shè)置為特定的值，展現(xiàn)成圓角的樣子。
通過以上的分析，我們可以得到杯柄部分的CSS代碼。
杯柄CSS代碼
首先我們來看看心形圖案的樣子。
心形圖案
接下來我們同樣將整個圖案拆分來看，分成左右兩個部分，我們將上述圖案換成兩種不同顏色就一目了然了。
拆分圖案
從圖案中可以看出，它實際是由兩個相同的圖行旋轉(zhuǎn)不同的角度構(gòu)成，相同的元素部分，可以通過設(shè)置border-radius值來實現(xiàn)。
我們將左右兩個半邊的形狀分別通過:before和:after來實現(xiàn)，原始的的div形狀的CSS屬性則很簡單，只需要設(shè)置相對位置和寬度為0即可。
基本CSS屬性
然后看看:before和:after共有的屬性，主要是保證為元素部分的定位為絕對定位，然后設(shè)置border-radius的值， 保證上半部分是圓角。
共有CSS屬性
然后是關(guān)鍵的兩半邊各自的CSS屬性。左側(cè)的圖形距左邊應(yīng)該為0，所以left: 0，右側(cè)的圖形距右側(cè)為0，所以right: 0。
各有的CSS屬性
同時左右兩側(cè)圖案需要進行旋轉(zhuǎn)，這里我們選擇旋轉(zhuǎn)48度，這是為什么呢？
很多人一下子可能會想到旋轉(zhuǎn)45度，我們來看看旋轉(zhuǎn)45度時的樣子。
旋轉(zhuǎn)45度
從圖形中可以看出，兩側(cè)有棱角，整個圖案就顯得不標(biāo)準(zhǔn)，當(dāng)旋轉(zhuǎn)超過45度時，棱角的部分就會被里面的圖案遮住。
所以這里我們選擇旋轉(zhuǎn)48度，達到最終的效果。
最終效果圖
今天這篇文章我們使用純CSS3的屬性畫出了一個杯子和心形兩個稍微復(fù)雜點的圖案，其實其它圖案也是類似的，只要我們能將其拆分，每個部分獨立實現(xiàn)，再組合就可以達到圖標(biāo)庫的效果了。
大家也可以自己動手實現(xiàn)一下噢~
是我收集整理到的117個Loading特效的第7個。心形特效。
當(dāng)用戶等待頁面加載時，一個好看的Loading特效不僅能夠增加用戶耐心，同時也能夠提高用戶對網(wǎng)站的印象。今天，我為大家介紹一款純CSS實現(xiàn)的心形Loading特效。
這個Loading特效是一個由多個心形組成的動畫，心形會不斷地變換大小，給人一種溫馨、浪漫的感覺。這款特效代碼簡單，可以快速應(yīng)用到你的網(wǎng)站或者APP中，提升用戶體驗。
<div class="loading"></div>
<style>
.loading {
position: relative;
width: 100px;
height: 90px;
left: 10px;
top: 10px;
animation: heart infinite 0.85s linear;
}
.loading:before,
.loading:after {
position: absolute;
top: 0;
left: 30px;
width: 30px;
height: 50px;
content: "";
transform: rotate(-45deg);
transform-origin: 0 100%;
border-radius: 30px 30px 0 0;
background: #000;
}
.loading:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes heart {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
</style>如果你正在尋找一款美觀、實用的Loading特效，那么不妨來試試這個純CSS實現(xiàn)的心形Loading特效。讓它為你的網(wǎng)站增添一份溫馨和浪漫吧！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
