Bild-Slider für Blogspot CSS3

1390 ledoc

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

26 March 2025

Mehrstufiges Formular mit Fortschrittsbalken unter Verwendung von jQuery und CSS3

13 November 2024

3D-CSS-Fotorahmeneffekt für Bilder

22 August 2025

Blogium: HTML-Vorlage für Technologie-, Design- und Life-Blogs

HTML

#content-slider {
    height: 335px;
    width: 100%;
}

#slider {
    background: none repeat scroll 0 0 #000000;
    border: 5px solid #FFFFFF;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
            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 {
    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% {
        top: 0px;
        opacity: 1;
    }
    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        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% {
        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;
    }
}

@-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>

Empfohlen

Mehrstufiges Formular mit Fortschrittsbalken unter Verwendung von jQuery und CSS3

3D-CSS-Fotorahmeneffekt für Bilder

Blogium: HTML-Vorlage für Technologie-, Design- und Life-Blogs

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS