求源碼 分享下
有源碼嗎？分享一下，我CSS寫出來，下面的ctrl紅色控制條怎么顯示不出來，跟老師是一樣的，怎么都實現不了
1551932371
2016-03-30
4 回答
舉報
0/150
提交
取消
2016-04-12
想要源碼的，關注github https://github.com/cllgeek/Preview-Slideshow ?多多請教
2016-04-01
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css3實現頁面平滑過渡</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">
<!-- 去指定網址加載字體 -->
<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">
<!--圖標 -->
<div data-icon="H"></div>
<!-- 標題 -->
<h2>Serendipity</h2>
<!-- 段落內容 -->
<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>
<!-- 段落內容 -->
<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world
Hello worldHello worldHello worldHello worldHello world</p>
</section>
<section id="st-panel-3">
<!--圖標 -->
<div data-icon="B"></div>
<!-- 標題 -->
<h2>framquillity</h2>
<!-- 段落內容 -->
<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">
<!--圖標 -->
<div data-icon="X"></div>
<!-- 標題 -->
<h2>Positivity</h2>
<!-- 段落內容 -->
<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world
Hello worldHello worldHello worldHello worldHello world</p>
</section>
<section id="st-panel-5">
<!--圖標 -->
<div data-icon="C"></div>
<!-- 標題 -->
<h2>Passion</h2>
<!-- 段落內容 -->
<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中用于設置字體的抗鋸齒或者說光滑度的屬性*/
/* 語法規則：font-smoothing:subpixel-antialiased | none | antialiased; */
/*取值說明：none用于小像素的文本，subpixel-antialiased瀏覽器默認的、antialiased反鋸齒*/
a{
text-decoration: none;
color: #555;
}
/* 清除浮動的類 */
.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的優先級沒有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復選框按鈕 */
.st-container input:checked + a,
.st-container input:checked:hover + a
{ /*選中input radio后的a按鈕的顏色樣式是不一樣的*/
background: #821134;
} /*被選中的單選按鈕后面的a樣式*/
.st-container input:checked + a:after{ /*動態生成三角號*/
content: "";
width: 0;
height: 0;
overflow: hidden;
border: 20px solid transparent;
border-bottom-color: #821134;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -20px;
}
/* 鼠標滑過 */
.st-container input:hover + a{ /* + 號 找到緊跟在input后面的a標簽*/
background: #AD244F;
}
/* 內容 */
.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:定義當元素不面向屏幕時是否可見; 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%);
}
/* 內容的圖標 */
.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中一個模塊，主要是用于將自己定義的web字體嵌入到網頁中 */
/* 常用字體格式：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標題動畫樣式 */
#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
}
}
/* 添加符合瀏覽器內核 */
@-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
}
}
/* 段落設置 */
.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
}
}
/* 什么時候用transition作動畫？什么時候用animation作動畫？ */
/* 觸發事件產生動畫用transition!!! */
/* 不需要觸發事件所產生的動畫用animation!!! */
-animation-name;// 需要綁定到選擇器的keyframe名稱
-animation-duration;//完成動畫所花費的時間，s或者ms
-animation-timing-function; //動畫速度曲線
-animation-delay;//動畫開始之前的延遲時間
-animation-iteration-count;//動畫播放的次數
-animation-direction; //規定是否應該輪流反向播放動畫
2016-03-30
試了一下問答區的兩個源代碼。貌似都有問題
2016-03-30
怎么會？