I Love
<div class="cp_anime15">
<p>I Love</p>
<div class="scroller">
<div class="inner">
<span>Animal</span>
<span>Cat</span>
<span>Dog</span>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One');
.cp_anime15 {
font-family: 'Alfa Slab One', cursive;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: left;
}
.cp_anime15 p {
float: left;
color: #222222;
}
.cp_anime15 .scroller {
line-height: 1.5em;
float: left;
overflow: hidden;
height: 1.5em;
margin: 1em 0 0 7px;
}
.cp_anime15 .scroller span {
display: block;
color: #222222;
}
.cp_anime15 .scroller .inner {
-webkit-animation: anime15_scroll 5s infinite ease-out;
animation: anime15_scroll 5s infinite ease-out;
}
.cp_anime15 .scroller .inner::after {
position: absolute;
top: 1em;
left: 8em;
content: '65';
color: #b10d0d;
}
@-webkit-keyframes anime15_scroll {
15% { margin-top: 0px; }
30% { margin-top: 0px; }
45% { margin-top: -1.5em; }
60% { margin-top: -1.5em; }
75% { margin-top: -3em; }
90% { margin-top: -3em; }
100% { margin-top: 0px; }
}
@keyframes anime15_scroll {
15% { margin-top: 0px; }
30% { margin-top: 0px; }
45% { margin-top: -1.5em; }
60% { margin-top: -1.5em; }
75% { margin-top: -3em; }
90% { margin-top: -3em; }
100% { margin-top: 0px; }
}
CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info