我得到了一个 css 动画箭头,它从左指向右,它按预期工作 - 动画也工作正常。我正在尝试更改该箭头的方向,使其从右向左指向。我尝试更改之前和之后的元素,但这似乎并没有改变箭头的方向?
body {
background: black;
}
.the-arrow {
width: 64px;
transition: all 0.2s;
}
.the-arrow.-left {
position: absolute;
top: 60%;
left: 0;
}
.the-arrow.-left .shaft {
width: 0;
background-color: #999;
}
.the-arrow.-left .shaft:before,
.the-arrow.-left .shaft:after {
width: 0;
background-color: #999;
}
.the-arrow.-left .shaft:before {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.the-arrow.-left .shaft:after {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.the-arrow.-right {
top: 3px;
}
.the-arrow.-right .shaft {
width: 64px;
transition-delay: 0.2s;
}
.the-arrow.-right .shaft:before,
.the-arrow.-right>.shaft:after {
width: 8px;
transition-delay: 0.3s;
transition: all 0.5s;
}
.the-arrow.-right .shaft:before {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.the-arrow.-right .shaft:after {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.the-arrow .shaft {
background-color: #fff;
display: block;
height: 1px;
position: relative;
transition: all 0.2s;
transition-delay: 0;
will-change: transform;
}
.the-arrow .shaft:before,
.the-arrow .shaft:after {
background-color: #fff;
content: '';
display: block;
height: 1px;
position: absolute;
top: 0;
right: 0;
transition: all 0.2s;
transition-delay: 0;
}
.the-arrow .shaft:before {
-webkit-transform-origin: top right;
transform-origin: top right;
}
.the-arrow .shaft:after {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.animated-arrow {
display: inline-block;
color: #fff;
font-size: 12px;
text-decoration: none;
position: relative;
transition: all 0.2s;
}
.animated-arrow:hover {
color: #eaeaea;
}
.animated-arrow:hover .the-arrow.-left .shaft {
width: 64px;
transition-delay: 0.1s;
background-color: #eaeaea;
}
.animated-arrow:hover .the-arrow.-left .shaft:before,
.animated-arrow:hover .the-arrow.-left .shaft:after {
width: 8px;
transition-delay: 0.1s;
background-color: #eaeaea;
}
.animated-arrow:hover .the-arrow.-left .shaft:before {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.animated-arrow:hover .the-arrow.-left .shaft:after {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.animated-arrow:hover .main {
-webkit-transform: translateX(80px);
transform: translateX(80px);
}
.animated-arrow:hover .main .the-arrow.-right .shaft {
width: 0;
-webkit-transform: translateX(200%);
transform: translateX(200%);
transition-delay: 0;
}
.animated-arrow:hover .main .the-arrow.-right .shaft:before,
.animated-arrow:hover .main .the-arrow.-right .shaft:after {
width: 0;
transition-delay: 0;
transition: all 0.1s;
}
.animated-arrow:hover .main .the-arrow.-right .shaft:before {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.animated-arrow:hover .main .the-arrow.-right .shaft:after {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.animated-arrow .main {
display: flex;
align-items: center;
transition: all 0.2s;
}
.animated-arrow .main .text {
margin: 0 16px 0 0;
line-height: 1;
font-family: 'Montserrat';
text-transform: uppercase;
}
.animated-arrow .main .the-arrow {
position: relative;
}
<div class="pivot-arrows-1" style="">
<a class="animated-arrow arrow-c-f" href="#">
<span class="the-arrow -left">
<span class="shaft"></span>
</span>
<span class="main">
<span class="text">
Link Text
</span>
<span class="the-arrow -right">
<span class="shaft"></span>
</span>
</span>
</a>
</div>
最佳答案
我不明白你想旋转哪一个,但你可以对整个元素应用旋转
.the-arrow.-left {
transform: rotate(180deg);
}
.the-arrow.-right {
transform: rotate(180deg);
}
如果你想一般旋转箭头
.the-arrow {
transform: rotate(180deg);
}
关于html - 改变CSS箭头的方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58012710/