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