关注前言

看着这些就觉得很美妙。今日早读文章由腾讯@chokcoco授权分享。

正文从这开始～～

循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。

画个电池

当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个：

欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。

方法很多，代码也很简单，直接看效果：

有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总感觉少了点什么。

增加阴影及颜色的变化

如果要继续优化的话，需要添加点细节。

我们知道，低电量时，电量通常表示为红色，高电量时表示为绿色。再给整个色块添加点阴影的变化，呼吸的感觉，让充电的效果看起来确实是在动。

知识点

到这里，其实只有一个知识点：

使用 filter: hue-rotate() 对渐变色彩进行色彩过渡变换动画

我们无法对一个渐变色直接进行 animation ，这里通过滤镜对色相进行调整，从而实现了渐变色的变换动画。

完整Demo：https://codepen.io/Chokcoco/pen/bGNqyra?editors=1100

1. <div class="container">

2. <div class="battery"></div>

3. </div>

1. html,

2. body {

3. width: 100%;

4. height: 100%;

5. display: flex;

6. background: #e4e4e4;

7. }

8. 
   

9. .container {

10. position: relative;

11. width: 140px;

12. margin: auto;

13. }

14. 
    

15. .battery {

16. height: 220px;

17. box-sizing: border-box;

18. border-radius: 15px 15px 5px 5px;

19. filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));

20. background: #fff;

21. z-index: 1;

22. 
    

23. &::before {

24. content: "";

25. position: absolute;

26. width: 26px;

27. height: 10px;

28. left: 50%;

29. top: 0;

30. transform: translate(-50%, -10px);

31. border-radius: 5px 5px 0 0;

32. background: rgba(240, 240, 240, .88);

33. }

34. 
    

35. &::after {

36. content: "";

37. position: absolute;

38. left: 0;

39. right: 0;

40. bottom: 0;

41. top: 90%;

42. background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);

43. border-radius: 0px 0px 5px 5px;

44. box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);

45. animation: charging 6s linear infinite;

46. filter: hue-rotate(90deg);

47. }

48. }

49. 
    

50. @keyframes charging {

51. 50% {

52. box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);

53. }

54. 
    

55. 95% {

56. top: 5%;

57. filter: hue-rotate(0deg);

58. border-radius: 0 0 5px 5px;

59. box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);

60. }

61. 100% {

62. top: 0%;

63. filter: hue-rotate(0deg);

64. border-radius: 15px 15px 5px 5px;

65. box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);

66. }

67. }

添加波浪

ok，刚刚算一个小里程碑，接下来再进一步。电量的顶部为一条直线有点呆呆的感觉，这里我们进行改造一下，如果能将顶部直线，改为波浪滚动，效果会更为逼真一点。

改造之后的效果：

使用 CSS 实现这种波浪滚动效果，其实只是用了一种障眼法，具体的可以我早期写的这篇文章：纯 CSS 实现波浪效果！

知识点

这里的一个知识点就是上述说的使用 CSS 实现简易的波浪效果，通过障眼法实现，看看图就明白了：

完整Demo：https://codepen.io/Chokcoco/pen/qBErGoO

1. <div class="container">

2. <div class="header"></div>

3. <div class="battery">

4. </div>

5. <div class="battery-copy">

6. <div class="g-wave"></div>

7. <div class="g-wave"></div>

8. <div class="g-wave"></div>

9. </div>

10. </div>

1. html,

2. body {

3. width: 100%;

4. height: 100%;

5. display: flex;

6. background: #e4e4e4;

7. }

8. 
   

9. .container {

10. position: relative;

11. width: 140px;

12. margin: auto;

13. }

14. 
    

15. .header {

16. position: absolute;

17. width: 26px;

18. height: 10px;

19. left: 50%;

20. top: 0;

21. transform: translate(-50%, -10px);

22. border-radius: 5px 5px 0 0;

23. background: rgba(255, 255, 255, .88);

24. }

25. 
    

26. .battery-copy {

27. position: absolute;

28. top: 0;

29. left: 0;

30. height: 220px;

31. width: 140px;

32. border-radius: 15px 15px 5px 5px;

33. overflow: hidden;

34. }

35. 
    

36. .battery {

37. position: relative;

38. height: 220px;

39. box-sizing: border-box;

40. border-radius: 15px 15px 5px 5px;

41. box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);

42. background: #fff;

43. z-index: 1;

44. 
    

45. &::after {

46. content: "";

47. position: absolute;

48. left: 0;

49. right: 0;

50. bottom: 0;

51. top: 80%;

52. background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);

53. border-radius: 0px 0px 5px 5px;

54. box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);

55. animation: charging 10s linear infinite;

56. filter: hue-rotate(90deg);

57. }

58. }

59. 
    

60. .g-wave {

61. position: absolute;

62. width: 300px;

63. height: 300px;

64. background: rgba(255, 255, 255, .8);

65. border-radius: 45% 47% 44% 42%;

66. bottom: 25px;

67. left: 50%;

68. transform: translate(-50%, 0);

69. z-index: 1;

70. animation: move 10s linear infinite;

71. }

72. 
    

73. .g-wave:nth-child(2) {

74. border-radius: 38% 46% 43% 47%;

75. transform: translate(-50%, 0) rotate(-135deg);

76. }

77. 
    

78. .g-wave:nth-child(3) {

79. border-radius: 42% 46% 37% 40%;

80. transform: translate(-50%, 0) rotate(135deg);

81. }

82. 
    

83. @keyframes charging {

84. 50% {

85. box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);

86. }

87. 
    

88. 95% {

89. top: 5%;

90. filter: hue-rotate(0deg);

91. border-radius: 0 0 5px 5px;

92. box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);

93. }

94. 100% {

95. top: 0%;

96. filter: hue-rotate(0deg);

97. border-radius: 15px 15px 5px 5px;

98. box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);

99. }

100. }

101. 
     

102. @keyframes move {

103. 100% {

104. transform: translate(-50%, -160px) rotate(720deg);

105. }

106. }

OK，到这，上述效果加上数字变化已经算是一个比较不错的效果了。当然上面的效果看上去还是很 CSS 的，就是一眼看到就觉得用 CSS 是可以做到的。

使用强大的 CSS 滤镜实现安卓充电动画效果

那下面这个呢？

用安卓手机的同学肯定不陌生，这个是安卓手机在充电的时候的效果。看到这个我就很好奇，使用 CSS 能做到吗？

经过一番尝试，发现使用 CSS 也是可以很好的模拟这种动画效果：

上述 Gif 录制的效果图是完全使用 CSS 模拟的效果。

完整Demo：https://codepen.io/Chokcoco/pen/vYExwvm

1. <div class="g-container">

2. <div class="g-number">98.7%</div>

3. <div class="g-contrast">

4. <div class="g-circle"></div>

5. <ul class="g-bubbles">

6. <li></li>

7. <li></li>

8. <li></li>

9. <li></li>

10. <li></li>

11. <li></li>

12. <li></li>

13. <li></li>

14. <li></li>

15. <li></li>

16. <li></li>

17. <li></li>

18. <li></li>

19. <li></li>

20. <li></li>

21. </ul>

22. </div>

23. </div>

1. html,

2. body {

3. width: 100%;

4. height: 100%;

5. display: flex;

6. background: #000;

7. overflow: hidden;

8. }

9. 
   

10. .g-number {

11. position: absolute;

12. width: 300px;

13. top: 27%;

14. text-align: center;

15. font-size: 32px;

16. z-index: 10;

17. color: #fff;

18. }

19. 
    

20. .g-container {

21. position: relative;

22. width: 300px;

23. height: 400px;

24. margin: auto;

25. }

26. 
    

27. .g-contrast {

28. filter: contrast(15) hue-rotate(0);

29. width: 300px;

30. height: 400px;

31. background-color: #000;

32. overflow: hidden;

33. animation: hueRotate 10s infinite linear;

34. }

35. 
    

36. .g-circle {

37. position: relative;

38. width: 300px;

39. height: 300px;

40. box-sizing: border-box;

41. filter: blur(8px);

42. 
    

43. &::after {

44. content: "";

45. position: absolute;

46. top: 40%;

47. left: 50%;

48. transform: translate(-50%, -50%) rotate(0);

49. width: 200px;

50. height: 200px;

51. background-color: #00ff6f;

52. border-radius: 42% 38% 62% 49% / 45%;

53. animation: rotate 10s infinite linear;

54. }

55. 
    

56. &::before {

57. content: "";

58. position: absolute;

59. width: 176px;

60. height: 176px;

61. top: 40%;

62. left: 50%;

63. transform: translate(-50%, -50%);

64. border-radius: 50%;

65. background-color: #000;

66. z-index: 10;

67. }

68. }

69. 
    

70. .g-bubbles {

71. position: absolute;

72. left: 50%;

73. bottom: 0;

74. width: 100px;

75. height: 40px;

76. transform: translate(-50%, 0);

77. border-radius: 100px 100px 0 0;

78. background-color: #00ff6f;

79. filter: blur(5px);

80. }

81. 
    

82. li {

83. position: absolute;

84. border-radius: 50%;

85. background: #00ff6f;

86. }

87. 
    

88. @for $i from 0 through 15 {

89. li:nth-child(#{$i}) {

90. $width: 15 + random(15) + px;

91. left: 15 + random(70) + px;

92. top: 50%;

93. transform: translate(-50%, -50%);

94. width: $width;

95. height: $width;

96. animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;

97. }

98. }

99. 
    

100. @keyframes rotate {

101. 50% {

102. border-radius: 45% / 42% 38% 58% 49%;

103. }

104. 100% {

105. transform: translate(-50%, -50%) rotate(720deg);

106. }

107. }

108. 
     

109. @keyframes moveToTop {

110. 90% {

111. opacity: 1;

112. }

113. 100% {

114. opacity: .1;

115. transform: translate(-50%, -180px);

116. }

117. }

118. 
     

119. @keyframes hueRotate {

120. 100% {

121. filter: contrast(15) hue-rotate(360deg);

122. }

123. }

知识点

拆解一下知识点，最主要的其实是用到了 filter: contrast() 以及 filter: blur() 这两个滤镜，可以很好的实现这种融合效果。

单独将两个滤镜拿出来，它们的作用分别是：

• filter: blur()：给图像设置高斯模糊效果。

• filter: contrast()：调整图像的对比度。

但是，当他们“合体”的时候，产生了奇妙的融合现象。

先来看一个简单的例子：

仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。

当然，这种效果在之前的文章也多次提及过，更具体的，可以看看：

• 【第1568期】CSS 火焰

• 你所不知道的 CSS 滤镜技巧与细节

颜色的变换

当然，这里也是可以加上颜色的变换，效果也很不错：

1. html,

2. body {

3. width: 100%;

4. height: 100%;

5. display: flex;

6. background: #000;

7. overflow: hidden;

8. }

9. 
   

10. .g-number {

11. position: absolute;

12. width: 300px;

13. top: 27%;

14. text-align: center;

15. font-size: 32px;

16. z-index: 10;

17. color: #fff;

18. }

19. 
    

20. .g-container {

21. position: relative;

22. width: 300px;

23. height: 400px;

24. margin: auto;

25. }

26. 
    

27. .g-contrast {

28. filter: contrast(15) hue-rotate(0);

29. width: 300px;

30. height: 400px;

31. background-color: #000;

32. overflow: hidden;

33. animation: hueRotate 10s infinite linear;

34. }

35. 
    

36. .g-circle {

37. position: relative;

38. width: 300px;

39. height: 300px;

40. box-sizing: border-box;

41. filter: blur(8px);

42. 
    

43. &::after {

44. content: "";

45. position: absolute;

46. top: 40%;

47. left: 50%;

48. transform: translate(-50%, -50%) rotate(0);

49. width: 200px;

50. height: 200px;

51. background-color: #00ff6f;

52. border-radius: 42% 38% 62% 49% / 45%;

53. animation: rotate 10s infinite linear;

54. }

55. 
    

56. &::before {

57. content: "";

58. position: absolute;

59. width: 176px;

60. height: 176px;

61. top: 40%;

62. left: 50%;

63. transform: translate(-50%, -50%);

64. border-radius: 50%;

65. background-color: #000;

66. z-index: 10;

67. }

68. }

69. 
    

70. .g-bubbles {

71. position: absolute;

72. left: 50%;

73. bottom: 0;

74. width: 100px;

75. height: 40px;

76. transform: translate(-50%, 0);

77. border-radius: 100px 100px 0 0;

78. background-color: #00ff6f;

79. filter: blur(5px);

80. }

81. 
    

82. li {

83. position: absolute;

84. border-radius: 50%;

85. background: #00ff6f;

86. }

87. 
    

88. @for $i from 0 through 15 {

89. li:nth-child(#{$i}) {

90. $width: 15 + random(15) + px;

91. left: 15 + random(70) + px;

92. top: 50%;

93. transform: translate(-50%, -50%);

94. width: $width;

95. height: $width;

96. animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;

97. }

98. }

99. 
    

100. @keyframes rotate {

101. 50% {

102. border-radius: 45% / 42% 38% 58% 49%;

103. }

104. 100% {

105. transform: translate(-50%, -50%) rotate(720deg);

106. }

107. }

108. 
     

109. @keyframes moveToTop {

110. 90% {

111. opacity: 1;

112. }

113. 100% {

114. opacity: .1;

115. transform: translate(-50%, -180px);

116. }

117. }

118. 
     

119. @keyframes hueRotate {

120. 100% {

121. filter: contrast(15) hue-rotate(360deg);

122. }

123. }

容易忽视的点

通过调节 filter: blur() 及 filter: contrast() 属性的值，动画效果其实会有很大程度的变化，好的效果需要不断的调试。当然，经验在其中也是发挥了很重要的作用，说到底还是要多尝试。

最后

本文给出的几个充电动画，效果渐进增强，本文只指出了最核心的知识点。但是在实际输出的过程中有很多小细节是本文没有提及的，感兴趣的同学还是应该点进 Demo 好好看看源码或者自己动手实现一遍。

CSS 奇技淫巧GitHub:https://github.com/chokcoco/iCSS

关于本文 作者：@chokcoco 原文：https://juejin.im/post/5e00240ee51d45583c1cc9a7

@chokcoco曾分享过

【第1568期】CSS 火焰

【第1503期】不可思议的纯 CSS 滚动进度条效果

为你推荐

【第1073期】巧用匿名函数重构你的代码

【第1815期】利用 JS 实现多种图片相似度算法

最后，【活动】SEE Conf 大会邀请函：体验美好，玩转数据 会将在B站和优酷直播，有兴趣的童鞋赶紧去订阅

https://live.bilibili.com/21726701?visit_id=80rlef5lczr4

https://vku.youku.com/live/ilproom?id=8031652