利用CSS3實現(xiàn)平移動畫效果示例代碼

發(fā)布時間：2016-10-12 14:58:49 作者：同Young不同樣

這篇文章主要給大家講如何通過CSS3實現(xiàn)平移動畫效果，在開始之前先給大家介紹一下與平移動畫有關(guān)的CSS3屬性以及相關(guān)的屬性描述，而后通過示例代碼給大家介紹了實現(xiàn)的方法，相信對大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們一起來看看吧。

一、平移動畫有關(guān)的CSS3屬性以及相關(guān)的屬性描述

　　1、transition-property：是用來指定當(dāng)元素其中一個屬性改變時執(zhí)行transition效果（例如：長度，寬度，顏色等）。
　　2、transition-duration：是用來指定元素轉(zhuǎn)換過程的持續(xù)時間（通過設(shè)置元素轉(zhuǎn)換過程持續(xù)的時間來實現(xiàn)動態(tài)效果，否則效果會變的很生硬）。
　　3、transition-timing-function：允許元素根據(jù)時間的推進去改變屬性值的變換速率（例如：先快后慢，先慢后快，勻速變化等等）。
　　4、transition-delay：是用來指定一個動畫開始執(zhí)行的時間，也就是說當(dāng)改變元素屬性值后多長時間開始執(zhí)行transition效果。

先來三張效果圖，由于是一個動態(tài)的過程，這里只發(fā)三張動態(tài)瞬間圖片：　

二、效果圖

圖片左側(cè)的文字還沒有進入

圖片上的四行文字正在逐條進入

圖片上四行文字完成動畫效果

三、示例代碼
HTML5全部代碼：

復(fù)制代碼

代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<figure class="test1">
<img src="img/dengfuru3.jpg" class="test1-img">
<figcaption>
<h2>鄧福如</h2>
《如果有如果》
《前面路口停》
《鄧大福是一只貓》
《Nothing On You》
</figcaption>
</figure>
</body>
</html>

CSS3樣式代碼：

復(fù)制代碼

代碼如下:

/*清原有的默認樣式*/
body,figure,figcaption,h2,h3,p{
margin: 0;
padding: 0;
} /*設(shè)置圖片樣式*/
.test1-img{
width: 50%;
height:10%;
overflow: hidden;
margin-left:250px;
} figure{
position: relative;
overflow: hidden;/*使用overflow屬性設(shè)置成hidden，圖片超出容器的部分就會自動隱藏*/
width: 100%;
float: left;
} figcaption{
position: absolute;
top:0;
left: 0;
} .test1{
background-color: #2F0000;
} .test1 figcaption {
margin: 20px;
} 
/*對test1的figcaption下面的p標簽進行樣式設(shè)計*/
.test1 figcaption p{
background-color: #FFF;
color: #333;
font-family: 微軟雅黑;
font-weight: 500;
letter-spacing: 1px;
margin-top: 10px;
text-align: center;
} 
/*給figure下面的所有的p標簽加上動畫延時效果*/
figure figcaption p{
transition: transform 0.35s;
} /*將test1里面的文字內(nèi)容移出頁面*/
.test1 figcaption p{
transform: translate(-400px,0px);
} 
/*當(dāng)鼠標滑過外部容器figure的時候改變p標簽和h2標簽的位置*/
.test1:hover figcaption p{
transform: translate(0px,0px);
} /*為了實現(xiàn)逐個出現(xiàn)的效果，就要單獨給每一個p標簽加上延時,給第一個p標簽加延時，每個P標簽的延時長短不同就決定了他們是先后進入頁面的*/
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s;/*當(dāng)鼠標放在圖片上0.05秒以后開始向右移動進入頁面*/
} /*為了實現(xiàn)逐個出現(xiàn)的效果，就要單獨給每一個p標簽加上延時,給第二個p標簽加延時*/
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.10s;/*當(dāng)鼠標放在圖片上0.10秒以后開始向右移動進入頁面*/
} /*為了實現(xiàn)逐個出現(xiàn)的效果，就要單獨給每一個p標簽加上延時,給第三個p標簽加延時*/
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s;/*當(dāng)鼠標放在圖片上0.15秒以后開始向右移動進入頁面*/
} /*為了實現(xiàn)逐個出現(xiàn)的效果，就要單獨給每一個p標簽加上延時,給第四個p標簽加延時*/
.test1 figcaption p:nth-of-type(4){
transition-delay: 0.2s;/*當(dāng)鼠標放在圖片上0.2秒以后開始向右移動進入頁面*/
}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。