链接: https://codepen.io/oceanstick/pen/KKzjLvO
现在 hover 的时候如下:
目标: div里的内容是不固定的。希望这两条线,是div对角线位置,而不是固定的 45度?
<div class="siteType5">
<a>
阿达撒旦法地方阿达撒旦法地方阿达撒旦法地方<br>
阿达撒旦法地方
</a>
</div>
/*scss*/
.siteType5 {
top:200px;
position:absolute;
z-index: 1;
a {
padding: 9px 5px;
color: #000;
font-weight: 700;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
display: block;
}
a::before,
a::after {
position: absolute;
width: 100%;
left: 0;
height: 2px;
background: #b4770d;
content: '';
z-index: -1;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s, top 0.2s, bottom 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s, top 0.2s, bottom 0.2s;
transition: transform 0.3s, opacity 0.3s, top 0.2s, bottom 0.2s;
pointer-events: none;
}
a::before {
top: 0;
}
a::after {
bottom: 0;
}
a:hover,
a:focus {
color: #000;
}
a:hover::before,
a:hover::after,
a:focus::before,
a:focus::after {
opacity: 0.7;
}
a:hover::before,
a:focus::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
}
a:hover::after,
a:focus::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 50%;
}
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…