整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
案例做一個桃心煽動效果，效果如下2圖所示（桃心右翼沿心形中心向前煽動）：
那么先來分析，整體布局
1 首先后面粉色，應該是一張大的背景圖
2 桃心左右兩邊裝飾，可以是版心分區圖片或者背景圖，這里使用的是img圖片，大家使用背景圖也是可以的
3 中間桃心部分，由于要做動畫，最好絕對定位，中間桃心部分，右翼需要做煽動效果，所以桃心部分應該一分為二，分為左右兩個部分
那么先來搭建結構和書寫基本樣式
1 結構（源碼截圖）：
源碼：
<div class="all"><!--大背景盒子-->
<div class="banner"><!--版心盒子-->
<img class="banner_l" src="images/banner_l.png" width="495" height="568" alt=""/><!--左邊裝飾-->
<img class="banner_r" src="images/banner_r.png" width="495" height="568" alt=""/><!--右邊裝飾-->
<div class="banner_in"><!--桃心盒子，絕對定位-->
<img src="images/left.png" width="495" height="568" alt=""/><!--桃心左翼-->
<img class="ani" src="images/right.png" width="495" height="568" alt=""/><!--桃心右翼-->
</div>
</div>
</div>
2 對應樣式（源碼截圖）：
源碼：
<style>
*{padding: 0; margin: 0; list-style: none;}
.all{ height:1000px; background:url(images/bg.jpg) no-repeat top center; overflow:hidden;}/*大背景*/
.banner{width:1000px; height:600px; margin:100px auto; position:relative;}/*版心盒子*/
.banner_l{ float: left;}/*左邊裝飾*/
.banner_r{ float: right;}/*右邊裝飾*/
.banner_in{width:990px; position:absolute; left:50%; top:0; margin-left:-495px;}/*桃心盒子*/
.banner_in img{ float:left;}/*桃心左右邊翼圖片浮動水平排列，嚴格對齊*/
</style>
基本結構樣式書寫完畢，現在來分析桃心右翼動畫效果:
1 首先我們要給運動的元素即桃心右翼添加動畫，動畫默認狀態和結束狀態應該一致
2 桃心右翼向前煽動的效果，即右翼桃心沿Y軸旋轉大約45度，那么可以利用css3里面的3d轉換transform:rotateY(45deg); 我們可以設置動畫元素50%的狀態為此狀態
3 這里需要注意css3 transform轉換模塊，默認旋轉的中心點是元素中心，桃心右翼旋轉的中心點應該是元素的左邊，那么我們需要添加一個css屬性控制旋轉的中心點transform-origin:left;
加動畫代碼：
1 給動畫元素加上類（源碼截圖）：
先給要做動畫元素加上class="ani"，再給ani書寫animation
.banner_in .ani{
animation:swing ease-in-out infinite 5s;
}
2 給動畫元素ani加動畫（源碼截圖）：
此步驟設置動畫默認和結束狀態旋轉角度不變，旋轉中心點為元素左邊，中間狀態沿Y軸旋轉45度，代碼如下
@keyframes swing{
0%,100%{transform-origin:left; transform:rotateY(0deg);}
50%{transform-origin:left; transform:rotateY(45deg);}
}
最后一步,animation和transform屬性，Chrome 和 Safari需加上瀏覽器私有前綴-webkit-,處理兼容問題。
源碼:
.banner_in .ani{
animation:swing ease-in-out infinite 5s;
-webkit-animation:swing ease-in-out infinite 5s;
}
@keyframes swing{
0%,100%{transform-origin:left; transform:rotateY(0deg);}
50%{transform-origin:left; transform:rotateY(45deg);}
}
@-webkit-keyframes swing{
0%,100%{-webkit-transform-origin:left; -webkit-transform:rotateY(0deg);}
50%{-webkit-transform-origin:left; -webkit-transform:rotateY(45deg);}
}
案例所用到的圖片文件和代碼，請登錄：
http://bbs.520it.com/forum.php?mod=viewthread&tid=1799
在之前的文章中有講解過，如何通過CSS代碼實現類似于杯子和心形的圖案，今天這篇文章我們繼續來看看兩個復雜的圖案。
文章中的代碼已經放到github上了，感興趣的同學可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure2.html
CSS3
首先我們來看看相機的實現效果。
效果圖
然后我們再一步步分析如何實現這個效果。
同樣我們需要對整個圖案進行拆分，主要分為三個部分。
相機的主體部分，背景色為黑色。
右上角的白色背景小方框。
中間的幾個黑白相間的圓環。
相機主體部分就是一個div，完全通過border屬性設置，因此需要保證其width: 0。
由于主體部分需要呈現為長方形，所以border的左右兩個方向要比上下兩個方向值大，border在不設置顏色的情況下默認為黑色。
最后設置border-radius值，讓其四個角呈現為圓角。
最終得到的相機主體部分CSS屬性如下。
相機主體CSS屬性
相機的右上角有個小的長方形，我們通過:after偽元素實現。
將其位置設置為絕對定位position: absolute。
設置top和left兩個方向的偏移量。
設置一個寬度但是高度值為0，通過border-top讓其顯示為一個長方形，border的顏色設置為白色。
偽元素的content: ''
通過以上的分析我們得到以下的CSS代碼。
右上角CSS代碼
大家都很容易想到中間的圓環肯定是通過偽元素:before來實現了。
將其位置定義為絕對定位position: absolute。
設置top和left兩個方向的偏移量。
由于這里有圓環，我們設置其內容的高度和寬度。
因為是圓形，border-radius設置為50%
設置border值，使其背景色為白色。
通過以上的分析我們得到如下的CSS代碼。
CSS代碼
運行上述的代碼后我們卻發現得到的圖案是這樣的。
運行后的圖案
是不是覺得少了點什么？
對，中間的圓形少了一個環，那么我們該怎么補充上這個環呢？
這里我們可以使用神奇的box-shadow屬性。
box-shadow屬性主要是用來給元素周圍添加陰影效果的，它的基本用法大家可以看看CSS3的文檔。
box-shadow接收的第三個參數表示的是陰影模糊的半徑，如果其值為0，則表示不具有模糊效果，本例子中因為要在圓形外面再增加一個圓形圖案，就需要將其值設置為0。
還有很重要的一點就是：可以給box-shadow設置多組值，任意一個相同的屬性，后面定義的值都會兼容前面的值，并不會覆蓋掉。
所以同心圓就只需要將box-shadow設置為兩組值即可，外層與內層顏色不同。
最終得到的中間圓環CSS屬性如下所示。
CSS代碼
運行上述代碼后就可以得到文字一開始的相機圖案了。
接下來我們再看一個通過box-shadow可以很容實現的月亮圖案。
月亮圖案
乍一看這個圖案沒有那么容易實現，其實熟悉border-radius和box-shadow屬性的同學可以很容易想到，這個圖案實現的核心就是利用box-shadow設置右側陰影。
然后設置rotate值使其旋轉一定的角度。
通過以上的分析可以得到以下的代碼。
月亮的CSS代碼
運行上述代碼即可得到月亮圖案。
今天這篇文章通過CSS屬性實現了相機和月亮兩個圖案，再結合前幾篇文章中實現的杯子和心形圖案，相信大家對CSS的神奇之處有所折服吧。
大家也趕緊動手自己實現一些常用的圖案吧。
篇文章主要給大家介紹一下如何靈活的運用css3來創建各種規則和不規則形狀的圖形，從而可以減少圖片的使用。以前一些特殊的圖形我們只能在Photoshop等圖像編輯軟件中制作，現在使用CSS3就可以完成了。通過使用新的CSS屬性，像transform和border-radius，我們可以創建非常漂亮和復雜的圖形效果。
正方形和長方形比較簡單我們只需要設置一個div的寬度和高度既可;
圓形在設置CSS時要設置寬度和高度相等，然后設置border-radius屬性為寬度或高度的一半即可;
要創建一個CSS三角形，需要使用border，通過設置不同邊的透明效果，我們可以制作出三角形的現狀。另外，在制作三角形時，寬度和高度要設置為0。
以上制作了3個三角形，如果只想要一個，將border-color其它的顏色也設置為transparent即可。
心形的制作是非常復雜的，可以使用兩個元素來拼合制作，分別將元素旋轉不同的角度，并修改transform-origin屬性來元素的旋轉中心點。
以上代碼看起來很復雜，其實主要由2個元素拼合而成，我們拆分來看box4-1和box4-2就很明了了。
太極八卦看起來很復雜，其實跟心形的代碼差不多，也是由3個元素拼接起來的，然后加上animation代碼，讓其自動旋轉起來，看起來很酷炫。
好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信【網站源碼】即可。
每日金句：用最少的悔恨面對過往。用最少的揮霍面對現在。用最多的夢想面對未來。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
