我如何向右侧缩小线路?

问题描述 投票:0回答:1

body { margin: 0; background: black; } .white-line { position: absolute; top: 50%; left: 50%; width: 5px; height: 10px; background-color: red; transform: translate(-50%, -50%); animation: expandLine 0.3s ease-in-out forwards 1.2s, moveUp 1.5s ease-in-out forwards 1.41s, contractLine 0.5s ease-in-out forwards 3.3s; z-index: 1000; } @keyframes expandLine { 100% {width: 100%; opacity: 1;} } @keyframes moveUp { 100% {top: 0%;} } @keyframes contractLine { 100% {width: 0;} }

<div class="white-line"></div>


    

它向中心缩小的原因是因为那是线路位置的位置。因此,在缩小宽度时,您需要同时将线路的位置移至右侧,或者

left: 50%
css css-animations
1个回答
0
投票
在您的

left: 100%

动画中,添加声明
contractLine

left: 100%
body {
  margin: 0;
  background: black;
}

.white-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 10px;
  background-color: red;
  transform: translate(-50%, -50%);
  animation: expandLine 0.3s ease-in-out forwards 1.2s, moveUp 1.5s ease-in-out forwards 1.41s, contractLine 0.5s ease-in-out forwards 3.3s;
  z-index: 1000;
}    

@keyframes expandLine {
  100% {width: 100%; opacity: 1;}
}

@keyframes moveUp {
  100% {top: 0%; transform: translate(-50%, 0);}
}

@keyframes contractLine {
  100% {width: 0; left: 100%;}
}

I还在
<div class="white-line"></div>
动画中添加了
transform: translate(-50%, 0)
,该动画可防止一半的生产线在页面顶部消失。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.