故障艺术,英文名称叫glitch,在很多赛博朋克作品中经常看到,其实就是故意表现一种显示设备的小故障效果,抖音的图标其实就是这种的效果,我们看下这个图标

这个图标中的红色和蓝色的偏移其实就是一种故障艺术,看到这个,我就能想到早年我家还没有有线电视时,摇天线对电视信号的场景,信号一差就是对着电视一阵拳打脚踢,现在看到这种艺术效果颇为怀念。

某甲:为啥我没遇到过这种场景?

我:你把手里的平板扔地上就能看到了。

某甲:(土豪动作完成)我摔了,咋还没看到呢

我:我就打个比方,你何必当真...

某甲:我一定要看到!

我:要不你再跺几脚...

----------------------------------------我是打算开始的分割线------------------------------------------

我们先来实现一个动态的抖音故障效果,首先我们要有一个干净的抖音图标,我是从阿里巴巴矢量图标库找的,因为它家支持SVG格式,得到的SVG代码是这样的。

<svg id="douyin" t="1570181112474" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2916" width="128" height="128">
<path
d="M937.386667 423.850667a387.84 387.84 0 0 1-232.874667-77.824v352.341333C704.512 878.250667 565.930667 1024 394.922667 1024S85.333333 878.250667 85.333333 698.368c0-179.882667 138.581333-325.632 309.589334-325.632 17.066667 0 33.706667 1.450667 49.92 4.266667v186.624a131.754667 131.754667 0 0 0-48.64-9.216c-76.288 0-138.154667 65.024-138.154667 145.322666 0 80.213333 61.866667 145.322667 138.24 145.322667 76.202667 0 138.069333-65.109333 138.069333-145.322667V0h172.714667c0 134.485333 103.68 243.541333 231.594667 243.541333v180.309334h-1.28"
p-id="2917"></path>
</svg>

看到的图形是这样子的

注意,在SVG的代码里面是没有设置颜色的,图片里面的黑色是为了让大家看清楚。我们先把白色,蓝色和红色的三层抖音图标先显示出来,代码如下:

<use xlink:href="#douyin" x="0%" y="10%"  class="douyin1" />
<use xlink:href="#douyin" x="0%" y="10%" class="douyin2" />
<use xlink:href="#douyin" x="0%" y="10%" class="douyin" />
/* 白色 */
.douyin {
fill: #fff;
}
/* 蓝色 */
.douyin1 {
fill: #25f4ee;
}
/* 红色 */
.douyin2 {
fill: #fe2c55;
}

分别填上了白色,红色和蓝色,在SVG里面,后面的会覆盖前面的,所以把白色放在最前面,因为现在三者的位置是重叠的,所以只能看到白色的。

我们再设置白色的动画效果

@keyframes glitch1 {
0% {
transform: none;
opacity: 1;
} 7% {
transform: skew(-2.5deg, -0.9deg);
opacity: 0.75;
} 10% {
transform: none;
opacity: 1;
} 27% {
transform: none;
opacity: 1;
} 30% {
transform: skew(1.8deg, -0.1deg);
opacity: 0.75;
} 35% { transform: none;
opacity: 1;
} 52% { transform: none;
opacity: 1;
} 55% {
transform: skew(-1deg, 1.2deg);
opacity: 0.75;
} 60% {
transform: none;
opacity: 1;
} 72% {
transform: none;
opacity: 1;
} 75% {
transform: skew(0.4deg, -1deg);
opacity: 0.75;
} 80% {
transform: none;
opacity: 1;
} 100% {
transform: none;
opacity: 1;
}
}

白色的动画效果很小,因为我只做了一些轻微的倾斜效果,感觉画面在抖动,用的是 transform: skew()。transform是css的一个属性,主要设置的是变形效果,这边用的skew是实现倾斜效果。另外还用opacity做了些透明度的处理,用来表现信号故障时的亮度变化。

我们接着设置蓝色图标的动画效果:

@keyframes glitch2 {
0% {
transform: none;
opacity: 0.25;
} 7% {
transform: translate(-4px, -6px);
opacity: 0.5;
} 10% {
transform: none;
opacity: 0.25;
} 27% {
transform: none;
opacity: 0.25;
} 30% {
transform: translate(-7px, -4px);
opacity: 0.5;
} 35% {
transform: none;
opacity: 0.25;
} 52% {
transform: none;
opacity: 0.25;
} 55% {
transform: translate(-5px, -2px);
opacity: 0.5;
} 60% {
transform: none;
opacity: 0.25;
} 72% {
transform: none;
opacity: 0.25;
} 75% {
transform: translate(-4px, -6px);
opacity: 0.5;
} 80% {
transform: none;
opacity: 0.25;
} 100% {
transform: none;
opacity: 0.25;
}
}

这里同样是使用transform变形,但用的效果是translate,官方的名称是2D转换,其实就是平移效果,可以在横向纵向做移动,我们看抖音的图标就知道,蓝色部分是在白色图标的左上方,所以设置的translate的值都是负数,这是左上方的平移。

红色部分类似,只是translate的值都是正数,表示时右下方的平移。代码如下:

@keyframes glitch3 {
0% {
transform: none;
opacity: 0.25;
} 7% {
transform: translate(4px, 6px);
opacity: 0.5;
} 10% {
transform: none;
opacity: 0.25;
} 27% {
transform: none;
opacity: 0.25;
} 30% {
transform: translate(7px, 4px);
opacity: 0.5;
} 35% {
transform: none;
opacity: 0.25;
} 52% {
transform: none;
opacity: 0.25;
} 55% {
transform: translate(5px, 2px);
opacity: 0.5;
} 60% {
transform: none;
opacity: 0.25;
} 72% {
transform: none;
opacity: 0.25;
} 75% {
transform: translate(4px, 8px);
opacity: 0.5;
} 80% {
transform: none;
opacity: 0.25;
} 100% {
transform: none;
opacity: 0.25;
}
}

最后,把动画效果加到css类里面去,之前的css代码改成这样

.douyin {
fill: #fff; /*Animation*/
animation: glitch1 3s infinite;
} .douyin1 {
fill: #25f4ee;
animation: glitch2 3s infinite;
} .douyin2 {
fill: #fe2c55;
animation: glitch3 3s infinite;
}

动画效果设置成3秒,无限循环,最后的成品效果如下:

在线效果请移步codepen.io

---------------------------------------------还有高级效果的分割线----------------------------------------

上面实现的是模仿抖音官方图标的动态效果,但作为一个赛博朋克艺术家(是的,我都艺术家好几个星期了),我觉得这个效果虽然很符合抖音的气质,但离我想象中的高大上效果还有很大一段距离,我决定再加些效果,更加赛博朋克一些。

这里我要用上一个负责的svg的filter,代码如下:

<filter id="filter">
<feTurbulence type="turbulence" baseFrequency="0.01 0.15" numOctaves="2" seed="5" stitchTiles="stitch"
result="turbulence" />
<feColorMatrix type="saturate" values="30" in="turbulence" result="colormatrix" />
<feColorMatrix type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 150 -15" in="colormatrix" result="colormatrix1" />
<feDisplacementMap in="SourceGraphic" in2="colormatrix1" scale="10" xChannelSelector="R" yChannelSelector="A"
result="displacementMap" />
</filter>

这是一个组合的filter效果,具体的分工如下:

  • feTurbulence是利用Perlin噪声函数创建了一个图像。它实现了人造纹理比如说云纹、大理石纹的合成,我之前做云朵的时候用的就是它。这里主要实现干扰信号的效果
  • feColorMatrix 基于转换矩阵对颜色进行变换,在这里可以把白、蓝、红的颜色混合,在三种颜色叠加的地方产生一种颜色互相干扰的效果
  • feDisplacementMap 实际上是一个位置替换滤镜,就是改变元素和图形的像素位置的。在这里,针对抖音的图标(SourceGraphic)和经过feColorMatrix /feTurbulence过滤器后的结果做位置变换,就等到了干扰效果的最终结果。

最后我们把这个filter加到动画效果里面,我们拿三个keyframe中的一个来看下代码,其他两个是一样的。

@keyframes glitch1 {
0% {
transform: none;
opacity: 1;
} 7% {
transform: skew(-2.5deg, -0.9deg);
filter: url(#filter);
opacity: 0.75;
} 8% {
filter: none;
} 10% {
transform: none;
opacity: 1;
} 27% {
transform: none;
opacity: 1;
} 30% {
transform: skew(1.8deg, -0.1deg);
filter: url(#filter);
opacity: 0.75;
}
31% {
filter: none;
} 35% { transform: none;
opacity: 1;
} 52% { transform: none;
opacity: 1;
} 55% {
transform: skew(-1deg, 1.2deg);
filter: url(#filter);
opacity: 0.75;
} 56% {
filter: none;
} 60% {
transform: none;
opacity: 1;
} 72% {
transform: none;
opacity: 1;
} 75% {
transform: skew(0.4deg, -1deg);
filter: url(#filter);
opacity: 0.75;
}
76% {
filter: none;
} 80% {
transform: none;
opacity: 1;
} 100% {
transform: none;
opacity: 1;
}
}

filter: url(#filter) 这一句就是调用svg filter的语句。注意每调用一次这个,在后面都会加上这一句

31% {
filter: none;
}

这是为了让filter效果瞬间出现,瞬间消失,使得故障效果更加逼真。最终看到的效果如下:

在线效果请看codepen.io

源代码请看这里

抖音抖一抖-SVG和CSS视觉故障艺术小赏的更多相关文章

  1. JavaWeb-SpringBoot(抖音)_一、抖音项目制作

    JavaWeb-SpringBoot(抖音)_一.抖音项目制作 传送门 JavaWeb-SpringBoot(抖音)_二.服务器间通讯 传送门 JavaWeb-SpringBoot(抖音)_三.抖音项 ...

  2. Python爬虫帮你打包下载所有抖音好听的背景音乐,还不快收藏一起听歌【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  3. 抖音短视频教程VIP培训课程(2019实时更新中)

    抖音联盟,抖友会,抖音联盟会员,抖音联盟学员,抖音批量做号团队,工作室带队,联盟学员统一官网认证可查,统一变现渠道担保,成熟技术技术后盾,实时工作室真机实测规则,抖音情感励志书单模式2.0升级,拒绝落 ...

  4. 刷抖音太累,教你用Python把高颜值的小姐姐都爬下来慢慢看

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 星安果.AirPython 目 标 场 景 相信大家平时刷抖音短视频 ...

  5. 【爬虫集合】抖音API分析

    1. 分析接口 Charles注册码 Registered Name: https://zhile.io License Key: 48891cf209c6d32bf4 抖音API分析 抖音.猫眼网页 ...

  6. 【Web】CSS实现抖音风格字体效果(设置文本阴影)

    简单记录 -慕课网- 步骤一:抖音风格字体效果 案例:抖音风格的字体特效. 实现这个 需要设置 网页背景颜色 字体颜色 字体大小 文本阴影 重点介绍如何设置文本阴影 CSS的文本阴影text-shad ...

  7. 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...

  8. JavaWeb-SpringBoot(抖音)_三、抖音项目后续

    JavaWeb-SpringBoot(抖音)_一.抖音项目制作 传送门 JavaWeb-SpringBoot(抖音)_二.服务器间通讯 传送门 JavaWeb-SpringBoot(抖音)_三.抖音项 ...

  9. JavaWeb-SpringBoot(抖音)_二、服务器间通讯

    JavaWeb-SpringBoot(抖音)_一.抖音项目制作 传送门 JavaWeb-SpringBoot(抖音)_二.服务器间通讯 传送门 JavaWeb-SpringBoot(抖音)_三.抖音项 ...

随机推荐

  1. mysql 主从同步(转)

    教程开始:一.安装MySQL 说明:在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作,安装MySQL 5.5.22  二.配置MySQL主服务器(19 ...

  2. Spring Boot 2.X(十五):集成 Swagger2 开发 API 文档(在线+离线)

    前言 相信很多后端开发在项目中都会碰到要写 api 文档,不管是给前端.移动端等提供更好的对接,还是以后为了以后交接方便,都会要求写 api 文档. 而手写 api 文档的话有诸多痛点: 文档更新的时 ...

  3. 学习笔记39_EF的DAL层(精)

    通用的分页查询 public IQueryable<UserInfo> GetPage<T>(int pageSize,int pageIndex,out int total, ...

  4. NOIP模拟 19

    最近试考的脑壳疼 晚上还有一场555 T1 count 研究性质题. 研究好了AC,研究不明白就没头绪 首先枚举n的因子d 其次发现因为是树,所以如果合法,贡献只能是1 然后发现如果合法,一定是一棵一 ...

  5. kettle6.1如何连接mongodb

    . Kettle的结构图如下: 2.介绍各个组件详细情况 表输入:通常是你的sql语句,这个会Kettle基础知识的都会不介绍了 JSON Output如下: MogoDB output如下: 下面这 ...

  6. jq实现多选框及反选

    1 效果图 2 html <div class="main"> <table> <tr> <th><input type=&q ...

  7. H5+app -- 关于ajax提交问题

    1.前阵子在做系统的h5+ app为满足手机端也能进行业务操作,例如:提货,扫描入库之类的.所以就要将做接口,从手机端调用后台系统的方法. 2.例如这样的请求格式,但是呢,每次请求它都直接跳到erro ...

  8. containerd 与安全沙箱的 Kubernetes 初体验

    作者 | 易立  阿里云资深技术专家 containerd 是一个开源的行业标准容器运行时,关注于简单.稳定和可移植,同时支持 Linux 和 Windows. 2016 年 12 月 14 日,Do ...

  9. 设计模式(Java语言)-单例模式

    单例模式,简而言之就是在整个应用程序里面有且仅有一个实例,在程序的任何时候,任何地方获取到的该对象都是同一个对象.单例模式解决了一个全局的类被频繁创建和销毁的,或者每次创建或销毁都需要消耗大量cpu资 ...

  10. 解决WordPress不能发邮件,WordPress 无法发送邮件

    解决WordPress不能发邮件,WordPress 无法发送邮件,不得不说WordPress这个问题真的很烦人,研究了一下午发现不能发邮件的问题无非以下几种! 1.系统本身问题,这个直接装个插件即可 ...