css实现多个点四面八方汇聚loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现多个点四面八方汇聚loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> a{ background: #13A3A5; padding:5px; margin:10px; display:block; font-weight:100; cursor:pointer; font-size:1.5em; float:left; text-decoration:none; font-size:18px; color:white } *{ margin:0em; padding:0em; } body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: #403833; font-family: 'Open Sans'; font-weight: 100; color:#f2f2f2; font-size:100%; margin:0em; padding:0em; } /* Start the loader code, first, let's align it the center of screen */ .loader { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -mos-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align:center; /* disable selection and cursor changes */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor:default; } /* Text align it the center of screen and connect the looped animation for 2 seconds */ .text{ position: absolute; left: -1.3em; top: -1.7em; -webkit-animation: text 2s infinite; -moz-animation: text 2s infinite; -moz-animation: text 2s infinite; -ms-animation: text 2s infinite; -o-animation: text 2s infinite; animation: text 2s infinite; } /* Set for the first layer vertical position */ .vertical{ position:absolute; top: -1.84em; left: -0.4em; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /* Set for the second layer horizontal position */ .horizontal{ position:absolute; top:0em; left:0em; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } /* The next two classes do mirror for animation */ .circlesup{ position:absolute; top: -4.7em; right: 12.1em; } .circlesdwn{ position:absolute; top:2.5em; right:-13.5em; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* Create a container for our circles, rotate it 45 degrees and set animation*/ .circle { position: absolute; width: 15em; height: 15em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: orbit 2s infinite; -moz-animation: orbit 2s infinite; -moz-animation: orbit 2s infinite; -ms-animation: orbit 2s infinite; -o-animation: orbit 2s infinite; animation: orbit 2s infinite; z-index:5; } /* Style's of our circles */ .circle:after { content: ''; position: absolute; width: 2em; height: 2em; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; background: #13A3A5; /* Pick a color 1*/ } .circle:nth-child(2) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; -ms-animation-delay: 100ms; -o-animation-delay: 100ms; animation-delay: 100ms; z-index:4; } .circle:nth-child(2):after { background: #56bebf; /* Pick a color 2*/ -webkit-transform: scale(0.8,0.8); -moz-transform: scale(0.8,0.8); -ms-transform: scale(0.8,0.8); -o-transform: scale(0.8,0.8); transform: scale(0.8,0.8); } .circle:nth-child(3) { -webkit-animation-delay: 225ms; -moz-animation-delay: 225ms; -ms-animation-delay: 225ms; -o-animation-delay: 225ms; animation-delay: 225ms; z-index:3; } .circle:nth-child(3):after { background: #ffa489; /* Pick a color 3*/ -webkit-transform: scale(0.6,0.6); -moz-transform: scale(0.6,0.6); -ms-transform: scale(0.6,0.6); -o-transform: scale(0.6,0.6); transform: scale(0.6,0.6); } .circle:nth-child(4) { -webkit-animation-delay: 350ms; -moz-animation-delay: 350ms; -ms-animation-delay: 350ms; -o-animation-delay: 350ms; animation-delay: 350ms; z-index:2; } .circle:nth-child(4):after { background: #ff6d37; /* Pick a color 4*/ -webkit-transform: scale(0.4,0.4); -moz-transform: scale(0.4,0.4); -ms-transform: scale(0.4,0.4); -o-transform: scale(0.4,0.4); transform: scale(0.4,0.4); } .circle:nth-child(5) { -webkit-animation-delay: 475ms; -moz-animation-delay: 475ms; -ms-animation-delay: 475ms; -o-animation-delay: 475ms; animation-delay: 475ms; z-index:1; } .circle:nth-child(5):after { background: #DB2F00; /* Pick a color 5*/ -webkit-transform: scale(0.2,0.2); -moz-transform: scale(0.2,0.2); -ms-transform: scale(0.2,0.2); -o-transform:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0