svg进钱投币存钱罐loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:svg进钱投币存钱罐loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; } svg { margin: 0 auto; display: block; } .CIT-loader { padding: 50px; background: #F0F0F0; } .CIT-loader__asset { overflow: visible; } .CIT-loader__pig { fill: #00B3BE; animation: fat-pig 1.6s ease-in-out infinite; } .CIT-loader__coin { fill: #FFCB4F; animation: coin-drop 1.6s ease-in-out infinite; z-index: 1000; } .CIT-loader__label { text-align: center; font-family: sans-serif; font-weight: bold; color: #00B3BE; margin-top: 5px; font-size: 14px; } @keyframes coin-drop { 0% { opacity: 0; transform: translateY(-100px); } 60% { opacity: 1; } 70% { transform: translateY(250px); } 100% { transform: translateY(250px); } } @keyframes fat-pig { 0% { transform: scale(1, 1) translateX(0) translateY(0); } 60% { transform: scale(1, 1) translateX(0) translateY(0); } 70% { transform: scale(1.05, 1.05) translateX(-16px) translateY(-16px); } 80% { transform: scale(1, 1) translateX(0) translateY(0); } 90% { transform: scale(1.05, 1.05) translateX(-16px) translateY(-16px); } 100% { transform: scale(1, 1) translateX(0) translateY(0); } } </style> </head> <body> <div class="CIT-loader"> <svg class="CIT-loader__asset" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" viewBox="0 0 512 512"> <path class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0