Html Css旋转木马问题
我正在开发我的自定义站点,并开发了一个纯css旋转木马。有一个问题是,每当我导航到第二个图像时,位置都不会保持不变:它变为底部我的意思是位置变为底部。请帮我解决这个问题,有没有办法在其中添加自动滚动??代码如下: Html: 干得好 我不明白你到底有什么问题。我用chrome找不到问题 对于自动滚动,如果您尝试不使用javascript,则可以使用悬停上的关键帧应用css动画 关于css选择器,尽可能使用子选择器a>b。它比后代选择器a b更有效 顺便说一句,这里是旋转木马的一种变体,使用display:inline:block,没有li元素包裹锚点。DOM深度越小,元素越少=效率越高 HTML:Html Css旋转木马问题,html,css,Html,Css,我正在开发我的自定义站点,并开发了一个纯css旋转木马。有一个问题是,每当我导航到第二个图像时,位置都不会保持不变:它变为底部我的意思是位置变为底部。请帮我解决这个问题,有没有办法在其中添加自动滚动??代码如下: Html: 干得好 我不明白你到底有什么问题。我用chrome找不到问题 对于自动滚动,如果您尝试不使用javascript,则可以使用悬停上的关键帧应用css动画 关于css选择器,尽可能使用子选择器a>b。它比后代选择器a b更有效 顺便说一句,这里是旋转木马的一种变体,使用dis
请为大型代码示例创建JSFIDLE。我下次会这样做,但请告诉我拉滑块有什么问题down@user3148503为什么下次呢?我们不能自动地盯着大量的代码看问题出在哪里,除非我们看到问题的一个实例。编辑你的文章,使用JSFIDLE,你将有更好的机会解决你的问题。它在你的FIDLE中运行良好。但在我的浏览器中不起作用
<div id="slider">
<!-- Sildes -->
<img id="one" src="image Url 1" />
<img id="two" src="image Url 2" />
<img id="three" src="image Url 3" />
<img id="four" src="image Url 4" />
<img id="five " src="image Url 5" />
<!-- Links for the slides! -->
<ul>
<li>
<a href="#one"></a>
</li>
<li>
<a href="#two"></a>
</li>
<li>
<a href="#three"></a>
</li>
<li>
<a href="#four"></a>
</li>
<li>
<a href="#five"></a>
</li>
</ul>
</div>
#slider {
width: 640px;
height: 320px;
margin: 50px auto 0;
position: relative;
background: #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
#slider:before, #slider:after {
content: '';
position: absolute;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1;
}
#slider:after {
left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg);
}
#slider ul {
width: 140px;
height: 40px;
padding: 0 0 0 0;
position: absolute;
z-index: 10;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: -60px;
}
#slider ul li:first-child {
margin-left: 16px;
}
#slider ul li {
float: left;
margin-right: 12px;
margin-top: 14px;
}
#slider ul li:last-child {
margin-right: 0;
}
#slider ul li a {
width: 12px;
height: 12px;
display: block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #aaa;
box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#slider ul li a:hover {
background: #888;
}
#slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#slider img:target {
opacity: 1;
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
-ms-transform: rotateZ(0);
-o-transform: rotateZ(0);
transform: rotateZ(0);
}
#slider img#five {
opacity: 1;
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
-ms-transform: rotateZ(0);
-o-transform: rotateZ(0);
transform: rotateZ(0);}
#slider img:not(:target), #slider img:target ~ img#five {
opacity: 0;
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
}
#slider ul li a[href="#five"] {
background: #777;
}
#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {
background: #777;
}
#two:target ~ ul li a[href="#five"],
#three:target ~ ul li a[href="#five"],
#four:target ~ ul li a[href="#five"],
#one:target ~ ul li a[href="#five"] {
background: #aaa;
}
<div id="slider">
<!-- Sildes -->
<img id="one" src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg" />
<img id="two" src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" />
<img id="three" src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" />
<img id="four" src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" />
<img id="five" src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" />
<!-- Links for the slides! -->
<section>
<a href="#one"></a>
<a href="#two"></a>
<a href="#three"></a>
<a href="#four"></a>
<a href="#five"></a>
</section>
</div>
#slider {
width: 640px;
height: 320px;
margin: 50px auto 0;
position: relative;
background: #fff;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
#slider:before, #slider:after {
content: '';
position: absolute;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1;
}
#slider:after {
left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg);
}
#slider section {
width: 140px;
height: 40px;
padding: 0 0 0 0;
position: absolute;
z-index: 10;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: -60px;
}
#slider > section > a {
width: 12px;
height: 12px;
display: inline-block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #aaa;
box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
-moz-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
-webkit-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#slider > section > a:hover {
background: #888;
}
#slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#slider img:target {
opacity: 1;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
#slider img#five {
opacity: 1;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
#slider img:not(:target), #slider img:target ~ img#five {
opacity: 0;
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
#slider > section > a[href="#five"] {
background: #777;
}
#one:target ~ section > a[href="#one"],
#two:target ~ section > a[href="#two"],
#three:target ~ section > a[href="#three"],
#four:target ~ section > a[href="#four"],
#five:target ~ section > a[href="#five"] {
background: #777;
}
#two:target ~ section > a[href="#five"],
#three:target ~ section > a[href="#five"],
#four:target ~section > a[href="#five"],
#one:target ~ section > a[href="#five"] {
background: #aaa;
}