Kafka使用詳解-Consumer API(手動提交offset)-非同步提交offset(offset自動維護)
阿新 • • 發佈:2021-01-09
此文轉載自:https://blog.csdn.net/qq_23853743/article/details/112264162
送你一朵小紅花,願你勇敢的面對生活中的苦難,不要放棄愛與希望,藍天白雲,定會如期而至。
視訊:
B站視訊連結:https://www.bilibili.com/video/BV1xX4y1M7yM
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>送你一朵小紅花:公眾號AlbertYang</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 容器 --> <div class="box"> <!-- 花朵 --> <div class="flower"> <!-- 花瓣 --> <div class="petal" style="--x:0"></div> <div class="petal" style="--x:1"></div> <div class="petal" style="--x:2"></div> <div class="petal" style="--x:3"></div> <div class="petal" style="--x:4"></div> <div class="petal" style="--x:5"></div> <!-- 花心 --> <div class="circle"></div> </div> </div> </body> </html>
CSS
/* 清除瀏覽器設定的預設邊距, 使邊框和內邊距的值包含在元素的width和height內 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 使用flex佈局,讓內容垂直和水平居中 */ .box { display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* 花朵 */ .flower { position: relative; width: 80px; height: 80px; transform-origin: 100% 100%; animation: rotate 3s linear infinite; } /* 花瓣 */ .petal { display: block; /* 花瓣的寬高等於花朵的寬高 */ width: 80px; height: 80px; background: red; border-radius: 0 70px; position: absolute; /* 讓不同的花瓣旋轉為花朵 */ transform-origin: 100% 100%; transform: rotate(calc(var(--x) * 60deg)); } /* 花心 */ .circle { width: 100px; height: 100px; position: absolute; background: #fff200; border-radius: 50%; left: 30px; top: 30px; box-shadow: 0 0 50px yellow; background-image: radial-gradient(at 20% 30%, #fffa65, #f1c40f, #f1dc4b); } /* 花朵旋轉動畫 */ @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
![](https://img.796t.com/res/2020/12-25/08/ce4abafd6ed38f4a4266ba43d33ef184.gif)
今天的學習就到這裡了,由於本人能力和知識有限,如果有寫的不對的地方,還請各位大佬批評指正。有什麼不明白的地方歡迎給我留言,如果想繼續學習提高,歡迎關注我,每天進步一點點,就是領先的開始,加油。如果覺得本文對你有幫助的話,歡迎轉發,評論,點贊!!!