前言

大家好，我是 木瓜星灵。最近发现，好多同事都沉迷于一款音乐短视频APP而不能自拔，吃饭、睡觉、工作(摸鱼🐟) 都在看，这就是字节的“抖音短视频”。内部群里经常看得到大家称赞抖音的魔性，有人说不看抖音起不来床，我自己每晚都要刷会抖音短视频，才会逼着自己去睡觉。抖音靠什么魔力能吸引大家。在刷抖音之余，我对抖音的logo设计产生了好奇。\

下面用CSS来画一下抖音的logo。

前置知识

1. css滤镜属性 - filter

• CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。例如模糊效果、透明效果、色彩反差调整等等；同时，CSS滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。
• 常用filter函数

滤镜效果	函数	补充
无	none	默认值，表示没有效果
模糊	blur(px)	为图像设置高斯模糊，默认值为 0，单位为像素，值较大越模糊
亮度	brightness(number)	number越大图像越亮，number不能取负值，可以是整数也可以是百分比
灰度	grayscale(%)	将图像转换为灰度图像，默认值为 0%，表示原始图像；100％ 表示将图像完全变成灰度图像（即黑白图像），不允许为负值
对比度	contrast(%)	默认值为 100％，代表原始图像；0％ 将使图像完全变黑；当值超过 100％ 时图像将获得更高的对比度
阴影	drop-shadow(h-shadow v-shadow blur spread color)	为图像添加阴影效果，参数说明如下：h-shadow：必填值，指定水平方向阴影的像素值，若值为负，则阴影会出现在图像的左侧；
...	...	...

1. css动画属性 - animation

• 通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果。
• 使用方法
  1. 定义动画 @keyframes
  2. 使用(调用)
• 常见的动画属性

3.animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

animation: name duration timing-function delay iteration-count direction;

代码总体效果

实现思路

1.背景 抖音经典的纯黑色

body {
    /*  背景颜色  */
    background: #000;
    overflow: hidden;
}

2.抖音logo部分

• 抖音logo可以分割为三个部分
• 用一个div标签和它的伪元素before after来构成主体，运用filter和动画效果来完善抖音logo动画效果😄😄

• 用一个div标签和伪元素来实现效果
• div部分代码🍕🍕

#app {
    position: relative;
    width: 37px;
    height: 218px;
    margin: 100px auto;
    z-index: 1;
    background: #fff;
    /* 滤镜*/
    // filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%);
    /* 阴影 */
    box-shadow: 11.6px 10px 0 0 #fe2d52;
    z-index: 10;
   
    // animation: move 5s infinite ease-in;
}

• 此时运用我们文章前面介绍的滤镜在处理一下

/* 阴影 方位为水平垂直-10px -10px 模糊度为0 对比度150% 亮度110%
filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%);

效果为：

• 接下来出来logo的上半部分😡😡

  /* */
  div::after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border: 30px solid #fff;
        border-right: 30px solid transparent;
        border-top: 30px solid transparent;
        border-left: 30px solid transparent;
        top: -100px;
        right: -172px;
        border-radius: 50%;
        transform: rotate(45deg);
        z-index: -10;
        filter:drop-shadow(14px 0 0 #fe2d52);
    }

1. 上半部分伪元素after利用绝对定位到logo上半部分
2. 设置宽高和边框border，其中三处边框透明、一处弯曲成圆角，利用transform函数旋转45°到logo连接处,设置z-index -10 处理覆盖关系
3. 用div标签所用的滤镜和阴影处理一下，效果如下：

• logo的下半部分😄😄

div::before {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        border: 37px solid #fff;
        border-top: 37px solid transparent;
        border-radius: 50%;
        top: 123px;
        left: -137px;
        transform: rotate(45deg);
        filter: drop-shadow(16px 0px 0 #fe2d52);
        
    } 

1.下半部分和上半部分实现的思路一样,不一样的就是一个边框透明三面圆角，其余不再赘述

动画效果

• 定义一个动画 move

@keyframes move {
    4% {
        /*动画的起始4%:水平方向逆时针倾斜7°,水平向左平移30px*/
        transform: skewX(7deg) translate(-30px);
    }
    7% {/*动画7%:水平方向顺时针倾斜6°,水平向左平移18px*/
        transform: skewX(-6deg) translate(18px);
    }
    9% {
        transform: skewX(5deg) translate(-8px);
    }
    10% {
        transform: skewX(-4deg)translate(6px);
    }
    11% {
        transform: skewX(3deg)translate(-4px);
    }
    12% {
        transform: skewX(-2deg) translate(2px);
    }
    13% {
    /*动画即将结束13%：位置的变化 及 滤镜的变化*/
        transform: skewX(1deg) translate(0px);
        filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(120%) brightness(110%) blur(3px);
    }
    30% {
    /*动画结束30%： 滤镜的变化*/
        filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(120%) blur(0px);
    }

• 调用动画

 animation: move 5s infinite ease-in;

大功告成🎉🎉

最后放一个优秀的抖音logo来学习下😁