求源码分享下-慕课网

首页课程实战体系课手记专栏慕课教程

求源码分享下

来源：2-1 距离底部有点距离

1551932371

2016-03-30 12:19

有源码吗？分享一下，我CSS写出来，下面的ctrl红色控制条怎么显示不出来，跟老师是一样的，怎么都实现不了

写回答关注

4回答

极客教程

2016-04-12 08:21:03

想要源码的，关注github https://github.com/cllgeek/Preview-Slideshow 多多请教

0 0
恋雨情怀

2016-04-01 00:54:41

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css3实现页面平滑过渡</title>

<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" 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>

<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>

<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; //规定是否应该轮流反向播放动画

0 0
Heavens灬fall

2016-03-30 21:30:34

试了一下问答区的两个源代码。貌似都有问题

0 0
mym_0228

2016-03-30 16:10:48

怎么会？

0 0