codepen挑战(2020-6-17):滑动

前言

codepen每周挑战是codepen网站推出的活动,每周一次;每个挑战都有一个主题,基本上是围绕一个特定的场景或者CSS特性/库这类的,针对性比较强。

挑战描述

img

实际上是创建一个关于滑动的动画即可,并不局限于幻灯片切换的那种动画(一开始确实理解错了……)。

想法

Demo地址:https://codepen.io/xxf1996/pen/KKVNzxz

由于一开始理解成幻灯片切换效果动画了,所以创建一个幻灯片进(slide-in)和出(slide-out)的动画;

img

slide-in运用的视觉效果是冲击 + 压缩 + 反弹;

slide-out则是沿着一条曲线路径不断旋转,前进和渐隐;主要是运用了新增没几年的offset-path及相关属性;

有趣的案例

img

很有意思,一只看起来百无聊赖的北极熊在冰面上滑动,再加上显眼的MONDAY,寓意很明显。

北极熊本身是使用SVG进行绘制的,显眼的MONDAY有四层,中间两层是普通的文字,顶层和底层都是使用了-webkit-background-clip: text + -webkit-text-fill-color:transparent + 渐变生成的背景这一组合达成的效果;

文字效果相关的尝试:https://codepen.io/xxf1996/pen/OJMzKYo

相关文档