<div class="cp_arrows">
<a class="link cp_arrow" href="#">リンクテキスト
<svg class="arrow_icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<g fill="none" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
<circle class="arrow_icon_circle" cx="16" cy="16" r="15.12"></circle>
<path d="M22.364 14.55L17 19.914V8h-2v11.914L9.636 14.55l-1.414 1.414L16 23.742l7.778-7.778z"/>
</g>
</svg>
</a>
</div>
.cp_arrows {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cp_arrows .link {
text-decoration: none;
color: #039be5;
}
.cp_arrows .cp_arrow .arrow_icon {
position: relative;
vertical-align: middle;
transition: transform 0.3s ease;/*hoverで右に5pxスライド*/
}
.cp_arrows .cp_arrow:hover .arrow_icon {
transform: translateX(5px);/*右に5px移動*/
}
.cp_arrows .cp_arrow .arrow_icon_circle {
transition: stroke-dashoffset 0.3s ease;/*hoverでstroke-dashoffsetを100から0にする*/
stroke-dasharray: 100px;/*破線の間隔*/
stroke-dashoffset: 100px;/*pathが始まる場所*/
}
.cp_arrows .cp_arrow:hover .arrow_icon_circle {
stroke-dashoffset: 0px;/*pathが始まる場所*/
}
.cp_arrow path {
fill: #039BE5;
}
.cp_arrow circle {
stroke:#039BE5;
}
<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 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrowcontainer {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow {
top: 50%;/*hoverで全てを真ん中に集める*/
}
.cp_arrows .cp_arrow {
position: absolute;
left: 50%;
transition: all 0.3s ease-in-out;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
position: absolute;
content: '';
display: block;
width: 4px;/*矢印の高さ*/
height: 50px;/*矢印の横幅*/
background: #FF5722;/*矢印の色*/
border-radius: 10px;
transform: translate(-50%, -50%) rotate(-65deg);/*左側の位置と角度*/
transform-origin: bottom right;/*transformの基点*/
transition: all 0.3s ease-in-out;
}
.cp_arrows .cp_arrow:after {
transform: translate(-50%, -50%) rotate(65deg);/*右側の位置と角度*/
transform-origin: bottom left;/*transformの基点*/
}
.cp_arrows .cp_arrow:nth-child(1) {/*1つ目の矢印の位置と透明度*/
top: 30%;
opacity: 0.3;
}
.cp_arrows .cp_arrow:nth-child(2) {/*2つ目の矢印の位置と透明度*/
top: 50%;
opacity: 0.6;
}
.cp_arrows .cp_arrow:nth-child(3) {/*3つ目の矢印の位置と透明度*/
top: 70%;
opacity: 1;
}
<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 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrowcontainer {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow {
top: 50%;/*hoverで全てを真ん中に集める*/
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow:before {
transform: translate(-50%, -50%) rotate(-45deg);/*hoverで全てを真ん中に集め角度を鋭角に*/
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow:after {
transform: translate(-50%, -50%) rotate(45deg);/*hoverで全てを真ん中に集め角度を鋭角に*/
}
.cp_arrows .cp_arrow {
position: absolute;
left: 50%;
transition: all 0.3s ease-in;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
position: absolute;
content: '';
display: block;
width: 4px;/*矢印の高さ*/
height: 50px;/*矢印の横幅*/
background: #009688;
border-radius: 10px;/*矢印の色*/
transform: translate(-50%, -50%) rotate(-60deg);;/*左側の位置と角度*/
transform-origin: bottom right;/*transformの基点*/
transition: all 0.3s ease-in;
}
.cp_arrows .cp_arrow:after {
transform: translate(-50%, -50%) rotate(60deg);/*右側の位置と角度*/
transform-origin: bottom left;/*transformの基点*/
}
.cp_arrows .cp_arrow:nth-child(1) {/*1つ目の矢印の位置と透明度*/
top: 30%;
opacity: 0.3;
}
.cp_arrows .cp_arrow:nth-child(2) {/*2つ目の矢印の位置と透明度*/
top: 50%;
opacity: 0.6;
}
.cp_arrows .cp_arrow:nth-child(3) {/*3つ目の矢印の位置と透明度*/
top: 70%;
opacity: 1;
}
<div class="cp_arrows">
<div class="cp_round">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
.cp_arrows {
position: relative;
display: flex;
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 {/*基本設定(矢印線1つのみを基準にする)*/
position: absolute;
display: block;
width: 35px;/*矢印線の長さ*/
height: 5px;/*矢印線の太さ*/
background: #42a5f5;/*矢印線の色*/
border-radius: 3px;
transition: 0.4s ease-in;
z-index: 999;
}
.cp_arrows span:first-child {/*1つ目の矢印線の位置と角度(左下の矢印線)*/
bottom: 30%;
left: 18%;
transform: rotate(30deg);
}
.cp_arrows span:nth-child(2) {/*2つ目の矢印線の位置と角度(右下の矢印線)*/
bottom: 30%;
left: 47%;
transform: rotate(-30deg);
}
.cp_arrows span:nth-child(3) {/*3つ目の矢印線の位置と角度(左上の矢印線)*/
bottom: 55%;
left: 18%;
transform: rotate(30deg);
}
.cp_arrows span:nth-child(4) {/*4つ目の矢印線の位置と角度(右上の矢印線)*/
bottom: 55%;
left: 47%;
transform: rotate(-30deg);
}
/*矢印hover時の設定*/
.cp_arrows .cp_round:hover span:nth-child(1) {/*1つ目の矢印線の角度(左下の矢印線)*/
transform: rotate(-155deg);
}
.cp_arrows .cp_round:hover span:nth-child(2) {/*2つ目の矢印線の角度(右下の矢印線)*/
transform: rotate(155deg);
}
.cp_arrows .cp_round:hover span:nth-child(3) {/*3つ目の矢印線の角度(左上の矢印線)*/
transform: rotate(205deg);
}
.cp_arrows .cp_round:hover span:nth-child(4) {/*4つ目の矢印線の角度(右上の矢印線)*/
transform: rotate(-205deg);
}