Css制作波浪流动效果

前言

波浪效果需求可能在日常工作中会遇到,实现方法也很多,可以用Svg,也可以用Canvas,但是今天主要想实现的方法是通过Css来完成。

wave1

那Css怎么完成这种看似非常难实现的效果呢,其实用的是偏hack的办法,让我慢慢向你解释。

  • 首先这是一个正常的圆。

wave2

  • 然后我们给它加点圆角。

wave3

  • 我们再加点动画让它转起来

wave4

大家仔细看边缘部分的效果是否就可以用来模拟波浪效果呢,我们再稍加处理就能实现下面的效果:

wave5

source code:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
body {
position: relative;
min-height: 100vh;
background-color: #76daff;
overflow: hidden;
}

body:before,
body:after {
content: "";
position: absolute;
left: 50%;
min-width: 300vw;
min-height: 300vw;
background-color: #fff;
-webkit-animation-name: rotate;
animation-name: rotate;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}

body:before {
bottom: 15vh;
border-radius: 45%;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}

body:after {
bottom: 12vh;
opacity: .5;
border-radius: 47%;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}

@-webkit-keyframes rotate {
0% {
-webkit-transform: translate(-50%, 0) rotateZ(0deg);
transform: translate(-50%, 0) rotateZ(0deg);
}

50% {
-webkit-transform: translate(-50%, -2%) rotateZ(180deg);
transform: translate(-50%, -2%) rotateZ(180deg);
}

100% {
-webkit-transform: translate(-50%, 0%) rotateZ(360deg);
transform: translate(-50%, 0%) rotateZ(360deg);
}
}

@keyframes rotate {
0% {
-webkit-transform: translate(-50%, 0) rotateZ(0deg);
transform: translate(-50%, 0) rotateZ(0deg);
}

50% {
-webkit-transform: translate(-50%, -2%) rotateZ(180deg);
transform: translate(-50%, -2%) rotateZ(180deg);
}

100% {
-webkit-transform: translate(-50%, 0%) rotateZ(360deg);
transform: translate(-50%, 0%) rotateZ(360deg);
}
}

其实就是利用不规则圆角的圆旋转的边缘再隐藏超出容器的部分,就能形成波浪效果的假象,下面我们补全代码:

wave6

source code:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
//style

.container {
position: absolute;
width: 200px;
height: 200px;
padding: 2px;
border: 5px solid #76daff;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
}

.wave {
position: relative;
width: 200px;
height: 200px;
background-color: #76daff;
border-radius: 50%;
}

.wave::before,
.wave::after {
content: "";
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 45%;
-webkit-transform: translate(-50%, -70%) rotate(0);
transform: translate(-50%, -70%) rotate(0);
-webkit-animation: rotate2 6s linear infinite;
animation: rotate2 6s linear infinite;
z-index: 10;
}

.wave::after {
border-radius: 47%;
background-color: rgba(255, 255, 255, 0.9);
-webkit-transform: translate(-50%, -70%) rotate(0);
transform: translate(-50%, -70%) rotate(0);
-webkit-animation: rotate2 10s linear -5s infinite;
animation: rotate2 10s linear -5s infinite;
z-index: 20;
}

@-webkit-keyframes rotate2 {
50% {
-webkit-transform: translate(-50%, -73%) rotate(180deg);
transform: translate(-50%, -73%) rotate(180deg);
}

100% {
-webkit-transform: translate(-50%, -70%) rotate(360deg);
transform: translate(-50%, -70%) rotate(360deg);
}
}

@keyframes rotate2 {
50% {
-webkit-transform: translate(-50%, -73%) rotate(180deg);
transform: translate(-50%, -73%) rotate(180deg);
}

100% {
-webkit-transform: translate(-50%, -70%) rotate(360deg);
transform: translate(-50%, -70%) rotate(360deg);
}
}

//html

<div class="container">
<div class="wave"></div>
</div>

总结

利用Css的transition和animation我们可以做出很多不可思议的动画,唯一限制你的就是你的想象,并且用Css制作出来的动画可以减少资源占用也有很好的流畅度,何乐而不为呢,另外推荐一位大神的博客,本篇文章也借鉴了他的一篇博文,戳这,一起学习一起成长吧!~

run

感谢您的阅读,本文由 James 版权所有。如若转载,请注明出处:James(http://jamescathy.top/2018/10/01/css_wave/
Css盒子模型
简单创建ETH钱包