css实现堆方块loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现堆方块loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @-webkit-keyframes mainAnimation { 0% { width: 50px; transform: translateX(0px) translateY(0px) rotate(0deg); } 20% { width: 50px; transform: translateX(0px) translateY(0px) rotate(0deg); } 40% { width: 150px; transform: translateX(-50px) translateY(0px) rotate(0deg); } 60% { width: 150px; transform-origin: bottom right; transform: translateX(-150px) translateY(0px) rotate(90deg); } 80% { width: 50px; transform: translateX(-25px) translateY(0px) rotate(90deg); } 100% { width: 50px; transform: translateX(-50px) translateY(0px) rotate(90deg); } } @keyframes mainAnimation { 0% { width: 50px; transform: translateX(0px) translateY(0px) rotate(0deg); } 20% { width: 50px; transform: translateX(0px) translateY(0px) rotate(0deg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0