品配飾活動(dòng)banner

html5特效制作教程

案例做一個(gè)桃心煽動(dòng)效果，效果如下2圖所示（桃心右翼沿心形中心向前煽動(dòng)）：

那么先來(lái)分析，整體布局

1 首先后面粉色，應(yīng)該是一張大的背景圖

2 桃心左右兩邊裝飾，可以是版心分區(qū)圖片或者背景圖，這里使用的是img圖片，大家使用背景圖也是可以的

3 中間桃心部分，由于要做動(dòng)畫(huà)，最好絕對(duì)定位，中間桃心部分，右翼需要做煽動(dòng)效果，所以桃心部分應(yīng)該一分為二，分為左右兩個(gè)部分

那么先來(lái)搭建結(jié)構(gòu)和書(shū)寫(xiě)基本樣式

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)樣式書(shū)寫(xiě)完畢，現(xiàn)在來(lái)分析桃心右翼動(dòng)畫(huà)效果:

1 首先我們要給運(yùn)動(dòng)的元素即桃心右翼添加動(dòng)畫(huà)，動(dòng)畫(huà)默認(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)畫(huà)元素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)畫(huà)代碼：

1 給動(dòng)畫(huà)元素加上類(lèi)（源碼截圖）：

先給要做動(dòng)畫(huà)元素加上class="ani"，再給ani書(shū)寫(xiě)animation

.banner_in .ani{

animation:swing ease-in-out infinite 5s;

}

2 給動(dòng)畫(huà)元素ani加動(dòng)畫(huà)（源碼截圖）：

此步驟設(shè)置動(dòng)畫(huà)默認(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-,處理兼容問(wèn)題。

源碼:

.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

言

在之前的文章中有講解過(guò)，如何通過(guò)CSS代碼實(shí)現(xiàn)類(lèi)似于杯子和心形的圖案，今天這篇文章我們繼續(xù)來(lái)看看兩個(gè)復(fù)雜的圖案。

文章中的代碼已經(jīng)放到github上了，感興趣的同學(xué)可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure2.html

CSS3

相機(jī)

首先我們來(lái)看看相機(jī)的實(shí)現(xiàn)效果。

效果圖

然后我們?cè)僖徊讲椒治鋈绾螌?shí)現(xiàn)這個(gè)效果。

同樣我們需要對(duì)整個(gè)圖案進(jìn)行拆分，主要分為三個(gè)部分。

• 相機(jī)的主體部分，背景色為黑色。

• 右上角的白色背景小方框。

• 中間的幾個(gè)黑白相間的圓環(huán)。

相機(jī)主體

相機(jī)主體部分就是一個(gè)div，完全通過(guò)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屬性

右上角長(zhǎng)方形

相機(jī)的右上角有個(gè)小的長(zhǎng)方形，我們通過(guò):after偽元素實(shí)現(xiàn)。

• 將其位置設(shè)置為絕對(duì)定位position: absolute。

• 設(shè)置top和left兩個(gè)方向的偏移量。

• 設(shè)置一個(gè)寬度但是高度值為0，通過(guò)border-top讓其顯示為一個(gè)長(zhǎng)方形，border的顏色設(shè)置為白色。

• 偽元素的content: ''

通過(guò)以上的分析我們得到以下的CSS代碼。

右上角CSS代碼

中間的圓環(huán)

大家都很容易想到中間的圓環(huán)肯定是通過(guò)偽元素:before來(lái)實(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值，使其背景色為白色。

通過(guò)以上的分析我們得到如下的CSS代碼。

CSS代碼

運(yùn)行上述的代碼后我們卻發(fā)現(xiàn)得到的圖案是這樣的。

運(yùn)行后的圖案

是不是覺(jué)得少了點(diǎn)什么？

對(duì)，中間的圓形少了一個(gè)環(huán)，那么我們?cè)撛趺囱a(bǔ)充上這個(gè)環(huán)呢？

這里我們可以使用神奇的box-shadow屬性。

box-shadow屬性主要是用來(lái)給元素周?chē)砑雨幱靶Ч模幕居梅ù蠹铱梢钥纯碈SS3的文檔。

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)行上述代碼后就可以得到文字一開(kāi)始的相機(jī)圖案了。

月亮

接下來(lái)我們?cè)倏匆粋€(gè)通過(guò)box-shadow可以很容實(shí)現(xiàn)的月亮圖案。

月亮圖案

乍一看這個(gè)圖案沒(méi)有那么容易實(shí)現(xiàn)，其實(shí)熟悉border-radius和box-shadow屬性的同學(xué)可以很容易想到，這個(gè)圖案實(shí)現(xiàn)的核心就是利用box-shadow設(shè)置右側(cè)陰影。

然后設(shè)置rotate值使其旋轉(zhuǎn)一定的角度。

通過(guò)以上的分析可以得到以下的代碼。

月亮的CSS代碼

運(yùn)行上述代碼即可得到月亮圖案。

結(jié)束語(yǔ)

今天這篇文章通過(guò)CSS屬性實(shí)現(xiàn)了相機(jī)和月亮兩個(gè)圖案，再結(jié)合前幾篇文章中實(shí)現(xiàn)的杯子和心形圖案，相信大家對(duì)CSS的神奇之處有所折服吧。

大家也趕緊動(dòng)手自己實(shí)現(xiàn)一些常用的圖案吧。

篇文章主要給大家介紹一下如何靈活的運(yùn)用css3來(lái)創(chuàng)建各種規(guī)則和不規(guī)則形狀的圖形，從而可以減少圖片的使用。以前一些特殊的圖形我們只能在Photoshop等圖像編輯軟件中制作，現(xiàn)在使用CSS3就可以完成了。通過(guò)使用新的CSS屬性，像transform和border-radius，我們可以創(chuàng)建非常漂亮和復(fù)雜的圖形效果。

1）正方形以及長(zhǎng)方形

正方形和長(zhǎng)方形比較簡(jiǎn)單我們只需要設(shè)置一個(gè)div的寬度和高度既可;

2）圓形

圓形在設(shè)置CSS時(shí)要設(shè)置寬度和高度相等，然后設(shè)置border-radius屬性為寬度或高度的一半即可;

3）三角形

要?jiǎng)?chuàng)建一個(gè)CSS三角形，需要使用border，通過(guò)設(shè)置不同邊的透明效果，我們可以制作出三角形的現(xiàn)狀。另外，在制作三角形時(shí)，寬度和高度要設(shè)置為0。

以上制作了3個(gè)三角形，如果只想要一個(gè)，將border-color其它的顏色也設(shè)置為transparent即可。

4）心形

心形的制作是非常復(fù)雜的，可以使用兩個(gè)元素來(lái)拼合制作，分別將元素旋轉(zhuǎn)不同的角度，并修改transform-origin屬性來(lái)元素的旋轉(zhuǎn)中心點(diǎn)。

以上代碼看起來(lái)很復(fù)雜，其實(shí)主要由2個(gè)元素拼合而成，我們拆分來(lái)看box4-1和box4-2就很明了了。

5）旋轉(zhuǎn)的太極

太極八卦看起來(lái)很復(fù)雜，其實(shí)跟心形的代碼差不多，也是由3個(gè)元素拼接起來(lái)的，然后加上animation代碼，讓其自動(dòng)旋轉(zhuǎn)起來(lái)，看起來(lái)很酷炫。

好了，本篇文章就給大家說(shuō)到這里，大家自己動(dòng)手寫(xiě)一下看能不能寫(xiě)出一樣的頁(yè)面效果出來(lái)，也可以找一些類(lèi)似的頁(yè)面自己練習(xí)一下，有需要源碼的可以直接私信【網(wǎng)站源碼】即可。

每日金句：用最少的悔恨面對(duì)過(guò)往。用最少的揮霍面對(duì)現(xiàn)在。用最多的夢(mèng)想面對(duì)未來(lái)。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。