課程
/前端開發(fā)
/JavaScript
/JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果
有源碼嗎？分享一下，我CSS寫出來(lái)，下面的ctrl紅色控制條怎么顯示不出來(lái)，跟老師是一樣的，怎么都實(shí)現(xiàn)不了
2016-03-30
源自：JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果 2-1
正在回答
想要源碼的，關(guān)注github https://github.com/cllgeek/Preview-Slideshow ?多多請(qǐng)教
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css3實(shí)現(xiàn)頁(yè)面平滑過(guò)渡</title>
<!-- IE使用最新的渲染模式 防止ie低版本瀏覽器不支持css3最新屬性-->
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 去指定網(wǎng)址加載字體 -->
<link rel="stylesheet" type="text/css">
<!-- 全局公共樣式文件 -->
<link rel="stylesheet" href="normalize.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div>
<!-- nav begin -->
<input type="radio" name="radio-set" checked="checked" id="st-control-1">
<a href="#st-panel-1">Serendipity</a>
<input type="radio" name="radio-set" id="st-control-2">
<a href="#st-panel-2">Happiness</a>
<input type="radio" name="radio-set" id="st-control-3">
<a href="#st-panel-3">framquillity</a>
<input type="radio" name="radio-set" id="st-control-4">
<a href="#st-panel-4">Positivity</a>
<input type="radio" name="radio-set" id="st-control-5">
<a href="#st-panel-5">Passion</a>
<!-- nav end -->
<section id="st-panel-1">
<!--圖標(biāo) -->
<div data-icon="H"></div>
<!-- 標(biāo)題 -->
<h2>Serendipity</h2>
<!-- 段落內(nèi)容 -->
<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world
Hello worldHello worldHello worldHello worldHello world</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div data-icon="2"></div>
<h2>Happiness</h2>
<section id="st-panel-3">
<div data-icon="B"></div>
<h2>framquillity</h2>
<section class="st-panel st-color" id="st-panel-4">
<div data-icon="X"></div>
<h2>Positivity</h2>
<section id="st-panel-5">
<div data-icon="C"></div>
<h2>Passion</h2>
</div>
</body>
</html>
**********************style.css*********************************************
@font-face{
font-family: "Raphaelicons";
src:url('fonts/raphaelicons-webfont.eot') format('eot'),
url('fonts/raphaelicons-webfont.svg') format('svg'),
url('fonts/raphaelicons-webfont.ttf') format('truetype'),
url('fonts/raphaelicons-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{
font-family: Georgia,serif;
background: #ddd;
font-weight: 400;
color: #333;
overflow: hidden;
-webkit-font-smoothing:antialiased;?
/*css3中用于設(shè)置字體的抗鋸齒或者說(shuō)光滑度的屬性*/
/* 語(yǔ)法規(guī)則：font-smoothing:subpixel-antialiased | none | antialiased; */
/*取值說(shuō)明：none用于小像素的文本，subpixel-antialiased瀏覽器默認(rèn)的、antialiased反鋸齒*/
a{
text-decoration: none;
color: #555;
/* 清除浮動(dòng)的類 */
.clr{
width: 0;
height: 0;
clear: both;
padding: 0;
margin: 0;
.st-container{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif;
/* input & a 共同的樣式 */
.st-container > input,.st-container > a{
width: 20%;
position: fixed;
bottom: 0;
height: 34px;
line-height: 34px;
.st-container > input{
opacity: 0; /*透明了，但是占位存在*/
z-index: 1000;
.st-container > a{
z-index: 10; /*a的優(yōu)先級(jí)沒有input高*/
font-weight: 700;
font-size: 16px;
background: #e23a6e;
text-align: center;
color: #fff;
text-shadow:1px 1px 1px rgba(151,24,64,0.2);
#st-control-1,#st-control-1 + a{
left: 0%;
#st-control-2,#st-control-2 + a{
left: 20%;
#st-control-3,#st-control-3 + a{
left: 40%;
#st-control-4,#st-control-4 + a{
left: 60%;
#st-control-5,#st-control-5 + a{
left: 80%;
/* 匹配所有被選中的單選框or復(fù)選框按鈕 */
.st-container input:checked + a,
.st-container input:checked:hover + a
{ /*選中input radio后的a按鈕的顏色樣式是不一樣的*/
background: #821134;
} /*被選中的單選按鈕后面的a樣式*/
.st-container input:checked + a:after{ /*動(dòng)態(tài)生成三角號(hào)*/
content: "";
border: 20px solid transparent;
border-bottom-color: #821134;
bottom: 100%;
left: 50%;
margin-left: -20px;
/* 鼠標(biāo)滑過(guò) */
.st-container input:hover + a{ /* + 號(hào) 找到緊跟在input后面的a標(biāo)簽*/
background: #AD244F;
/* 內(nèi)容 */
.st-scroll,.st-panel{
position: relative;
.st-scroll{
-webkit-transform:translate3d(0,0,0); //平移
-moz-transform:translate3d(0,0,0); //平移
-ms-transform:translate3d(0,0,0); //平移
-o-transform:translate3d(0,0,0); //平移
transform:translate3d(0,0,0); //平移
-webkit-backface-visibility:hidden;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
/* css3 backface-visibility:定義當(dāng)元素不面向屏幕時(shí)是否可見; Visible | Hidden*/
.st-panel{
background: #fff;
#st-control-1:checked ~ .st-scroll{
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-o-transform:translateY(0%);
-ms-transform:translateY(0%);
transform:translateY(0%);
#st-control-2:checked ~ .st-scroll{
-webkit-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);
-ms-transform:translateY(-100%);
transform:translateY(-100%);
#st-control-3:checked ~ .st-scroll{
-webkit-transform:translateY(-200%);
-moz-transform:translateY(-200%);
-o-transform:translateY(-200%);
-ms-transform:translateY(-200%);
transform:translateY(-200%);
#st-control-4:checked ~ .st-scroll{
-webkit-transform:translateY(-300%);
-moz-transform:translateY(-300%);
-o-transform:translateY(-300%);
-ms-transform:translateY(-300%);
transform:translateY(-300%);
#st-control-5:checked ~ .st-scroll{
-webkit-transform:translateY(-400%);
-moz-transform:translateY(-400%);
-o-transform:translateY(-400%);
-ms-transform:translateY(-400%);
transform:translateY(-400%);
/* 內(nèi)容的圖標(biāo) */
.st-desc{
width: 200px;
height: 200px;
background: #fa96b5;
margin-left: -100px;
-webkit-transform:translateY(-50%) rotate(45deg);
-moz-transform:translateY(-50%) rotate(45deg);
-o-transform:translateY(-50%) rotate(45deg);
-ms-transform:translateY(-50%) rotate(45deg);
transform:translateY(-50%) rotate(45deg);
/* 屬性選擇器[] */
[data-icon]:after{
content: attr(data-icon);
/* background: #0f0; */
font-size: 90px;
line-height: 200px;
top: 50%;
margin: -100px 0 0 -100px;
-webkit-transform:rotate(-45deg) translateY(25%);
-moz-transform:rotate(-45deg) translateY(25%);
-o-transform:rotate(-45deg) translateY(25%);
-ms-transform:rotate(-45deg) translateY(25%);
/* @font-face 是css3中一個(gè)模塊，主要是用于將自己定義的web字體嵌入到網(wǎng)頁(yè)中 */
/* 常用字體格式：5種 */
/* 1、TureTpe(.ttf)格式
** 2、OpenType(.otf)格式
? ?3、WebOpen Font Format(.woff)格式
? ?4、Embedded Open Type(.eot)格式
? ?5、SVG(.svg)格式
?*/
.st-panel h2{
color: #e23a6e;
font-size: 54px;
line-height: 50px;
width: 80%;
left: 10%;
margin-top: -70px;
font-weight: 900;
/* h2標(biāo)題動(dòng)畫樣式 */
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
-webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
animation:moveDown 0.6s ease-in-out 0.2s backwards;
@-webkit-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity: 0
100%{
-webkit-transform:translateY(0px);
opacity: 1
/* 添加符合瀏覽器內(nèi)核 */
@-moz-keyframes moveDown{
-moz-transform:translateY(-40px);
-moz-transform:translateY(0px);
@-o-keyframes moveDown{
-o-transform:translateY(-40px);
-o-transform:translateY(0px);
@-ms-keyframes moveDown{
-ms-transform:translateY(-40px);
-ms-transform:translateY(0px);
@keyframes moveDown{
transform:translateY(-40px);
transform:translateY(0px);
/* 段落設(shè)置 */
.st-panel p{
width: 50%;
left: 25%;
line-height: 22px;
margin-top: 10px;
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;
animation:moveUp 0.6s ease-in-out 0.2s backwards;
@-webkit-keyframes moveUp{
-webkit-transform:translateY(40px);
/* 什么時(shí)候用transition作動(dòng)畫？什么時(shí)候用animation作動(dòng)畫？ */
/* 觸發(fā)事件產(chǎn)生動(dòng)畫用transition!!! */
/* 不需要觸發(fā)事件所產(chǎn)生的動(dòng)畫用animation!!! */
-animation-name;// 需要綁定到選擇器的keyframe名稱
-animation-duration;//完成動(dòng)畫所花費(fèi)的時(shí)間，s或者ms
-animation-timing-function; //動(dòng)畫速度曲線
-animation-delay;//動(dòng)畫開始之前的延遲時(shí)間
-animation-iteration-count;//動(dòng)畫播放的次數(shù)
-animation-direction; //規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫
試了一下問(wèn)答區(qū)的兩個(gè)源代碼。貌似都有問(wèn)題
怎么會(huì)？
舉報(bào)
同樣的幻燈片，不一樣的切換，學(xué)會(huì)實(shí)現(xiàn)思路，操作很簡(jiǎn)單
2 回答求源碼?。?/p>
5 回答老師求源碼
4 回答求源碼，有嗎
1 回答請(qǐng)求源代碼
1 回答源代碼（第一部分）
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-04-12
想要源碼的，關(guān)注github https://github.com/cllgeek/Preview-Slideshow ?多多請(qǐng)教
2016-04-01
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css3實(shí)現(xiàn)頁(yè)面平滑過(guò)渡</title>
<!-- IE使用最新的渲染模式 防止ie低版本瀏覽器不支持css3最新屬性-->
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 去指定網(wǎng)址加載字體 -->
<link rel="stylesheet" type="text/css">
<!-- 全局公共樣式文件 -->
<link rel="stylesheet" href="normalize.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div>
<div>
<!-- nav begin -->
<input type="radio" name="radio-set" checked="checked" id="st-control-1">
<a href="#st-panel-1">Serendipity</a>
<input type="radio" name="radio-set" id="st-control-2">
<a href="#st-panel-2">Happiness</a>
<input type="radio" name="radio-set" id="st-control-3">
<a href="#st-panel-3">framquillity</a>
<input type="radio" name="radio-set" id="st-control-4">
<a href="#st-panel-4">Positivity</a>
<input type="radio" name="radio-set" id="st-control-5">
<a href="#st-panel-5">Passion</a>
<!-- nav end -->
<div>
<section id="st-panel-1">
<!--圖標(biāo) -->
<div data-icon="H"></div>
<!-- 標(biāo)題 -->
<h2>Serendipity</h2>
<!-- 段落內(nèi)容 -->
<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world
Hello worldHello worldHello worldHello worldHello world</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<!--圖標(biāo) -->
<div data-icon="2"></div>
<!-- 標(biāo)題 -->
<h2>Happiness</h2>
<!-- 段落內(nèi)容 -->
<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world
Hello worldHello worldHello worldHello worldHello world</p>
</section>
<section id="st-panel-3">
<!--圖標(biāo) -->
<div data-icon="B"></div>
<!-- 標(biāo)題 -->
<h2>framquillity</h2>
<!-- 段落內(nèi)容 -->
<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world
Hello worldHello worldHello worldHello worldHello world</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<!--圖標(biāo) -->
<div data-icon="X"></div>
<!-- 標(biāo)題 -->
<h2>Positivity</h2>
<!-- 段落內(nèi)容 -->
<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world
Hello worldHello worldHello worldHello worldHello world</p>
</section>
<section id="st-panel-5">
<!--圖標(biāo) -->
<div data-icon="C"></div>
<!-- 標(biāo)題 -->
<h2>Passion</h2>
<!-- 段落內(nèi)容 -->
<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world
Hello worldHello worldHello worldHello worldHello world</p>
</section>
</div>
</div>
</div>
</body>
</html>
**********************style.css*********************************************
@font-face{
font-family: "Raphaelicons";
src:url('fonts/raphaelicons-webfont.eot') format('eot'),
url('fonts/raphaelicons-webfont.svg') format('svg'),
url('fonts/raphaelicons-webfont.ttf') format('truetype'),
url('fonts/raphaelicons-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{
font-family: Georgia,serif;
background: #ddd;
font-weight: 400;
color: #333;
overflow: hidden;
-webkit-font-smoothing:antialiased;?
}
/*css3中用于設(shè)置字體的抗鋸齒或者說(shuō)光滑度的屬性*/
/* 語(yǔ)法規(guī)則：font-smoothing:subpixel-antialiased | none | antialiased; */
/*取值說(shuō)明：none用于小像素的文本，subpixel-antialiased瀏覽器默認(rèn)的、antialiased反鋸齒*/
a{
text-decoration: none;
color: #555;
}
/* 清除浮動(dòng)的類 */
.clr{
width: 0;
height: 0;
overflow: hidden;
clear: both;
padding: 0;
margin: 0;
}
.st-container{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif;
}
/* input & a 共同的樣式 */
.st-container > input,.st-container > a{
width: 20%;
position: fixed;
bottom: 0;
height: 34px;
line-height: 34px;
}
.st-container > input{
opacity: 0; /*透明了，但是占位存在*/
z-index: 1000;
}
.st-container > a{
z-index: 10; /*a的優(yōu)先級(jí)沒有input高*/
font-weight: 700;
font-size: 16px;
background: #e23a6e;
text-align: center;
color: #fff;
text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
#st-control-1,#st-control-1 + a{
left: 0%;
}
#st-control-2,#st-control-2 + a{
left: 20%;
}
#st-control-3,#st-control-3 + a{
left: 40%;
}
#st-control-4,#st-control-4 + a{
left: 60%;
}
#st-control-5,#st-control-5 + a{
left: 80%;
}
/* 匹配所有被選中的單選框or復(fù)選框按鈕 */
.st-container input:checked + a,
.st-container input:checked:hover + a
{ /*選中input radio后的a按鈕的顏色樣式是不一樣的*/
background: #821134;
} /*被選中的單選按鈕后面的a樣式*/
.st-container input:checked + a:after{ /*動(dòng)態(tài)生成三角號(hào)*/
content: "";
width: 0;
height: 0;
overflow: hidden;
border: 20px solid transparent;
border-bottom-color: #821134;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -20px;
}
/* 鼠標(biāo)滑過(guò) */
.st-container input:hover + a{ /* + 號(hào) 找到緊跟在input后面的a標(biāo)簽*/
background: #AD244F;
}
/* 內(nèi)容 */
.st-scroll,.st-panel{
width: 100%;
height: 100%;
position: relative;
}
.st-scroll{
left: 0;
top: 0;
-webkit-transform:translate3d(0,0,0); //平移
-moz-transform:translate3d(0,0,0); //平移
-ms-transform:translate3d(0,0,0); //平移
-o-transform:translate3d(0,0,0); //平移
transform:translate3d(0,0,0); //平移
-webkit-backface-visibility:hidden;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
}
/* css3 backface-visibility:定義當(dāng)元素不面向屏幕時(shí)是否可見; Visible | Hidden*/
.st-panel{
background: #fff;
overflow: hidden;
}
#st-control-1:checked ~ .st-scroll{
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-o-transform:translateY(0%);
-ms-transform:translateY(0%);
transform:translateY(0%);
}
#st-control-2:checked ~ .st-scroll{
-webkit-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);
-ms-transform:translateY(-100%);
transform:translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
-webkit-transform:translateY(-200%);
-moz-transform:translateY(-200%);
-o-transform:translateY(-200%);
-ms-transform:translateY(-200%);
transform:translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
-webkit-transform:translateY(-300%);
-moz-transform:translateY(-300%);
-o-transform:translateY(-300%);
-ms-transform:translateY(-300%);
transform:translateY(-300%);
}
#st-control-5:checked ~ .st-scroll{
-webkit-transform:translateY(-400%);
-moz-transform:translateY(-400%);
-o-transform:translateY(-400%);
-ms-transform:translateY(-400%);
transform:translateY(-400%);
}
/* 內(nèi)容的圖標(biāo) */
.st-desc{
width: 200px;
height: 200px;
background: #fa96b5;
position: absolute;
left: 50%;
top: 0;
margin-left: -100px;
-webkit-transform:translateY(-50%) rotate(45deg);
-moz-transform:translateY(-50%) rotate(45deg);
-o-transform:translateY(-50%) rotate(45deg);
-ms-transform:translateY(-50%) rotate(45deg);
transform:translateY(-50%) rotate(45deg);
}
/* 屬性選擇器[] */
[data-icon]:after{
content: attr(data-icon);
width: 200px;
height: 200px;
/* background: #0f0; */
color: #fff;
font-size: 90px;
text-align: center;
line-height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
-webkit-transform:rotate(-45deg) translateY(25%);
-moz-transform:rotate(-45deg) translateY(25%);
-o-transform:rotate(-45deg) translateY(25%);
-ms-transform:rotate(-45deg) translateY(25%);
font-family: "Raphaelicons";
text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
/* @font-face 是css3中一個(gè)模塊，主要是用于將自己定義的web字體嵌入到網(wǎng)頁(yè)中 */
/* 常用字體格式：5種 */
/* 1、TureTpe(.ttf)格式
** 2、OpenType(.otf)格式
? ?3、WebOpen Font Format(.woff)格式
? ?4、Embedded Open Type(.eot)格式
? ?5、SVG(.svg)格式
?*/
.st-panel h2{
color: #e23a6e;
font-size: 54px;
line-height: 50px;
text-align: center;
width: 80%;
position: absolute;
left: 10%;
top: 50%;
margin-top: -70px;
font-weight: 900;
text-shadow:1px 1px 1px rgba(151,24,64,0.2);
-webkit-backface-visibility:hidden;
}
/* h2標(biāo)題動(dòng)畫樣式 */
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
-webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
animation:moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity: 0
}
100%{
-webkit-transform:translateY(0px);
opacity: 1
}
}
/* 添加符合瀏覽器內(nèi)核 */
@-moz-keyframes moveDown{
0%{
-moz-transform:translateY(-40px);
opacity: 0
}
100%{
-moz-transform:translateY(0px);
opacity: 1
}
}
@-o-keyframes moveDown{
0%{
-o-transform:translateY(-40px);
opacity: 0
}
100%{
-o-transform:translateY(0px);
opacity: 1
}
}
@-ms-keyframes moveDown{
0%{
-ms-transform:translateY(-40px);
opacity: 0
}
100%{
-ms-transform:translateY(0px);
opacity: 1
}
}
@keyframes moveDown{
0%{
transform:translateY(-40px);
opacity: 0
}
100%{
transform:translateY(0px);
opacity: 1
}
}
/* 段落設(shè)置 */
.st-panel p{
position: absolute;
width: 50%;
left: 25%;
top: 50%;
font-size: 16px;
line-height: 22px;
padding: 0;
text-align: center;
-webkit-backface-visibility:hidden;
margin-top: 10px;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;
animation:moveUp 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveUp{
0%{
-webkit-transform:translateY(40px);
opacity: 0
}
100%{
-webkit-transform:translateY(0px);
opacity: 1
}
}
/* 什么時(shí)候用transition作動(dòng)畫？什么時(shí)候用animation作動(dòng)畫？ */
/* 觸發(fā)事件產(chǎn)生動(dòng)畫用transition!!! */
/* 不需要觸發(fā)事件所產(chǎn)生的動(dòng)畫用animation!!! */
-animation-name;// 需要綁定到選擇器的keyframe名稱
-animation-duration;//完成動(dòng)畫所花費(fèi)的時(shí)間，s或者ms
-animation-timing-function; //動(dòng)畫速度曲線
-animation-delay;//動(dòng)畫開始之前的延遲時(shí)間
-animation-iteration-count;//動(dòng)畫播放的次數(shù)
-animation-direction; //規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫
2016-03-30
試了一下問(wèn)答區(qū)的兩個(gè)源代碼。貌似都有問(wèn)題
2016-03-30
怎么會(huì)？