html-css

آخرین نظرات
  • ۱۷ تیر ۹۶، ۱۶:۱۶ - تنها ...
    تشکر
  • ۱۶ تیر ۹۶، ۲۲:۵۶ - تنها ...
    ممنون
چهارشنبه, ۳۱ خرداد ۱۳۹۶، ۱۰:۴۰ ب.ظ

اسلایدردربلاگ بدون جاوااسکریپت

چهارشنبه, ۳۱ خرداد ۱۳۹۶، ۱۰:۴۰ ب.ظ
سلاااممم
دراین آموزش قصدمعرفی یک اسلایدربسیارخوب وزیبارابه شمادارمم
اسلایدری که بدون هیچ اسکریپتی کارمیکنه
اسلایدراین قالب های عشق آسمانی
پس زیادمنتظرتون نمیزارم وکدهارودراین زیرقرارمیدم
کدhtml

<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="لینک عکس">
<img src="آدرس عکس" alt="/">
</a>
<div class="tooltip">
<h1>اسلایدر-علی قالب1</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="لینک عکس">
<img src="آدرس عکس" alt="/">
</a>
<div class="tooltip">
<h1>اسلایدر-علی قالب2</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="لینک عکس">
<img src="آدرس عکس" alt="/">
</a>
<div class="tooltip">
<h1>اسلایدر-علی قالب3</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="لینک عکس">
<img src="آدرس عکس" alt="/">
</a>
<div class="tooltip">
<h1>اسلایدر-علی قالب4</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="لینک عکس">
<img src="آدرس عکس" alt="/">
</a>
<div class="tooltip">
<h1>اسلایدر-علی قالب</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>
کدcss
@import url("http://bayanbox.ir/download/7372957094914503474/reset.css");
@import url("http://bayanbox.ir/download/5020935171374501258/animation.css");
/* LAYOUT */
/* 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 {
display: inline-block;
background: rgba(0, 0, 0, 0.7);
position: relative;
bottom: 75px;
left: -10px;
-moz-transition: all 1.7s ease-in-out;
-webkit-transition: all 1.7s ease-in-out;
-o-transition: all 1.7s ease-in-out;
transition: all 1.7s ease-in-out;
}

#slider .tooltip h1 {
color: #fff;
font-size: 24px;
font-weight: 300;
line-height: 60px;
padding: 0 0 0 20px;
/*-o-transition:1.7s ease-out;*/
/*-webkit-transition: 1.7s ease-out;*/
/*-moz-transition:1.7s ease-out;*/
/*transition: 1.7s ease-out;*/

}
#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: -370px;
}
#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;
}

div#mini-slider-box .entry-thumb img:hover,div#blog-info-box img:hover {
ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/*-------------- slide show---------------*/

.container {
float: right;
}

#slider {
margin: 0;
width: 940px;
}

#content-slider {
width: 680px;
margin: 0 5px 0 0;
}

#slider, #mask {
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
}
#slider .tooltip {
height: 55px;
-moz-transition: all 2.8s ease-in-out;
-webkit-transition: all 2.8s ease-in-out;
-o-transition: all 2.8s ease-in-out;
transition: all 2.8s ease-in-out;
}
#slider .tooltip h1 {
font-size:21px;
padding: 0 10px 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: -620px;
}
@media (max-width: 867px) {

.container {
height: 284px;
}

#content-slider, #slider, #mask {
height: 252px;
}

#mask ul li a img {
max-width: 111%;
}

.commentForm input#bComSub{
padding: 3px 39px;
}

#slider .tooltip h1 {
font-size: 17px;
}
}

@media (max-width: 765px) {
.main, .container {
width: 100%;
margin: 0;
}

.bg-black-nav{
min-width: 100%;
}

#mask ul li a img {
max-width: 100%;
}

.container {
height: 247px;
}
#content-slider, #slider, #mask {
height: 227px;
max-width: 100%;
}

.foot{
min-width: inherit;
}

article {
width: 100%;
float: none;
}

.aside {
width: 90%;
float: none;
margin: 0 auto;
}

.commentForm input#bComSub{
padding: 3px 60px;
}

}
@media (max-width: 390px) {
.container {
height: 129px;
}

#content-slider, #slider, #mask {
height: 113px;
}

#mask ul li a img {
max-width: 50%;
}

#slider .tooltip h1 {
font-size: 12px;
}

}

div#mini-slider-box span{
border-top: 4px solid #970eaf;
}


موافقین ۱ مخالفین ۰ ۹۶/۰۳/۳۱
ali ghaleb

نظرات (۰)

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی