[パーツ]矢印 HOVERで円の中の矢印がぐるっと回って戻る

CSS HTML
 2018.02.22
 2018.03.19

HOVERで円の中の矢印がぐるっと回って戻る

スクロールを促す時などに使える大きめの矢印。
HOVERで円の中の矢印がぐるっと回って戻るアクションを備えています。

browser:  65 11 20 10 
ニャン易度 
<div class="cp_arrows">
	<div class="cp_round">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	</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_round {
	position: relative;
	width: 100px;
	height: 100px;
	border: 3px solid #42a5f5;
	border-radius: 100%;
	cursor: pointer;
}
.cp_arrows span {
	position: absolute;
	z-index: 999;
	display: block;
	width: 35px;
	height: 5px;
	-webkit-transition: 0.4s ease-in;
	transition: 0.4s ease-in;
	border-radius: 3px;
	background: #42a5f5;
}
.cp_arrows span:first-child {
	bottom: 30%;
	left: 18%;
	transform: rotate(30deg);
}
.cp_arrows span:nth-child(2) {
	bottom: 30%;
	left: 47%;
	transform: rotate(-30deg);
}
.cp_arrows span:nth-child(3) {
	bottom: 55%;
	left: 18%;
	transform: rotate(30deg);
}
.cp_arrows span:nth-child(4) {
	bottom: 55%;
	left: 47%;
	transform: rotate(-30deg);
}
.cp_arrows .cp_round:hover span:nth-child(1) {
	transform: rotate(-155deg);
}
.cp_arrows .cp_round:hover span:nth-child(2) {
	transform: rotate(155deg);
}
.cp_arrows .cp_round:hover span:nth-child(3) {
	transform: rotate(205deg);
}
.cp_arrows .cp_round:hover span:nth-child(4) {
	transform: rotate(-205deg);
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?