グラデーションで色が変わる矢印アニメーションです。注目させたいテキストなどのアイコンに使えるかもです。
<div class="cp_anime12">
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
<div class="cp_circle"></div>
</div>
.cp_anime12 {
line-height: 19px;
position: absolute;
top: 40%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.cp_anime12 .cp_circle {
position: absolute;
width: 10px;
height: 10px;
-webkit-animation: anime12_color 2s linear infinite;
animation: anime12_color 2s linear infinite;
border-radius: 10px;
background-color: #3fc380;
}
.cp_anime12 .cp_circle:nth-child(1) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.cp_anime12 .cp_circle:nth-child(2) {
-webkit-transform: translate(18px, 13px);
transform: translate(18px, 13px);
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.cp_anime12 .cp_circle:nth-child(3) {
-webkit-transform: translate(35px, 25px);
transform: translate(35px, 25px);
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.cp_anime12 .cp_circle:nth-child(4) {
-webkit-transform: translate(18px, 38px);
transform: translate(18px, 38px);
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.cp_anime12 .cp_circle:nth-child(5) {
-webkit-transform: translate(0px, 50px);
transform: translate(0px, 50px);
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.cp_anime12 .cp_circle:nth-child(6) {
-webkit-transform: translate(0, 25px);
transform: translate(0, 25px);
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.cp_anime12 .cp_circle:nth-child(7) {
-webkit-transform: translate(-20px, 25px);
transform: translate(-20px, 25px);
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.cp_anime12 .cp_circle:nth-child(8) {
-webkit-transform: translate(-40px, 25px);
transform: translate(-40px, 25px);
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.cp_anime12 .cp_circle:nth-child(9) {
-webkit-transform: translate(-60px, 25px);
transform: translate(-60px, 25px);
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.cp_anime12 .cp_circle:nth-child(10) {
-webkit-transform: translate(-80px, 25px);
transform: translate(-80px, 25px);
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
@-webkit-keyframes anime12_color {
0%,100% { background-color: #3fc380; }
50% { background-color: #ffffff; }
}
@keyframes anime12_color {
0%,100% { background-color: #3fc380; }
50% { background-color: #ffffff; }
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info