Question

1-我尝试通过将容器（位置：固定）宽度从100％设置为0％来使图像消失，但是从右边开始，我想让它从左边开始。我尝试了很多东西 - 比如改变页面方向或者设置正确的div：0px;而不是左：0px; - 但它没有用。我怎么能这样做？

2-我希望div在宽度缩小的同时具有圆形，我使用

"size": 1

要实现这一目标，但在动画结束时它不会采用圆形。让它保持一个圆圈的好方法是什么？

＆＃13;

border-bottom-right-radius: 500px;
border-top-right-radius: 500px;

＆＃13;

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

＆＃13;

.sick {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  z-index: 999;
  background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat;
  border-bottom-right-radius: 500px;
  border-top-right-radius: 500px;
}

@keyframes move3 {
  0% {
    width: 100%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
  100% {
    width: 0%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
}

.explain {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  text-align: center;
}

＆＃13;

https://jsfiddle.net/kalidzakaria/xzs1r9qp/

Answer 1

您需要设置边距和宽度的动画以获得我认为您想要的效果。

＆＃13;

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

＆＃13;

.sick {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  z-index: 999;
  background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat;
  border-bottom-left-radius: 500px;
  border-top-left-radius: 500px;
}

@keyframes move3 {
  0% {
    margin-left: 0%;
    width: 100%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
  100% {
    margin-left: 100%;
    width: 0%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
}

.explain {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  text-align: center;
}

＆＃13;

<div class="sick">

</div>
<div class="explain">
  <h1>Site Here</h1>
  <h2>Concept</h2>
</div>

＆＃13;

Answer 2

为private void Application_Startup(object sender, StartupEventArgs e) { try { //Call again ReadValueFromXML method but call it only once and use static variables multiple times Globals.PathToFolder = Globals.ReadValueFromXML("answeraddress"); } }属性设置动画：

＆＃13;

left

＆＃13;

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

＆＃13;

.sick {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 999;
  background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat;
  border-bottom-left-radius: 500px;
  border-top-left-radius: 500px;
}

@keyframes move3 {
  0% {
    left: 0%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
  100% {
    left: 100%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
  }
}

.explain {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  text-align: center;
}

＆＃13;

Answer 3

坐标始终从左上角开始。

使用关键帧，我们可以将图像的坐标向右移动，速度与宽度变小相同。

您已使用border-bottom-right-radius＆amp; amp; border-top-right-radius，我刚刚将'right'改为'left'。

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";"move3 3s linear forwards";

.sick {
  position: fixed;
  overflow: hidden;
  top: 0%;
  left: 0%;
  width: 150%;
  height: 100%;
  z-index: 999;
  background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat;
  border-bottom-left-radius: 500px;
  border-top-left-radius: 500px;
}
@keyframes move3 {
  0% {
    width: 100%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
    left: 0%;
  }
  100% {
    width: 0%;
    /* Firefox 16+, IE 10+, Opera */
    height: 100%;
    left: 100%;
  }
}
.explain {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  text-align: center;
}

<div class="sick">

</div>
<div class="explain">
  <h1>Site Here</h1>
  <h2>Concept</h2>
</div>

如何让宽度从左边开始缩小而不是右边？

3 个答案: