広告の表示やバナーの表示などに使いやすい画像が自動でくるくる回るスライドです。
<div class="cp_cssslider">
<div class="cp_slidewrapper">
<div class="cp_slide_item"><img src="img1.jpg"></div>
<div class="cp_slide_item"><img src="img2.jpg"></div>
<div class="cp_slide_item"><img src="img3.jpg"></div>
<div class="cp_slide_item"><img src="img4.jpg"></div>
<div class="cp_slide_item"><img src="img5.jpg"></div>
</div>
</div>.cp_cssslider {
width: 300px;
height: 200px;
overflow: hidden;
margin: 2em auto;
border: 10px solid #ffffff;
box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);
}
.cp_slide_item {
width: 300px;
height: 200px;
float: left;
position: relative;
}
.cp_slidewrapper {
width: 500%;/* slideの枚数×100% */
position: relative;
left: 0;
animation: slider 20s infinite ease;/* スピード */
}
@-webkit-keyframes slider {
/* 100%を枚数で割った%に割り振る */
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
40% {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
}
60% {
-webkit-transform: translateX(-900px);
transform: translateX(-900px);
}
80% {
-webkit-transform: translateX(-1200px);
transform: translateX(-1200px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slider {
/* 100%を枚数で割った%に割り振る */
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
40% {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
}
60% {
-webkit-transform: translateX(-900px);
transform: translateX(-900px);
}
80% {
-webkit-transform: translateX(-1200px);
transform: translateX(-1200px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info