Pure CSS3 Content Slider

Let's go editting your awesome blogger ~~

1. Login ke Blog,Rancangan Edit HTML
2. Cari kode ]]></b:skin> Letakkan kode di bawah ini diaatas kode ]]></b:skin>

#slider {
width: 600px;
height: 200px;
position: relative;
margin: 0px auto 0;
background-color:
#2C0036;
border: 10px solid
#2C0036;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transition: all 250ms ease-in;
-webkit-transition: all 250ms ease-in;
-o-transition: all 250ms ease-in;
border-top: 10px solid
rgba(0, 0, 0, 0.2);
}
#slider:hover {
background-color:#fff;
border:10px solid #fff;
-webkit-animation:rotatey 400ms ease-out;
-moz-animation:rotatey 400ms ease-out;
}
#slider:hover #pause {
opacity:1;
}
#slider:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#mask {
overflow:hidden;
}
#pause {
width:600px;
height:200px;
position:absolute;
top:0;
opacity:0;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIVB5Fb4Ik4Usn4_t_uV4XROEf5XvDmTyrEb4M6luAKQ5S2xOnDAhgHCcZhKYQ1kTeNZ6Ju0KTSw3tAb8Ew5_AYKupmbFmR5lMJw1IUAnZ9enWtzf9-LBYDHltNGvNnxfx_aKloeufkpk/s1600/paused.png);
background-position:566px 10px;
background-repeat:no-repeat;
pointer-events:none;
-moz-transition:all 150ms ease-in;
-webkit-transition:all 150ms ease-in;
-o-transition:all 150ms ease-in;
}
#progress {
width:1px;
height:3px;
position:relative;
top:-1px;
background-color:#BCEB04;
-moz-transition:all 150ms linear;
-webkit-transition:all 150ms linear;
-o-transition:all 150ms linear;
-moz-animation:progress 18s infinite;
-webkit-animation:progress 18s infinite;
}
#overlay {
width:600px;
height:200px;
position:absolute;
top:0;
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
opacity:0.5;
-moz-animation:overlay-fade 18s infinite;
}
#slider ul {
width:2400px;
position:relative;
left:0px;
margin:0;
padding:0;
list-style:none;
-moz-animation:slide-animation 18s infinite;
-webkit-animation:slide-animation 18s infinite;
}
#slider li {
width:600px;
height:200px;
position:relative;
display:inline;
float:left;
margin:0;
padding:0;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirY8_zin1GtmyaQ_RhpsHbMTw_4rHZSNAELOh3iyn4q18DmHiRFJyLH80jtprsHi9P7nTSMeI7pEh6Uao8eCMDUcL5CNS6q0ll20BQo1IUzm1LNinhSCHejo9A1bC4jGg_75-i_zZLjzE/s1600/loader.gif");
background-position:50% 50%;
background-repeat:no-repeat;
}
#slider li span {
display:block;
width:560px;
position:absolute;
bottom:0;
left:0;
padding:15px 20px;
pointer-events:none;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
}
#slider ul li span h2 {
font-size:20px;
line-height:30px;
font-weight:normal;
color:#fff;
text-shadow:1px 1px 1px #362c30;
}
#slider ul li span p {
font-size:14px;
line-height:20px;
font-weight:normal;
color:#fff;
text-shadow:1px 1px 1px #362c30;
}
#slider-shadow {
width: 620px;
height: 230px;
margin: 0px auto 0;
float: left;
}
@-webkit-keyframes slide-animation {
0% {opacity:1;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:1;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:1;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:1;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:1;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:1;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:1;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:1;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:1;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:1;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:1;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:1;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:1;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:1;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:1;}
100% {width:0px; opacity:1;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:1;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:1;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:1;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:1;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:1;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-webkit-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}
@-moz-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}

3. Letakkan Kode dibawah ini di tempa yg anda inginkan

<div id='slider-shadow'>
<div id='slider'>
<div id='mask'>
<ul>
<li><a href='url1' title='Title1'><img src='url-gambar1'/></a></li>
<li><a href='url2' title='Title2><img src='url-gambar2'/></a></li>
<li><a href='url3' title='Title3'><img src='url-gambar3'/></a></li>
<li><a href='url4' title='Title4'><img src='url-gambar4'/></a></li>
</ul>
</div>
<div id='progress'></div>
<div id='overlay'></div>
<div id='pause'></div>
</div></div>

4. Simpan Template

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email