スクロールを促す時などに使える大きめの矢印。
css animationで上から下へ入れ替わるように動く矢印です。
<div class="cp_arrows">
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
</div>.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_arrows {
position: relative;
display: flex;
height: 300px;
margin: 2em auto;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrow {
position: absolute;
left: 50%;
width: 60px;
height: 10px;
-webkit-transform: scale(0.3);
transform: scale(0.3);
-webkit-animation: arrow-move07 3s ease-out infinite;
animation: arrow-move07 3s ease-out infinite;
opacity: 0;
}
.cp_arrows .cp_arrow:first-child {
-webkit-animation: arrow-move07 3s ease-out 1s infinite;
animation: arrow-move07 3s ease-out 1s infinite;
}
.cp_arrows .cp_arrow:nth-child(2) {
-webkit-animation: arrow-move07 3s ease-out 2s infinite;
animation: arrow-move07 3s ease-out 2s infinite;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
position: absolute;
top: 0;
width: 50%;
height: 100%;
content: '';
border-radius: 2px;
background: #2196f3;
}
.cp_arrows .cp_arrow:before {
left: 1px;
-webkit-transform: skewY(30deg);
transform: skewY(30deg);
}
.cp_arrows .cp_arrow:after {
right: 1px;
width: 50%;
-webkit-transform: skewY(-30deg);
transform: skewY(-30deg);
}
@-webkit-keyframes arrow-move07 {
25% {
opacity: 0.6;
}
43.75% {
-webkit-transform: translateY(1em);
transform: translateY(1em);
opacity: 0.8;
}
62.5% {
-webkit-transform: translateY(2em);
transform: translateY(2em);
opacity: 1;
}
100% {
-webkit-transform: translateY(3em) scale(0.5);
transform: translateY(3em) scale(0.5);
opacity: 0;
}
}
@keyframes arrow-move07 {
25% {
opacity: 0.6;
}
43.75% {
-webkit-transform: translateY(1em);
transform: translateY(1em);
opacity: 0.8;
}
62.5% {
-webkit-transform: translateY(2em);
transform: translateY(2em);
opacity: 1;
}
100% {
-webkit-transform: translateY(3em) scale(0.5);
transform: translateY(3em) scale(0.5);
opacity: 0;
}
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info