スクロールを促す時などに使える大きめの矢印。
css animationでふわふわと上下に動く矢印です。
ついでにHOVERで矢印が一回転します。
<div class="cp_arrows">
<a href="#" class="cp_arrow"></a>
</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;
text-align: center;
}
.cp_arrows .cp_arrow {
position: relative;
display: inline-block;
padding-top: 1.8em;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-animation: arrow-move06 2s 1s ease-in-out infinite;
animation: arrow-move06 2s 1s ease-in-out infinite;
text-decoration: none;
color: #26c6da;
border-color: #26c6da;
}
.cp_arrows .cp_arrow:before {
font-size: 2em;
line-height: 1.9em;
position: absolute;
top: 0;
left: 50%;
width: 2em;
height: 2em;
margin-left: -0.7em;
content: '▼';
-webkit-transition: transform 0.5s ease-in;
transition: transform 0.5s ease-in;
text-align: center;
border: 0.13em solid #ffffff;
border-color: inherit;
border-radius: 10em;
}
.cp_arrows .cp_arrow:hover {
color: #ec407a;
border-color: #ec407a;
}
.cp_arrows .cp_arrow:hover:before {
transform: rotate(360deg);
}
@-webkit-keyframes arrow-move06 {
0% {
top: 1%;
opacity: 0.1;
}
70% {
top: 5%;
opacity: 1;
}
100% {
top: 1%;
opacity: 0.3;
}
}
@keyframes arrow-move06 {
0% {
top: 1%;
opacity: 0.1;
}
70% {
top: 5%;
opacity: 1;
}
100% {
top: 1%;
opacity: 0.3;
}
}
CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info