CSS3 实现抖音LOGO STYLE

Posted on

Introduction

策划看到下面的LOGO效果哭喊着叫设计师做做看，高傲的设计师鸟都不鸟她，然后找到了我，心软的IT男就尝试做一下。

douyin

Analysis

仔细看其实感觉也不难，主要就是实现字体以后，在中间有一个抖动层上下移动来增加都动感，整体字体也有一点整体的抖动。

Before

在开撸以前有两个CSS的函数可以认识一下

val( )

通过元素style上设置’–test’格式的样式，通过val()就可以读取到相应的属性。Demo:

1
2
<div class="demo" style="--test:400px">
</div>

1
2
3
.demo {
    width: val(--test);
}

Reference:
MDN-val()

attr( )

通过元素上设置’data-*’属性，通过attr()就可以读取到相应的属性。

Demo:

1
2
<div class="demo" data-content="Hello world">
</div>

1
2
3
.demo {
    content: attr(data-content)
}

Reference:
MDN-attr()

开撸

基础字体

分析下，字体其实有三层，最上一层偏绿色，中间是白色，最后一层偏红色：

1
2
3
4
5
6
7
8
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<div class="douyin-style">
    <div class="douyin-style-font">
        <div class="douyin-style-title" data-title="HELLO SEVENSCHAN">
        <span>HELLO SEVENSCHAN</span>
        </div>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.douyin-style-font {
  font-weight: 700;
  width:450px;
  position: relative;
  /** font style **/
  font-size: 50px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
  font-family: 'Anton', sans-serif;
}

.douyin-style-font .douyin-style-title {
  position: absolute;
  top: 3px;
  left: 3px;
  width: inherit;
}

.douyin-style-font .douyin-style-title:before {
  position: absolute;
  top: -2px;
  left: -2px;
  color: #00f5e7;
  opacity: .8;
  z-index: 2;
  content: attr(data-title);
}

.douyin-style-font .douyin-style-title span{
  position: relative;
  color: #FFF;
  z-index: 3;
  opacity: .9;
}

.douyin-style-font .douyin-style-title:after {
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: .8;
  color: #ff0068;
  z-index: 1;
  content: attr(data-title);
}

这里用了google的字体服务，没翻墙的朋友换个字体就可以，可以看下效果：

douyin-1

摇屁股动画

然后开始添加动画特效，让字体轻轻的摇下屁股

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.douyin-style-font {
  font-weight: 700;
  width:450px;
  position: relative;
  animation: debounce 1s steps(3) infinite;
  /** font style **/
  font-size: 50px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
  font-family: 'Anton', sans-serif;
}

@keyframes debounce {
  0% {
    margin-left: 2px;
  }
  0% {
    margin-left: -4px;
  }
}

遮罩层动画

douyin-2

可以看到，中间是有一个偏移的字体逐帧动画的形式在上下跳动，加入一个跳动层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="douyin-style">
  <div class="douyin-style-font">
    <div class="douyin-style-title" data-title="HELLO SEVENSCHAN">
      <span>HELLO SEVENSCHAN</span>
    </div>
  </div>
  <div class="douyin-style-font shake" style="--shake-offset: -2px; --shake-height: 20px;--shake-delay:0s;">
    <div class="douyin-style-title" data-title="HELLO SEVENSCHAN">
      <span>HELLO SEVENSCHAN</span>
    </div>
  </div>
  <div class="douyin-style-font shake" style="--shake-offset: -5px; --shake-height: 10px;--shake-delay:0.5s;">
    <div class="douyin-style-title" data-title="HELLO SEVENSCHAN">
      <span>HELLO SEVENSCHAN</span>
    </div>
  </div>
</div>

跳动层的内容跟原图层一致，只是增加了shake类和一些style。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.douyin-style-font.shake {
  position: absolute;
  z-index: 9;
  left: var(--shake-offset);
  height: var(--shake-height);
  overflow: hidden;
  background:rgb(29, 29, 29);
  animation: shake-body 1s steps(4) infinite;
  animation-delay: var(--shake-delay);
}

.douyin-style-font.shake .douyin-style-title {
  animation: shake-content 1s steps(4) infinite;
  animation-delay: var(--shake-delay);
}

@keyframes shake-body {
  0%   {
    top: 0;
  }
  100% {
    top: 60px;
  }
}

@keyframes shake-content {
  0%   {
    margin-top: 0;
  }
  100% {
    margin-top: -60px;
  }
}

原理就是下移的同时，里面的字体margin-top向上移动，就能看起来字体没动，只是可视框在动。

代码就这里差不多了。

最后效果

final

全部代码

DouYin Style Gist