我是CSS动画的新手,我正在尝试实现CSS椭圆曲线点滑块,但结果令人满意,问题是效果从屏幕的右侧执行,我希望从屏幕的右侧执行在屏幕的左侧,当我单击该点时,图片必须从屏幕的左侧而不是从右侧看到,这是我的代码:
<div class="container">
<div class="wrapper">
<div class="image">
<img class="first active" src="bbt-rosa.png">
<img src="bbt-verde.png">
<img class="last" src="bbt-viola.png">
</div>
<div class="direct-link-container">
<div class="direct-link-wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</div>
.container {
position: relative;
width: 100vw;
height: 100vh;
.wrapper {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.image {
img {
width: 150px;
height: 250px;
display: none;
margin-bottom: 50px;
}
.active {
display: block;
width: 5.7%;
position: absolute;
top: -5%;
left: 47%;
animation: circle 1s;
transform-origin: 0px 700px;
animation-fill-mode: forwards;
animation-direction: alternate;
}
}
.direct-link-container {
.direct-link-wrapper {
display: flex;
justify-content: space-between;
.circle {
height: 20px;
width: 20px;
border: 2px solid black;
border-radius: 50%;
margin: 5px;
&:after {
content: '';
display: block;
height: 2px;
width: 2px;
border: 2px solid black;
border-radius: 50%;
margin: 5px;
}
}
}
}
}
}
@keyframes circle {
0% {
transform: translate(500px,-250px) scaleX(0.10) scaleY(0.10) ;
} 100% {
transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ;
}
}
有人可以帮助我理解吗?