css实现三个彩色圆点跳动loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现三个彩色圆点跳动loading加载动画效果代码
代码标签: css 三个 彩色 圆点 跳动 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #2c3e50; } .loader { display: flex; align-items: center; } .dot { width: 20px; height: 20px; background-color: #e74c3c; border-radius: 50%; margin: 0 5px; animation: leap 1s ease-in-out infinite, colorChange 2s infinite alternate; } .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes leap { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-20px); } } @keyframes colorChange { 0%, 100% { background-color: #e74c3c; } 50% { background-color: #3498db; } } </style>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0