img

CSS 故障艺术

2020-02-22 0条评论 2.7k次阅读 CSS


CSS3 新增了一个很有意思的属性 — mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为 混合模式

关键点

  • 主要借助伪元素实现了整体 J 结构,借助了 mix-blend-mode 实现融合效果

  • 利用 mix-blend-mode: lighten 混合模式实现两个 J 形结构重叠部分为白色

640 _1_.gif

完整demo:https://codepen.io/haiwar/pen/gOpLGPN

clip-path 实现图片的故障艺术风格动画

关键点

  • 使用元素的伪元素复制两份图片副本,再使用 clip-path 对图片进行裁剪并且添加位移、变形、滤镜等等。

  • 动画部分代码太多了,有一半使用了 SASS 的循环函数随机生成
    640 _3_.gif

完整demo:https://codepen.io/Chokcoco/pen/eYmaoNg

404故障效果

640 _1_.gif

完整demo:https://codepen.io/Chokcoco/pen/OJPexEm

640 _2_.gif

完整demo:https://codepen.io/Chokcoco/pen/QWwXqra

🏷️ #CSS

💬 COMMENT


🦄 支持markdown语法

👋友