Scribd Logo
Hochladen

Willkommen bei Scribd!

  • (Pure CSS3 Image Slider For Blogspot ( (Cycle Style) ) )

    Hochgeladen von

    shujaat ali
    32 Ansichten5 Seiten
    [Pure CSS3 Image Slider for Blogspot {(Cycle Style)}]

    Originaltitel

    [Pure CSS3 Image Slider for Blogspot {(Cycle Style)}]

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    TXT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    [Pure CSS3 Image Slider for Blogspot {(Cycle Style)}]

    Copyright:

    © All Rights Reserved
    Als TXT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    32 Ansichten5 Seiten

    (Pure CSS3 Image Slider For Blogspot ( (Cycle Style) ) )

    Hochgeladen von

    shujaat ali
    [Pure CSS3 Image Slider for Blogspot {(Cycle Style)}]

    Copyright:

    © All Rights Reserved
    Als TXT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 5

    <style type="text/css" media="screen">

    .container {
    margin: 0 auto;
    overflow: hidden;
    width: 700px;
    }
    #content-slider {
    height: 335px;
    width: 100%;
    }
    #slider {
    background: none repeat scroll 0 0 #000000;
    border: 5px solid #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    height: 320px;
    margin: 10px auto;
    overflow: visible;
    position: relative;
    width: 680px;
    }
    #mask {
    height: 320px;
    overflow: hidden;
    }
    #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;
    }
    /* 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;
    }
    /* ANIMATION */
    @-moz-keyframes cycle {
    0% { top:0px; }
    4% { top:0px; }
    16% { top:0px; opacity:1; z-index:0; }
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }
    }
    @-moz-keyframes cycletwo {
    0% { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; }
    36% { top:0px; opacity:1; z-index:0; }
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-moz-keyframes cyclethree {
    0% { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; }

    56% {
    60% {
    61% {
    100%{

    top:0px; opacity:1; }
    top:325px; opacity:0; z-index:0; }
    top:-325px; opacity:0; z-index:-1; }
    top:-325px; opacity:0; z-index:-1; }

    }
    @-moz-keyframes cyclefour {
    0% { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
    }
    @-moz-keyframes cyclefive {
    0% { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
    }
    @-webkit-keyframes cycle {
    0% { top:0px; }
    4% { top:0px; }
    16% { top:0px; opacity:1; z-index:0; }
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    50% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }
    }
    @-webkit-keyframes cycletwo {
    0% { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; }
    36% { top:0px; opacity:1; z-index:0; }
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1;
    100%{ top:-325px; opacity:0; z-index:-1;
    }
    @-webkit-keyframes cyclethree {
    0% { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; }
    56% { top:0px; opacity:1; z-index:0; }
    60% { top:325px; opacity:0; z-index:0; }
    61% { top:-325px; opacity:0; z-index:-1;
    100%{ top:-325px; opacity:0; z-index:-1;
    }
    @-webkit-keyframes cyclefour {
    0% { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }

    }
    }

    }
    }

    64% {
    76% {
    80% {
    81% {
    100%{

    top:0px; opacity:1; }
    top:0px; opacity:1; z-index:0; }
    top:325px; opacity:0; z-index:0; }
    top:-325px; opacity:0; z-index:-1; }
    top:-325px; opacity:0; z-index:-1; }

    }
    @-webkit-keyframes cyclefive {
    0% { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
    }
    /* ANIMATION BAR */
    @-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
    16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
    17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
    18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
    }
    @-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
    16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
    17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
    18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
    }
    </style>
    <div class="container">
    <div id="content-slider">
    <div id="slider">
    <div id="mask">
    <ul>
    <li id="first" class="firstanimation">
    <a href="http://dimpost.com">
    <img src="http://project.dimpost.com/image-slider/images/img_1.jpg"
    alt="Cougar"/>
    </a>
    <div class="tooltip">
    <h1>Cougar</h1>
    </div>
    </li>
    <li id="second" class="secondanimation">
    <a href="#">
    <img src="http://project.dimpost.com/image-slider/images/img_2.jpg"
    alt="Lions"/>
    </a>
    <div class="tooltip">
    <h1>Lions</h1>
    </div>
    </li>
    <li id="third" class="thirdanimation">
    <a href="#">
    <img src="http://project.dimpost.com/image-slider/images/img_3.jpg"

    alt="Snowalker"/>
    </a>
    <div class="tooltip">
    <h1>Snowalker</h1>
    </div>
    </li>
    <li id="fourth" class="fourthanimation">
    <a href="#">
    <img src="http://project.dimpost.com/image-slider/images/img_4.jpg"
    alt="Howling"/>
    </a>
    <div class="tooltip">
    <h1>Howling</h1>
    </div>
    </li>
    <li id="fifth" class="fifthanimation">
    <a href="#">
    <img src="http://project.dimpost.com/image-slider/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>

    Das könnte Ihnen auch gefallen