求解这个切换效果如何实现

Question

前几天看到这个登录的切换效果挺好的，想给自己的网站也弄一个，但不知如何实现，有大神能提供一下思路吗？

Answer 1

占坑。表单部分还未实现。背景层的动画未实现。

技术要点是 clip-path animation。如果不用 clip-path，左右移动的时候 “Welcome back” 和右边的 “Hello friends” 的文字层没法被裁剪掉。要是用 absolute + overflow hidden, 相对定义的父容器在动 那退场动画又难以实现。更不用说底下好多层背景也在动。所以 clip-path 是比较好的选择。

demo

Answer 2

这种东西少看为妙，如果你是产品经理发这个给开发，你有八成的几率会被打。

Answer 3

首先你需要设置2层，底下的一层，用来放登录表单。上面一层是有颜色一层。这个层级，你可以设置absolute，并且加z-index来控制实现。
其次，底下那层就是一个方块的移动，并没有特殊的东西，上面有颜色那层，可以看到他是一个移动中带有一种阻尼运动的效果。可以搞两个动画，一个是移动，另一个动画是变化宽度，宽度的这种效果的可以尝试用animation，然后变化的函数的一个贝萨尔曲线，这个需要你自己设置animation-timing-funcation的值。可以在这里调出想要的曲线贝萨尔曲线

按钮宽度的效果和上层效果也是类似。
关于点击效果就是直接一个圆放大缩小的问题。