纯css圆点跳动动画loading加载效果
代码语言:html
所属分类:加载滚动
代码描述:纯css圆点跳动动画loading加载效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ padding:0; margin:0; width:100%; height:100vh; background:radial-gradient(#9b59b6, #8e44ad); } .wrapper{ width:200px; height:60px; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); } .circle{ width:20px; height:20px; position: absolute; border-radius: 50%; background-color: #fff; left:15%; transform-origin: 50%; animation: circle .5s alternate infinite ease; } @keyframes circle{ 0%{ top:60px; height:5px; border-radius: 50px 50px 25px 25px; transform: scaleX(1.7); } 40%{ height:20px; border-radius: 50%; transform: scaleX(1); } 100%{ top:0%; } } .circle:nth-child(2){ left:45%; animation-delay: .2s; } .circle:nth-child(3){ left:auto; right:15%; animation-delay: .3s; } .shadow{ width:20px; height:4px; border-radius: 50%; background-color: rgba(0,0,0,.5); position: absolute; top:62px; transform-origin: 50%; z-index: -1; left:15%; filter: blur(1px); animation: shadow .5s alternate infinite ease; } @keyframes shadow{ 0%{ transform: scaleX(1.5); } 40%{ transform: scaleX(1); opacity: .7; } 100%{ transform: scaleX(.2); opacity: .4; } } .shadow:nth-child(4){ left: 45%; animation-delay: .2s } .shadow:nth-child(5){ left:auto; right:15%; animation-delay: .3s; } .wrapper span{ position: absolute; top:75px; font-family: 'Lato'; font-size: 20px; letter-spacing: 12px; color: #fff; left:15%; } /* footer */ footer { background-color: #222; color: #fff; font-size: 14px; bottom: 0; p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0