leetCode刷題《1672. 最富有客戶的資產總量》
阿新 • • 發佈：2021-01-13
此文轉載自：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); } }
今天的學習就到這裡了，由於本人能力和知識有限，如果有寫的不對的地方，還請各位大佬批評指正。有什麼不明白的地方歡迎給我留言，如果想繼續學習提高，歡迎關注我，每天進步一點點，就是領先的開始，加油。如果覺得本文對你有幫助的話，歡迎轉發，評論，點贊！！！