过渡没有实现效果

过渡没有实现效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <mata name="viewport" content="width=device-wideth,initial-scale=1.0">
        <link rel="stylesheet" href="css/common.css" />
        <link rel="stylesheet" href="css/style1.css" />
        <title></title>
    </head>
    <body>
        <div class="container">
            <header>
                <h1>Sliding Image Panels <span>with CSS3</span></h1>
                <p class="codrops-demos">
                    <a href="index.html" class="current-demo">Demo1</a>
                    <a href="index.html">Demo2</a>
                    <a href="index.html">Demo3</a>
                    <a href="index.html">Demo4</a>
                </p>
            </header>
            <section class="cr-container">
                <input type="radio" name="radio-set" id="select-img-1" class="selectior-img-1" checked="checked"/>
                <label for="select-img-1" class="select-img-1">1</label>
                <input type="radio" name="radio-set" id="select-img-2" class="selectior-img-2"/>
                <label for="select-img-2" class="select-img-2">2</label>
                <input type="radio" name="radio-set" id="select-img-3" class="selectior-img-3"/>
                <label for="select-img-3" class="select-img-3">3</label>
                <input type="radio" name="radio-set" id="select-img-4" class="selectior-img-4"/>
                <label for="select-img-4" class="select-img-4">4</label>
                <div class="clr"></div>
                <div class="cr-bgimg">
                    <div>
                        <span>Slice 1 - Image -1</span>
                        <span>Slice 1 - Image -2</span>
                        <span>Slice 1 - Image -3</span>
                        <span>Slice 1 - Image -4</span>
                    </div>
                    <div>
                        <span>Slice 2 - Image -1</span>
                        <span>Slice 2 - Image -2</span>
                        <span>Slice 2 - Image -3</span>
                        <span>Slice 2 - Image -4</span>
                    </div>
                    <div>
                        <span>Slice 3 - Image -1</span>
                        <span>Slice 3 - Image -2</span>
                        <span>Slice 3 - Image -3</span>
                        <span>Slice 3 - Image -4</span>
                    </div>
                    <div>
                        <span>Slice 4 - Image -1</span>
                        <span>Slice 4 - Image -2</span>
                        <span>Slice 4 - Image -3</span>
                        <span>Slice 4 - Image -4</span>
                    </div>
                </div>
            </section>
        </div>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.cr-bgimg>div>span{
    width: 100%;
    height: 100%;
    position: absolute;
    left: -150px;
    top: 0;
    z-index: 2;
    text-indent:-9999px;
    background-repeat: no-repeat;
    -webkit-transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -ms-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
}
.cr-container>input.selectior-img-1:checked ~ .cr-bgimg,
.cr-bgimg>div>span:nth-child(1){
    background: url(../img/1.jpg);
}
.cr-container>input.selectior-img-2:checked ~ .cr-bgimg,
.cr-bgimg>div>span:nth-child(2){
    background: url(../img/2.jpg);
}
.cr-container>input.selectior-img-3:checked ~ .cr-bgimg,
.cr-bgimg>div>span:nth-child(3){
    background: url(../img/3.jpg);
}
.cr-container>input.selectior-img-4:checked ~ .cr-bgimg,
.cr-bgimg>div>span:nth-child(4){
    background: url(../img/4.jpg);
}
.cr-bgimg>div:nth-child(1)>span{
    background-position: 0 0;  
}
.cr-bgimg>div:nth-child(2)>span{
    background-position:-150px 0;
}
.cr-bgimg>div:nth-child(3)>span{
    background-position:-300px 0;
}
.cr-bgimg>div:nth-child(4)>span{
    background-position:-450px 0;
}
.cr-container>input.cr-selectior-img-1:checked ~ .cr-bgimg>div>span:nth-child(1),
.cr-container>input.cr-selectior-img-1:checked ~ .cr-bgimg>div>span:nth-child(2),
.cr-container>input.cr-selectior-img-1:checked ~ .cr-bgimg>div>span:nth-child(3),
.cr-container>input.cr-selectior-img-1:checked ~ .cr-bgimg>div>span:nth-child(4){
    z-index:10;
    left:0;
}
烦恼的逗逗 2017-09-12
源自：CSS3图片切换特效   3-9 transition实现当前图片飘入动画
28
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

5回答
怎么都被占用了呢 2017-09-13 21:25:03

.cr-container>input.selectior-img-1:checked ~ .cr-bgimg>div>span:nth-child(1),

.cr-container>input.selectior-img-2:checked ~ .cr-bgimg>div>span:nth-child(2),

.cr-container>input.selectior-img-3:checked ~ .cr-bgimg>div>span:nth-child(3),

.cr-container>input.selectior-img-4:checked ~ .cr-bgimg>div>span:nth-child(4){

    z-index:10;

    left:0;

}

input框类名写错了

0
收起回答
提问者 烦恼的逗逗 2017-09-13 17:36:10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
section,header{
    display: block;
}
@font-face {
    font-family:"BebasNeue";
    src: url("fonts/BebasNeue-webfont.eot");
    src: url("fonts/BebasNeue-webfont.woff") format("woff"),
         url("fonts/BebasNeue-webfont.ttf") format("truetype"),
         url("fonts/BebasNeue-webfont.woff") format("woff"),
         url("fonts/BebasNeue-webfont.svg") format("svg");
    font-weight:normal;
    font-style: normal;
}
body{
    background:url(../img/bg.jpg);
    font-family:Cambria,Palatino,"palatino linotype","Palatino LT STD",General,serif;
    font-size:15px;
    color: #3a2127;
    font-weight: 400;
    overflow-y:scroll;
}
a{
    text-decoration: none;
    color: #333;
}
.clr{
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
}
.container{
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
}
.container>header{
    padding: 20px 30px 10px 30px;
    margin: 0px 20px 10px 20px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.container>header>h1{
    font-size: 35px;
    line-height: 35px;
    font-weight: 400;
    color: rgba(26,89,120,0.9);
    padding-bottom: 5px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    font-family: "BebasNeue";
}
.container>header>h1>span{
    color: #7cbcd6;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}
.codrops-demos{
    padding: 14px;
}
.codrops-demos a{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background:rgba(104,171,194,0.5);
    border-radius:50%;
    font-weight:800;
    font-size: 11px;
    font-style: initial;
    color: #fff;
    margin: 0 3px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.05) inset;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
    background: rgba(255,255,255,0.9);
    color: rgba(104,171,191,1);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}
.codrops-demos a:hover{
    background: #4fa2c4;
}
.cr-container{
    width: 600px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    border: 20px #fff solid;
}
.cr-container>input{
    display: none;
}
.cr-container>label{/*lable内联元素*/
    font-size:initial;
    width: 150px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 32px;
    margin-top: 350px;
    float: left;
    position: relative;
    z-index: 1000;
}
.cr-container>label:before{
    content: "";
    width: 34px;
    height: 34px;
    border-radius:50%;
    background: rgba(130,195,217,0.9);
    position: absolute;
    left: 50%;
    margin-left:-17px;
    z-index: -1;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
}
.cr-container>input:checked+label{
    color: #68ab32;
}
.cr-container>input:checked+label:before{
    background: #fff;
    box-shadow: 0 0 0 4px rgba(104,171,194,0.5);
}
.cr-container>label:after{
    content: "";
    width: 1px;
    height: 400px;
    position: absolute;
    right: 0;
    bottom: -20px;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
    background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1)100%);
    background: -ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1)100%);
    background: -o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1)100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColortstr="#00fffff",endColorstr="ffffff",GradientType=0);
}
.cr-container>label:last-child:after{
    width: 0;
}
.cr-bgimg{
    width: 600px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-repeat:no-repeat;
}
.cr-bgimg>div{
    width: 150px;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
}


0
收起回答
Miss路 2017-09-13 09:37:55

部分代码没有办法办法给你看，而且你这个还有图片和其他文件都没有，建议自己再屡一下思路，对照着源码来看一下，不要着急，肯定能解决的。祝学习愉快！

0
收起回答
  • 提问者 烦恼的逗逗 #1
    这个是syle1里面的css我看了很多遍了都没有实现效果代码是完整的，common里面的代码不影响效果，
    2017-09-13 17:35:28
  • 提问者 烦恼的逗逗 #2
    css common的代码已经粘贴
    2017-09-13 17:36:35
提问者 烦恼的逗逗 2017-09-13 08:35:47

代码太长没办法全部粘贴

0
收起回答
卡布琦诺 2017-09-12 19:03:25

亲，片段的代码是没有办法帮你看出来哪里出了问题的，建议将代码全部贴上来，以便于大家更好的发现问题并帮你解答，祝学习愉快！

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

关于过渡效果失效的问题
37 0 6
没有显示过渡效果
11 0 4
老师，怎么效果实现不了呢
15 0 3
关于过渡效果
9 0 3
想给目的地页的返回顶部按钮添加过渡效果，能实现吗？
17 0 3

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码