css：华为手机充电特效

关键点

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

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

• filter: blur()： 给图像设置高斯模糊效果。
• filter: contrast()： 调整图像的对比度。

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

先来看一个简单的例子：

​

 

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

✨ 效果演示

​

✨ 分析逻辑

1、首先我们注意分析，这个效果到底需要怎样的结构去实现

​

        为了更好的看效果  我把所有的元素做了颜色区分，顶部其实就是两个圆利用border-radius去设置了圆角边框的弧度，下面呢？

        底部也是一个大圆，其中有很多很多个小圆，因为小圆要向上移动，实现效果，主要的代码如下：

1. @for $i from 0 through 15 {

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

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

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

5. top: 50%;

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

7. width: $width;

8. height: $width;

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

10. }

11. }

12. @keyframes moveToTop {

13. 90% {

14. opacity: 1;

15. }

16. 100% {

17. opacity: .1;

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

19. }

20. }

 

注意：

1. CSS本身不支持@for循环,这是一种Sass/SCSS的语法

 ✨ 下面附上完整代码（如需调整效果，可更改3、4等代码）

HTML：

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>

SCSS

1. html,

2. body {

3. width: 100%;

4. height: 100%;

5. display: flex;

6. background: #000;

7. overflow: hidden;

8. }

9. .g-number {

10. position: absolute;

11. width: 300px;

12. top: 27%;

13. text-align: center;

14. font-size: 32px;

15. z-index: 10;

16. color: #fff;

17. }

18.  

19. .g-container {

20. position: relative;

21. width: 300px;

22. height: 400px;

23. margin: auto;

24. }

25.  

26. .g-contrast {

27. filter: contrast(10) hue-rotate(0);

28. width: 300px;

29. height: 400px;

30. background-color: #000;

31. overflow: hidden;

32. animation: hueRotate 10s infinite linear;

33. }

34.  

35. .g-circle {

36. position: relative;

37. width: 300px;

38. height: 300px;

39. box-sizing: border-box;

40. filter: blur(8px);

41.  

42. &::after {

43. content: "";

44. position: absolute;

45. top: 40%;

46. left: 50%;

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

48. width: 200px;

49. height: 200px;

50. background-color: #00ff6f;

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

52. animation: rotate 10s infinite linear;

53. }

54.  

55. &::before {

56. content: "";

57. position: absolute;

58. width: 176px;

59. height: 176px;

60. top: 40%;

61. left: 50%;

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

63. border-radius: 50%;

64. background-color: #000;

65. z-index: 10;

66. }

67. }

68.  

69. .g-bubbles {

70. position: absolute;

71. left: 50%;

72. bottom: 0;

73. width: 100px;

74. height: 40px;

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

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

77. background-color: #00ff6f;

78. filter: blur(5px);

79. }

80.  

81. li {

82. position: absolute;

83. border-radius: 50%;

84. background: #00ff6f;

85. }

86.  

87. @for $i from 0 through 15 {

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

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

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

91. top: 50%;

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

93. width: $width;

94. height: $width;

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

96. }

97. }

98.  

99. @keyframes rotate {

100. 50% {

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

102. }

103. 100% {

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

105. }

106. }

107.  

108. @keyframes moveToTop {

109. 90% {

110. opacity: 1;

111. }

112. 100% {

113. opacity: .1;

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

115. }

116. }

117.  

118. @keyframes hueRotate {

119. 100% {

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

121. }

122. }

注意注意注意：一定要用SCSS！！！！！！！！！！！！

注意注意注意：一定要用SCSS！！！！！！！！！！！！

注意注意注意：一定要用SCSS！！！！！！！！！！！！

否则无效