css+div实现泡泡loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css+div实现泡泡loading加载动画效果代码
代码标签: css div 泡泡 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; margin: 0; display: grid; place-items: center; background: radial-gradient(circle, #ddd, rgba(0,255,255,0.3)) } .bub { height: 90px; width: 200px; display: grid; grid-template-columns: auto auto auto auto auto; place-items: center; } #bubbles { height: 40px; width: 40px; border-radius: 50%; outline: 1px black solid; animation: in-out 2.5s infinite ease-in-out; position: relative; } #bubbles:after { content: ''; display: block; z-index: 2; height: 22px; width: 22px; background: rgba(255,255,255,0.5); border-radius: 50%; transform: translate(4px, 3px) } #bubbles:nth-child(1) { background: rgba(0,255,255,0.2); animation-delay: 500ms.........完整代码请登录后点击上方下载按钮下载查看
网友评论0