• html设计（两种常见的充电效果）

    第一种

    完整代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         *{
    9. padding: 0;
    10. margin: 0;
    11. }
    12. .box{
    13. width: 800px;
    14. height: 800px;
    15. background-color: black;
    16. margin: 20px auto;
    17. padding-top: 20px;
    18. position: relative;
    19. }
    20. .battery{
    21. width: 200px;
    22. height: 320px;
    23. background-color:white;
    24. margin-top: 200px;
    25. margin-left: 300px;
    26. border-radius: 15px 15px 0px 0px;
    27. position: relative;
    28. /* top: 20px; */
    29. }
    30. .battery::before{
    31. content: "";
    32. width: 50px;
    33. height: 20px;
    34. background-color:white;
    35. position: absolute;
    36. top: -20px;
    37. left: 38%;
    38. }
    39. .battery::after{
    40. content: "";
    41. position: absolute;
    42. top: 90%;
    43. left: 0;
    44. right: 0;
    45. bottom: 0;
    46. background-image: linear-gradient(to bottom,#7abcff 0%,#00BCD4
    47. 44%,#2196F3 100%);
    48. animation:change 10s linear infinite ;
    49. }
    50. @keyframes change{
    51. 0%{
    52. top: 100%;
    53. filter: hue-rotate(90deg);
    54. }
    55. 95%{
    56. top: 5%;
    57. border-radius: 0;
    58. }
    59. 100%{
    60. top: 0%;
    61. border-radius: 15px 15px 0px 0px;
    62. filter: hue-rotate(0deg);
    63. }
    64. }
    65. .cover{
    66. width: 100%;
    67. height: 100%;
    68. /* background-color: #00BCD4; */
    69. border-radius: 15px 15px 0px 0px;
    70. position: absolute;
    71. top: 0;
    72. left: 0;
    73. z-index: 1;
    74. overflow: hidden;
    75. }
    76. .cover::before{
    77. content: "";
    78. width: 400px;
    79. height: 400px;
    80. background-color: rgba(255, 255, 255, 0.8);
    81. position: absolute;
    82. left: -50%;
    83. border-radius: 42% 40%;
    84. animation: coverBefore 10s linear infinite;
    85. }
    86. @keyframes coverBefore{
    87. 0%{
    88. transform: rotate(0deg);
    89. bottom: 0%;
    90. }
    91. 100%{
    92. transform: rotate(360deg);
    93. bottom: 100%;
    94. }
    95. }
    96. .cover::after{
    97. content: "";
    98. width: 400px;
    99. height: 400px;
    100. background-color: rgba(255, 255, 255, 0.7);
    101. position: absolute;
    102. left: -50%;
    103. border-radius: 42% 40%;
    104. animation: coverAfter 10s linear infinite;
    105. }
    106. @keyframes coverAfter{
    107. 0%{
    108. transform: rotate(30deg);
    109. bottom: 2%;
    110. }
    111. 100%{
    112. transform: rotate(360deg);
    113. bottom: 95%;
    114. }
    115. }
    116.     style>
    117. head>
    118. <body>
    119.     <div class="box">
    120.     <div class="battery">
    121.     <div class="cover">div>
    122. body>
    123. html>

    第二种

    完整代码：

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5. <head>
    6.  
    7. <meta charset="UTF-8">
    8.  
    9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    10.  
    11. <title>充电效果title>
    12.  
    13. <style>
    14.  
    15. *{
    16.  
    17. padding: 0;
    18.  
    19. margin: 0;
    20.  
    21. }
    22.  
    23. /* .box{
    25. width: 1000px;
    27. height:1000px;
    29. background-color: black;
    31. margin: 20px auto;
    33. padding-top: 20px;
    35. position: relative;
    37. } */
    38.  
    39. .contrast{
    40.  
    41. width: 70%;
    42.  
    43. height: 70%;
    44.  
    45. background-color:black;
    46.  
    47. position: absolute;
    48.  
    49. top: 20px;
    50.  
    51. left: 20%;
    52.  
    53. filter: contrast(15);
    54.  
    55. animation: hueRotate 5s linear infinite;
    56.  
    57. }
    58.  
    59. @keyframes hueRotate{
    60.  
    61. 0%{
    62.  
    63. filter: contrast(15) hue-rotate(0);
    64.  
    65. }
    66.  
    67. 100%{
    68.  
    69. filter: contrast(15) hue-rotate(360deg);
    70.  
    71. }
    72.  
    73. }
    74.  
    75. .circle{
    76.  
    77. width: 300px;
    78.  
    79. height: 300px;
    80.  
    81. /* background-color: #2196F3; */
    82.  
    83. position: absolute;
    84.  
    85. top: 0;
    86.  
    87. left: 50%;
    88.  
    89. margin-left: -150px;
    90.  
    91. filter: blur(8px);
    92.  
    93. animation: circleRotate 5s linear infinite;
    94.  
    95. }
    96.  
    97. @keyframes circleRotate{
    98.  
    99. 0%{
    100.  
    101. transform: rotate(0);
    102.  
    103. }
    104.  
    105. 100%{
    106.  
    107. transform: rotate(360deg);
    108.  
    109. }
    110.  
    111. }
    112.  
    113. .circle::before{
    114.  
    115. content: "";
    116.  
    117. width: 200px;
    118.  
    119. height: 200px;
    120.  
    121. background-color: #00ff6f;
    122.  
    123. position: absolute;
    124.  
    125. top: 50%;
    126.  
    127. left: 50%;
    128.  
    129. border-radius: 42% 38% 64% 49%/45%;
    130.  
    131. transform: translate(-50%,-50%);
    132.  
    133. }
    134.  
    135. .circle::after{
    136.  
    137. content: "";
    138.  
    139. width: 180px;
    140.  
    141. height: 178px;
    142.  
    143. background-color: black;
    144.  
    145. position: absolute;
    146.  
    147. top: 50%;
    148.  
    149. left: 50%;
    150.  
    151. border-radius: 50%;
    152.  
    153. transform: translate(-50%,-50%);
    154.  
    155. }
    156.  
    157. .number{
    158.  
    159. width: 200px;
    160.  
    161. height: 200px;
    162.  
    163. color: white;
    164.  
    165. font-size: 30px;
    166.  
    167. position: absolute;
    168.  
    169. top: 9%;
    170.  
    171. left: 55%;
    172.  
    173. z-index: 1;
    174.  
    175. line-height: 200px;
    176.  
    177. text-align: center;
    178.  
    179. margin-left: -100px;
    180.  
    181. }
    182.  
    183. .bubble_home{
    184.  
    185. width: 150px;
    186.  
    187. height: 50px;
    188.  
    189. background-color: #00ff6f;
    190.  
    191. position: absolute;
    192.  
    193. bottom: 0;
    194.  
    195. left: 45%;
    196.  
    197. border-radius: 150px 150px 15px 15px;
    198.  
    199. filter: blur(8px);
    200.  
    201. }
    202.  
    203. .bubble{
    204.  
    205. /* width: 20px;
    207. height: 20px;
    209. background-color:#00ff6f;
    211. border-radius: 100%; */
    212.  
    213. position: absolute;
    214.  
    215. left: 50%;
    216.  
    217. bottom: 0;
    218.  
    219. z-index: 1;
    220.  
    221. animation:bubbleMoveUp 5s ease-in-out infinite ;
    222.  
    223. }
    224.  
    225. @keyframes bubbleMoveUp{
    226.  
    227. 0%{
    228.  
    229. bottom: 0;
    230.  
    231. }
    232.  
    233. 100%{
    234.  
    235. bottom: calc(100% - 260px);
    236.  
    237. }
    238.  
    239. }
    240.  
    241. .bubble:nth-child(1){
    242.  
    243. width: 20px;
    244.  
    245. height: 20px;
    246.  
    247. background-color:#00ff6f;
    248.  
    249. border-radius: 100%;
    250.  
    251. animation-duration: 5s;
    252.  
    253. animation-delay: 1s;
    254.  
    255. left: 50%;
    256.  
    257. }
    258.  
    259. .bubble:nth-child(2){
    260.  
    261. width: 18px;
    262.  
    263. height: 18px;
    264.  
    265. background-color:#00ff6f;
    266.  
    267. border-radius: 100%;
    268.  
    269. animation-duration: 7s;
    270.  
    271. animation-delay: 3s;
    272.  
    273. left: 47%;
    274.  
    275. }
    276.  
    277. .bubble:nth-child(3){
    278.  
    279. width: 22px;
    280.  
    281. height: 22px;
    282.  
    283. background-color:#00ff6f;
    284.  
    285. border-radius: 100%;
    286.  
    287. animation-duration: 3s;
    288.  
    289. animation-delay: 0.5s;
    290.  
    291. left: 51%;
    292.  
    293. }
    294.  
    295. .bubble:nth-child(4){
    296.  
    297. width: 18px;
    298.  
    299. height: 18px;
    300.  
    301. background-color:#00ff6f;
    302.  
    303. border-radius: 100%;
    304.  
    305. animation-duration: 4s;
    306.  
    307. animation-delay: 0s;
    308.  
    309. left: 50%;
    310.  
    311. }
    312.  
    313. .bubble:nth-child(5){
    314.  
    315. width: 20px;
    316.  
    317. height: 18px;
    318.  
    319. background-color:#00ff6f;
    320.  
    321. border-radius: 100%;
    322.  
    323. animation-duration: 7.5s;
    324.  
    325. animation-delay: 3.6s;
    326.  
    327. left: 48%;
    328.  
    329. }
    330.  
    331. .bubble:nth-child(6){
    332.  
    333. width: 21px;
    334.  
    335. height: 21px;
    336.  
    337. background-color:#00ff6f;
    338.  
    339. border-radius: 100%;
    340.  
    341. animation-duration: 8s;
    342.  
    343. animation-delay: 1.5s;
    344.  
    345. left: 50%;
    346.  
    347. }
    348.  
    349.  
    350.  
    351. style>
    352.  
    353. head>
    354.  
    355. <body>
    356.  
    357. <div class="box">
    358.  
    359. div>
    360.  
    361. <div class="number">95.3%div>
    362.  
    363. <div class="contrast">
    364.  
    365. <div class="bubble">div>
    366.  
    367. <div class="bubble">div>
    368.  
    369. <div class="bubble">div>
    370.  
    371. <div class="bubble">div>
    372.  
    373. <div class="bubble">div>
    374.  
    375. <div class="bubble">div>
    376.  
    377. <div class="bubble">div>
    378.  
    379. <div class="bubble">div>
    380.  
    381. <div class="bubble">div>
    382.  
    383. <div class="bubble">div>
    384.  
    385. <div class="bubble">div>
    386.  
    387. <div class="bubble">div>
    388.  
    389. <div class="bubble">div>
    390.  
    391. <div class="bubble">div>
    392.  
    393. <span class="bubble_home">span>
    394.  
    395. <div class="circle">div>
    396.  
    397. div>
    398.  
    399. div>
    400.  
    401. body>
    402.  
    403. html>

  • 相关阅读:
    nat的基础配置（动态nat，nat server）
    一文搞懂cookie与session
    2023-10-14：用go语言，给定 pushed 和 popped 两个序列，每个序列中的 值都不重复， 只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时， 返回
    leetcode做题笔记179. 最大数
    举个栗子~Minitab 技巧（4）：自定义缩放图形或数据显示
    如何做好测试？（一）不就是功能测试和性能测试？
    代码随想录-014-剑指Offer707.设计链表
    redis能否替代threadlocal
    浅谈C++
    防火墙NAT实验（接上一个用认证实验）
  • 原文地址：https://blog.csdn.net/2301_81704123/article/details/140387705