スクロールを促す時などに使える大きめの矢印。
HOVERで三つの矢印が一つにまとまりながらキュッと縮まるアクションを備えています。
<div class="cp_arrows">
<a href="#" class="cp_arrowcontainer">
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
<div class="cp_arrow"></div>
</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;
}
.cp_arrows .cp_arrowcontainer {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
transform: translate(-50%, -50%) rotateZ(0deg);
}
.cp_arrows .cp_arrowcontainer:hover {
cursor: pointer;
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow {
top: 50%;
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow:before {
-webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
transform: translate(-50%, -50%) rotateZ(-45deg);
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow:after {
-webkit-transform: translate(-50%, -50%) rotateZ(45deg);
transform: translate(-50%, -50%) rotateZ(45deg);
}
.cp_arrows .cp_arrow {
position: absolute;
left: 50%;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
position: absolute;
display: block;
width: 4px;
height: 50px;
content: '';
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform: translate(-50%, -50%) rotateZ(-60deg);
transform: translate(-50%, -50%) rotateZ(-60deg);
transform-origin: bottom right;
border-radius: 10px;
background: #009688;
}
.cp_arrows .cp_arrow:after {
-webkit-transform: translate(-50%, -50%) rotateZ(60deg);
transform: translate(-50%, -50%) rotateZ(60deg);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.cp_arrows .cp_arrow:nth-child(1) {
top: 30%;
opacity: 0.3;
}
.cp_arrows .cp_arrow:nth-child(2) {
top: 50%;
opacity: 0.6;
}
.cp_arrows .cp_arrow:nth-child(3) {
top: 70%;
opacity: 1;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info