使用css实现圆形波浪效果图 纯CSS实现波浪移动效果的示例纯css3制作鼠标悬停波浪形状弹性下拉菜单特效源码css3实现逼真的波浪起伏动画特效源码CSS3实现的波浪闪动文字动画特效源码纯css3实现的音阶波浪loading加载动画特效源码CSS3实现文字波浪线效果示例代码纯css3实现的文字波浪动画特效源码纯CSS3实现波浪形菜单效果源码纯CSS3实现3D波浪形动画有波浪起伏的效果

 .wave { position: relative; width: 200px; height: 200px; background: @color; border: 5px solid #76daff; border-radius: 50%; overflow: hidden; } .wave-box::before, .wave-box::after { content: ''; position: absolute; top: 0; left: 50%; width: 400px; height: 400px; border-radius: 45%; -webkit-transform: translate(-50%, -70%); transform: translate(-50%, -70%); background: rgba(255, 255, 255, 0.5); -webkit-animation: rotate 10s linear infinite; animation: rotate 10s linear infinite; z-index: 10; } @keyframes rotate { 50% { -webkit-transform: translate(-50%, -75%) rotate(180deg); transform: translate(-50%, -75%) rotate(180deg); } 100% { -webkit-transform: translate(-50%, -70%) rotate(180deg); transform: translate(-50%, -70%) rotate(180deg); } } //或者使用预编译语言更方便，这里使用less .wave(@width; @height; @color) { position: relative; width: @width; height: @height; background: @color; border: 5px solid @color; border-radius: 50%; overflow: hidden; &::before, &::after { content: ''; position: absolute; top: 0; left: 50%; width: @width * 2; height: @height * 2; border-radius: 45%; transform: translate(-50%, -70%); background: rgba(255,255,255,0.5); animation: rotate 10s linear infinite; z-index: 10; } &::after { border-radius: 47%; background: rgba(255,255,255,0.5); animation: rotate 10s linear -5s infinite; z-index: 20; } } //调用 .wave-box { .wave(200px; 200px; #76daff); }