<div class="cp_anime13">
<div class="cp_first"></div>
<div class="cp_second"></div>
<div class="cp_second"></div>
<div class="cp_third"></div>
</div>.cp_anime13 {
position: relative;
z-index: 1;
}
.cp_anime13,
.cp_anime13 .cp_first,
.cp_anime13 .cp_second,
.cp_anime13 .cp_third {
width: 100%;
height: 100vh;
}
.cp_anime13 .cp_first,
.cp_anime13 .cp_second,
.cp_anime13 .cp_third {
position: absolute;
}
.cp_anime13 .cp_second,
.cp_anime13 .cp_third {
opacity: 0;
}
.cp_anime13 .cp_first {
z-index: 10;
animation: anime13_first 10s infinite;
background: linear-gradient(#e6ee9c, #a5d6a7);
}
@-webkit-keyframes anime13_first {
0% { opacity: 1.0; }
10% { opacity: 0.8; }
20% { opacity: 0.6; }
30% { opacity: 0.4; }
40% { opacity: 0.2; }
50% { opacity: 0.1; }
60% { opacity: 0.2; }
70% { opacity: 0.4; }
80% { opacity: 0.6; }
90% { opacity: 0.8; }
100% { opacity: 1.0; }
}
@keyframes anime13_first {
0% { opacity: 1.0; }
10% { opacity: 0.8; }
20% { opacity: 0.6; }
30% { opacity: 0.4; }
40% { opacity: 0.2; }
50% { opacity: 0.1; }
60% { opacity: 0.2; }
70% { opacity: 0.4; }
80% { opacity: 0.6; }
90% { opacity: 0.8; }
100% { opacity: 1.0; }
}
.cp_anime13 .cp_second {
z-index: 20;
animation: anime13_second 10s infinite; animation-delay: 2s;
background: linear-gradient(#80deea, #90caf9);
}
@-webkit-keyframes anime13_second {
0% { opacity: 0; }
10% { opacity: 0.2; }
20% { opacity: 0.4; }
30% { opacity: 0.6; }
40% { opacity: 0.8; }
50% { opacity: 1.0; }
60% { opacity: 0.8; }
70% { opacity: 0.6; }
80% { opacity: 0.4; }
90% { opacity: 0.2; }
100% { opacity: 0; }
}
@keyframes anime13_second {
0% { opacity: 0; }
10% { opacity: 0.2; }
20% { opacity: 0.4; }
30% { opacity: 0.6; }
40% { opacity: 0.8; }
50% { opacity: 1.0; }
60% { opacity: 0.8; }
70% { opacity: 0.6; }
80% { opacity: 0.4; }
90% { opacity: 0.2; }
100% { opacity: 0; }
}
.cp_anime13 .cp_third {
z-index: 30;
animation: anime13_third 10s infinite;
animation-delay: 8s;
background: linear-gradient(#b39ddb, #f48fb1);
}
@-webkit-keyframes anime13_third {
0% { opacity: 0; }
10% { opacity: 0.2; }
20% { opacity: 0.4; }
30% { opacity: 0.6; }
40% { opacity: 0.8; }
50% { opacity: 1.0; }
60% { opacity: 0.8; }
70% { opacity: 0.6; }
80% { opacity: 0.4; }
90% { opacity: 0.2; }
100% { opacity: 0; }
}
@keyframes anime13_third {
0% { opacity: 0; }
10% { opacity: 0.2; }
20% { opacity: 0.4; }
30% { opacity: 0.6; }
40% { opacity: 0.8; }
50% { opacity: 1.0; }
60% { opacity: 0.8; }
70% { opacity: 0.6; }
80% { opacity: 0.4; }
90% { opacity: 0.2; }
100% { opacity: 0; }
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info