css实现板连loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现板连loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .container { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: flex; } .dash { margin: 0 15px; width: 35px; height: 15px; border-radius: 8px; background: #FF2CBD; box-shadow: 0 0 10px 0 #FECDFF; } .uno { margin-right: -18px; -webkit-transform-origin: center left; transform-origin: center left; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } .dos { -webkit-transform-origin: center right; transform-origin: center right; -webkit-animation: spin2 3s linear infinite; animation: spin2 3s linear infinite; -webkit-animation-delay: .2s; animation-delay: .2s; } .tres { -webkit-transform-origin: center right; transform-origin: center right; -webkit-animation: spin3 3s linear infinite; animation: spin3 3s linear infinite; -webkit-animation-delay: .3s; animation-delay: .3s; } .cuatro { -webkit-transform-origin: center right; transform-origin: center right; -webkit-animation: spin4 3s linear infinite; animation: spin4 3s linear infinite; -webkit-animation-delay: .4s; animation-delay: .4s; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 30% { -webkit-transform: rotate(370deg); transform: rotate(370deg); } 35% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 30% { -webkit-transform: rotate(370deg); transform: rotate(370deg); } 35% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 30% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } 35% { -webkit-transform: rotate(-190deg); transform: rotate(-190deg); } 40% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } 78% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } 95% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } 98% { -webkit-transform: rotate(-370deg); transform: rotate(-370deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes spin2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 30% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } 35% { -webkit-transform: rotate(-190deg); transform: rotate(-190deg); } 40% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } 78% { -webkit-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0