codepen挑战(2020-6-17):滑动
前言
codepen
每周挑战是codepen
网站推出的活动,每周一次;每个挑战都有一个主题,基本上是围绕一个特定的场景或者CSS
特性/库这类的,针对性比较强。
挑战描述
实际上是创建一个关于滑动的动画即可,并不局限于幻灯片切换的那种动画(一开始确实理解错了……)。
想法
Demo
地址:https://codepen.io/xxf1996/pen/KKVNzxz
由于一开始理解成幻灯片切换效果动画了,所以创建一个幻灯片进(slide-in
)和出(slide-out
)的动画;
slide-in
运用的视觉效果是冲击 + 压缩 + 反弹;
slide-out
则是沿着一条曲线路径不断旋转,前进和渐隐;主要是运用了新增没几年的offset-path
及相关属性;
有趣的案例
很有意思,一只看起来百无聊赖的北极熊在冰面上滑动,再加上显眼的MONDAY
,寓意很明显。
北极熊本身是使用SVG
进行绘制的,显眼的MONDAY
有四层,中间两层是普通的文字,顶层和底层都是使用了-webkit-background-clip: text
+ -webkit-text-fill-color:transparent
+ 渐变生成的背景这一组合达成的效果;
文字效果相关的尝试:https://codepen.io/xxf1996/pen/OJMzKYo