写一个盲盒冒泡泡的css特效

以下是一个简单的盲盒冒泡泡的CSS特效： HTML代码： ``` ``` CSS代码： ``` .container { position: relative; width: 200px; height: 200px; } .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f5a623; border-radius: 50%; animation: box-rotate 2s linear infinite; } .bubble { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background-color: #fff; border-radius: 50%; animation: bubble-float 1s ease-in-out infinite; } @keyframes box-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes bubble-float { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -80%) scale(1.2); opacity: 0.5; } 100% { transform: translate(-50%, -100%) scale(1); opacity: 0; } } ``` 解释： - `.container`：容器，设置为相对定位。 - `.box`：盲盒，设置为绝对定位，并且使用 `border-radius: 50%` 将其变成圆形。使用 `animation` 属性让盲盒旋转。 - `.bubble`：冒泡泡，设置为绝对定位，并且使用 `transform: translate(-50%, -50%)` 让其居中。使用 `animation` 属性让冒泡泡浮动。 - `@keyframes`：定义动画效果。`box-rotate` 让