<div class="cp_cont">
<div class="cp_anime14">
<div class="text1">En duva satt pa en gren och funderade pa tillvaron</div>
<div class="text2">directed by</div>
<div class="text3">Roy Andersson</div>
<div class="text2">Produce by</div>
<div class="text3">Pernilla Sandstrom</div>
<div class="text2">・<br />・<br />・</div>
</div>
</div>
.cp_cont {
text-align: center;
overflow: hidden;
position: relative;
margin: 2em auto;
width: 100%;
height: 340px;
background:#eeeeee;
}
.cp_anime14 {
position: relative;
top: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-animation: anime14_text 60s linear infinite;
animation: anime14_text 60s linear infinite;
text-align: center;
color: #616161;
}
.cp_anime14 .text1 {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 50px;
}
.cp_anime14 .text2 {
font-size: 1em;
margin-bottom: 5px;
}
.cp_anime14 .text3 {
font-size: 1.4em;
margin-bottom: 50px;
}
@-webkit-keyframes anime14_text {
0% { top: 100%; }
100% { top: -200%; }
}
@keyframes anime14_text {
0% { top: 100%; }
100% { top: -200%; }
}
CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info