今天小編來(lái)介紹網(wǎng)站設(shè)計(jì)中如何使用純CSS3制作，動(dòng)畫(huà)特色區(qū)塊，當(dāng)滑鼠滑道區(qū)塊時(shí)，會(huì)呈現(xiàn)動(dòng)畫(huà)效果，讓你的網(wǎng)頁(yè)設(shè)計(jì)得更活潑吧!
不啰嗦先來(lái)看完成的CSS3動(dòng)畫(huà)區(qū)塊DEMO
制作方法：
步驟一：HTML結(jié)構(gòu)如下
<div class="one_fourth">
<div class = "boxImage"><img src = "images/01.png"></div>
<h2>標(biāo)題</h2>
<div class = "boxDescription">說(shuō)明文字</div>
</div>
<div class="one_fourth">
<div class = "boxImage"><img src = "images/01.png"></div>
<h2>標(biāo)題</h2>
<div class = "boxDescription">說(shuō)明文字</div>
</div>
...其他方塊
步驟二：利用CSS設(shè)定區(qū)塊的外觀
CSS的設(shè)定如下，記得要將overflow設(shè)hidden屬性，不然當(dāng)動(dòng)畫(huà)在做動(dòng)的過(guò)程中，你會(huì)看到圖片從區(qū)塊的上方進(jìn)入，背景的部分，可以參考之前的css3漸層背景教學(xué)，自訂自己需要的背景，最后加上transition屬性，設(shè)定等下要加上的動(dòng)畫(huà)效果變化的是背景(background)。。
.one_fourth
text-align: center;
overflow: hidden;
float: left;
background-image: linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
background-image: -o-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
background-image: -moz-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
background-image: -webkit-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
background-image: -ms-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%); |
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, #F3F3F3), color-stop(0, #FAFAFA) );
border: 1px solid #E1E1E1;
-moz-box-shadow: 0px 1px 0px #ecebeb;
-webkit-box-shadow: 0px 1px 0px #ecebeb;
height: 228px;
width: 228px;
margin-right: 10px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
加上當(dāng)滑鼠滑上區(qū)塊后，背景要變成什么顏色
.one_fourth:hover{
background:#252525;
}
步驟三：設(shè)定動(dòng)畫(huà)效果
下面這邊只有寫(xiě)圖片的css動(dòng)畫(huà)效果，標(biāo)題及說(shuō)明文字的css也是一樣使用這個(gè)方式即可。
.homeBox .one_fourth .boxImage {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.homeBox .one_fourth:hover .boxImage {
position: relative;
-webkit-animation: moveFromTop 350ms ease;
-moz-animation: moveFromTop 350ms ease;
-ms-animation: moveFromTop 350ms ease;
}
步驟四：自訂CSS3動(dòng)畫(huà)
如果你有注意看上面的code的話(huà)，會(huì)發(fā)現(xiàn)animation套用的是個(gè)moveFromTop的屬性，這是css3可自訂的動(dòng)畫(huà)屬性，請(qǐng)把下面的code，復(fù)制貼在CSS的最后，即可使用了，而說(shuō)明文字的動(dòng)畫(huà)效果，也是把握一樣的原則，因此我就不另外寫(xiě)出來(lái)，請(qǐng)點(diǎn)選以下的下載連結(jié)，觀看css的source就看的到了。
@-webkit-keyframes moveFromTop {
from { top: -600px; }
to { top: auto; }
}
@-moz-keyframes moveFromTop {
from { -moz-transform: translateY(-600%); }
to { -moz-transform: translateY(0%); }
}
@-ms-keyframes moveFromTop {
from { -ms-transform: translateY(-600%); }
to { -ms-transform: translateY(0%); }
}
