送你一朵小紅花，願你勇敢的面對生活中的苦難，不要放棄愛與希望，藍天白雲，定會如期而至。
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:
* { margin: 0; padding: 0; box-sizing: border-box;}.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); }}今天的學習就到這裡了，如果想繼續學習提高，歡迎關注我，每天進步一點點，就是領先的開始，加油。如果覺得本文對你有幫助的話，歡迎轉發，評論，點讚！！！