溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)CSS3中怎么實(shí)現(xiàn)平移動(dòng)畫效果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
一、平移動(dòng)畫有關(guān)的CSS3屬性以及相關(guān)的屬性描述
1、transition-property：是用來指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行transition效果（例如：長(zhǎng)度，寬度，顏色等）。
2、transition-duration：是用來指定元素轉(zhuǎn)換過程的持續(xù)時(shí)間（通過設(shè)置元素轉(zhuǎn)換過程持續(xù)的時(shí)間來實(shí)現(xiàn)動(dòng)態(tài)效果，否則效果會(huì)變的很生硬）。
3、transition-timing-function：允許元素根據(jù)時(shí)間的推進(jìn)去改變屬性值的變換速率（例如：先快后慢，先慢后快，勻速變化等等）。
4、transition-delay：是用來指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間，也就是說當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開始執(zhí)行transition效果。
先來三張效果圖，由于是一個(gè)動(dòng)態(tài)的過程，這里只發(fā)三張動(dòng)態(tài)瞬間圖片：
二、效果圖
圖片左側(cè)的文字還沒有進(jìn)入
圖片上的四行文字正在逐條進(jìn)入
圖片上四行文字完成動(dòng)畫效果
三、示例代碼
HTML5全部代碼：
代碼如下:
<!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>
<h3><font color="white">鄧福如</font></h3>
<p>《如果有如果》</p>
<p>《前面路口停》</p>
<p>《鄧大福是一只貓》</p>
<p>《Nothing On You》</p>
</figcaption>
</figure>
</body>
</html>
CSS3樣式代碼：
代碼如下:
/*清原有的默認(rèn)樣式*/
body,figure,figcaption,h3,h4,p{
margin: 0;
padding: 0;
}</p>
<p>/*設(shè)置圖片樣式*/
.test1-img{
width: 50%;
height:10%;
overflow: hidden;
margin-left:250px;
}</p>
<p>figure{
position: relative;
overflow: hidden;/*使用overflow屬性設(shè)置成hidden，圖片超出容器的部分就會(huì)自動(dòng)隱藏*/
width: 100%;
float: left;
}</p>
<p>figcaption{
position: absolute;
top:0;
left: 0;
}</p>
<p>.test1{
background-color: #2F0000;
}</p>
<p>.test1 figcaption {
margin: 20px;
}</p>
<p>
/*對(duì)test1的figcaption下面的p標(biāo)簽進(jìn)行樣式設(shè)計(jì)*/
.test1 figcaption p{
background-color: #FFF;
color: #333;
font-family: 微軟雅黑;
font-weight: 500;
letter-spacing: 1px;
margin-top: 10px;
text-align: center;
}</p>
<p>
/*給figure下面的所有的p標(biāo)簽加上動(dòng)畫延時(shí)效果*/
figure figcaption p{
transition: transform 0.35s;
}</p>
<p>/*將test1里面的文字內(nèi)容移出頁面*/
.test1 figcaption p{
transform: translate(-400px,0px);
}</p>
<p>
/*當(dāng)鼠標(biāo)滑過外部容器figure的時(shí)候改變p標(biāo)簽和h3標(biāo)簽的位置*/
.test1:hover figcaption p{
transform: translate(0px,0px);
}</p>
<p>/*為了實(shí)現(xiàn)逐個(gè)出現(xiàn)的效果，就要單獨(dú)給每一個(gè)p標(biāo)簽加上延時(shí),給第一個(gè)p標(biāo)簽加延時(shí)，每個(gè)P標(biāo)簽的延時(shí)長(zhǎng)短不同就決定了他們是先后進(jìn)入頁面的*/
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s;/*當(dāng)鼠標(biāo)放在圖片上0.05秒以后開始向右移動(dòng)進(jìn)入頁面*/
}</p>
<p>/*為了實(shí)現(xiàn)逐個(gè)出現(xiàn)的效果，就要單獨(dú)給每一個(gè)p標(biāo)簽加上延時(shí),給第二個(gè)p標(biāo)簽加延時(shí)*/
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.10s;/*當(dāng)鼠標(biāo)放在圖片上0.10秒以后開始向右移動(dòng)進(jìn)入頁面*/
}</p>
<p>/*為了實(shí)現(xiàn)逐個(gè)出現(xiàn)的效果，就要單獨(dú)給每一個(gè)p標(biāo)簽加上延時(shí),給第三個(gè)p標(biāo)簽加延時(shí)*/
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s;/*當(dāng)鼠標(biāo)放在圖片上0.15秒以后開始向右移動(dòng)進(jìn)入頁面*/
}</p>
<p>/*為了實(shí)現(xiàn)逐個(gè)出現(xiàn)的效果，就要單獨(dú)給每一個(gè)p標(biāo)簽加上延時(shí),給第四個(gè)p標(biāo)簽加延時(shí)*/
.test1 figcaption p:nth-of-type(4){
transition-delay: 0.2s;/*當(dāng)鼠標(biāo)放在圖片上0.2秒以后開始向右移動(dòng)進(jìn)入頁面*/
}
上述就是小編為大家分享的CSS3中怎么實(shí)現(xiàn)平移動(dòng)畫效果了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
