Question

我有一个容器，里面包含div。通过点击该div广场，它开始移动并最终在容器外面。

我的问题是这个内部区块在超出边界线时被修剪得非常苛刻。如何使用CSS手段更顺利地完成这种转换？当这个正方形消失对眼睛变得柔和时，我希望得到一个效果。

也许我应该为主要容器使用某种图像蒙版或者为广场使用淡入淡出效果。我不确定如何实现这种行为。

提前谢谢！

＆＃13;

.borderline {
  position: relative;
  text-align: center;
  vertical-align: middle;
  line-height: 150px;
  width: 400px;
  height: 150px;
  overflow: hidden;
}

.square {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: #0087ff;
}

.square:focus {
  transform: translateX(500px);
  transition: all 2s;
}

＆＃13;

<div class='borderline'>
  <div class='square' tabindex="1">Click me</div>
</div>

＆＃13;

Answer 1

也许您可以使用不透明度为您的css添加动画：

.square:focus {
  transform: translateX(500px);
  transition: all 2s;
  animation-name: example;
    animation-duration: 1s;

}
@keyframes example {
    0%   {opacity:1}
    50%   {opacity:1}
    100%   {opacity:0}

}

https://codepen.io/anon/pen/rzppON

如何实现元素在边界线之外的平滑过渡？

1 个答案: