抖音抖一抖-SVG和CSS视觉故障艺术小赏

故障艺术，英文名称叫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"><pathd="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 00 1 0 0 00 0 1 0 00 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视觉故障艺术小赏相关推荐

最简单的方法快速生成抖音风格文字——使用HTML和CSS代码
最简单的方法快速生成抖音风格文字--用HTML和CSS代码大家好! 这是我第一次与大家分享心得.希望能与大家共同学习.共同提升. 抖音作为近年来大火的APP,其具有特色的图标和字体收到了不少人的喜爱 ...
g90舵机怎么一直在抖_抖音怎么带货？这样做抖音号，抖音小白也能月入10w
原标题:抖音怎么带货?这样做抖音号,抖音小白也能月入10w 想在抖音带货,那么拍好带货的抖音视频是至关重要的,毕竟用户是先对你的视频内容感兴趣,才对你的产品感兴趣.广告痕迹太明显会引起用户反感,直接划 ...
新手小白怎么学抖音运营？抖音运营5大技巧
在进入正文之前,给大家分享两个利用抖音变现的案例,也让大家看看,抖音的变现能力. 案例A: 如图为抖音带货,当账号所有人在视频的内容中添加商家的产品后,通过此条链接成交的产品,都会给予账号所有人60% ...
抖音seo源码，抖音关键词，抖音下拉词，抖音seo矩阵系统，分发源码技术搭建
抖音seo源码,抖音关键词,抖音下拉词,抖音seo矩阵系统,分发源码技术搭建思路:抖音seo源码,抖音seo矩阵系统底层框架上支持了从ai视频混剪,视频批量原创产出,云存储批量视频制作,账号矩阵,视 ...
抖音同款抖音城堡微信背景图，抖音城堡微信背景图
抖音同款抖音城堡微信背景图
什么是抖音SEO？抖音SEO优化怎么做？如果做好抖音推广优化呢？
什么是抖音SEO? 抖音SEO优化怎么做?抖音SEO.SEO是Search Engine Optimization的简写,中文名搜索引擎优化.抖音SEO是针对抖音搜索的优化技术,是指通过提升目标视频的 ...
抖音企业号，抖音搜索框SEO优化系统搭建。
前言:抖音企业号,抖音搜索框SEO优化系统搭建. 抖音企业号搜索框SEO优化系统源码搭建: 核心功能 1.智能挖掘客户不仅仅是用户直接留资,让每一个跟我们产生过交互的用户都能自动化触达,高效利用用户 ...
抖音运营：抖音直播运营入门
以前的文章讲述了抖音上升技术:内容上升方法和抖音产品上升方法:抖音运营教程20:抖音上升方法-追求热点上升方法,抖音运营22:抖音平台红线和抖音隐藏的审查规则,抖音运营教程18:抖音上升方法-内容上升 ...
抖音seo，抖音企业号管理，抖音搜索排名源码搭建
抖音企业号是开发的一款围绕企业账号下的短视频做的活跃账号,活跃粉丝,意向客户转化进行主动营销触达客户,依据用户互动行为场景触发对意向客户追踪,进行客户意向转化的主动型运营工具. 因为是函数调用,所以需 ...

抖音抖一抖-SVG和CSS视觉故障艺术小赏

抖音抖一抖-SVG和CSS视觉故障艺术小赏相关推荐

最新文章

热门文章