我正在尝试实现一个css椭圆曲线点滑块,并且用transform: translateX
得到了令人满意的结果,问题是效果是以线性方式执行的。
我希望它以弯曲的方式执行。
当我单击该点时,图片必须沿椭圆路径滑动,这是我的代码:
.container {
position: relative;
width: 80vw;
height: 100vh;
margin: auto;
.wrapper {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 43.5%;
bottom: 8px;
transform: translateX(-50%);
.image {
width: 50%!important;
height: 550px!important;
img {
width: 20%!important;
height: 100%!important;
}
}
.image:nth-child(1) {
position: relative;
right: 250px;
}
.image:nth-child(2) {
position: relative;
left: 275px;
}
.image:nth-child(3) {
position: relative;
left: 375px;
}
.active {
display: block;
width: 5.7%;
animation: circle 1s;
transform-origin: 0px 700px;
animation-fill-mode: forwards;
animation-direction: alternate;
}
}
.direct-link-container {
.direct-link-wrapper {
position:absolute;
bottom: 0;
display: flex;
.circle {
height: 15px;
width: 15px;
border: 2px solid black;
border-radius: 50%;
margin: 2px;
}
}
}
.footer {
width: 1344px;
img {
width: 100%;
}
}
}
@keyframes circle {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
<div class="container">
<div class="wrapper">
<div class="image first active">
<img src="bbt-rosa.png">
</div>
<div class="image">
<img src="bbt-verde.png">
</div>
<div class="image last">
<img src="bbt-viola.png">
</div>
</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 class="footer">
<img src="footer.png" alt="">
</div>
</div>