一、气泡
效果:
body{ background: #dd5e9d; height: 100%; } .paopao { position: absolute; width: 200px; height: 200px; border-radius: 50%; background-image: radial-gradient(rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 1) 80%); transform: translateX(50%); will-change: top, left; /*增强页面渲染性能*/ } .paopao::after { content: ''; position: absolute; top: 20%; right: 25%; width: 33%; height: 33%; border: 3px solid; border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent; border-radius: 50%; transform: rotate(45deg); }