css实现圆形图像周边波纹扩散动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现圆形图像周边波纹扩散动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { align-items:center; background:#222; display:flex; height:100%; justify-content:center; margin:0 } html { height:100% } .avatar { height:200px; position:relative; width:200px } .avatar img { border-radius:9999px; height:100%; position:relative; width:100%; z-index:2 } @-webkit-keyframes cycle-colors { 0% { border-color:hsl(0,100%,50%) } 25% { border-color:hsl(90,100%,50%) } 50% { border-color:hsl(180,100%,50%) } 75% { border-color:hsl(270,100%,50%) } 100% { border-color:hsl(360,100%,50%) } }@keyframes cycle-colors { 0% { border-color:hsl(0,100%,50%) } 25% { border-color:hsl(90,100%,50%) } 50% { border-color:hsl(180,100%,50%) } 75% { border-color:hsl(270,100%,50%) } 100% { border-color:hsl(360,100%,50%) } }@-webkit-keyframes pulse { to { opacity:0; transform:scale(1) } }@keyframes pulse { to { opacity:0; transform:scale(1) } }.avatar::be.........完整代码请登录后点击上方下载按钮下载查看
网友评论0