0
내가 만든 CSS 슬라이더의 탐색 모음을 만들고 싶습니다.순수 CSS 슬라이더의 탐색 모음을 만드는 방법은 무엇입니까?
Here 당신이 볼 수있는 라이브 데모입니다.
그리고 나는 또한 수평으로 이미지를 슬라이드 싶어,
내가 이것을 달성 할 수있는 방법 어떤 생각?
내가 완전한 코드를 게시 할 때 오류가 표시되어 여기에 CSS의 완전한 코딩을 추가했습니다. jsfiddle 이미지가 표시되지 않을까 걱정하지 마십시오.하지만 코딩이 완벽합니다.
HTML
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="#">
<img src="images/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="images/img_2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="images/img_3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="images/img_4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="images/img_5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>
CSS
html, body {
background: #eaeaea url(../img/bg.png) repeat;
font-size: 12px;
font-family: "Open Sans", serif;
min-width: 960px;
margin: 0;
padding: 0;
color: #aaa;
}
.content h1 {
font-size: 48px;
color: #000;
text-shadow: 0px 1px 1px #f4f4f4;
text-align: center;
padding:60px 0 30px;
}
/* LAYOUT */
.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
/* CONTENT SLIDER */
#content-slider {
width: 100%;
height: 360px;
margin: 10px auto 0;
}
/* SLIDER */
#slider {
background: #000;
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
#mask {
overflow: hidden;
height: 320px;
}
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
#slider li.firstanimation {
-moz-animation: cycle 25s linear infinite;
-webkit-animation: cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation: cycletwo 25s linear infinite;
-webkit-animation: cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation: cyclethree 25s linear infinite;
-webkit-animation: cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation: cyclefour 25s linear infinite;
-webkit-animation: cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation: cyclefive 25s linear infinite;
-webkit-animation: cyclefive 25s linear infinite;
}
#slider .tooltip {
background: rgba(0, 0, 0, 0.7);
width: 300px;
height: 60px;
position: relative;
bottom: 75px;
left: -320px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color: #fff;
font-size: 24px;
font-weight: 300;
line-height: 60px;
padding: 0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left: 0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
/* PROGRESS BAR */
.progress-bar {
position: relative;
top: -5px;
width: 680px;
height: 5px;
background: #000;
-moz-animation: fullexpand 25s ease-out infinite;
-webkit-animation: fullexpand 25s ease-out infinite;
}
목표로하는 탐색 유형에 대한 설명을 추가 할 수 있습니까? 아마도 사진과 탐색 자체에서의 시도가 있을까요? 그리고 당신은 그것이 항상 수평 적으로 혹은 약간의 시간으로 항상 전환되기를 원합니 까? –
예 슬라이더의 탐색을 볼 수있는 사진을 추가했으며 슬라이더의 데모를 넣은 jsfiddle에서 볼 수있는 것처럼 확실한 전환을 추가했습니다. –
순수한 CSS에서 그런 일을 할 이유가 없습니다. 그것은 지나치게 길고, 거의 유지할 수 없으며 당신이 상상할 수있는 다른 모든 나쁜 단어들입니다. 당신이 CSS의 300 라인에서 원하는 것은 JS 20 라인 미만이 필요하다. jQuery –