css实现loading加载走光文字拆分动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现loading加载走光文字拆分动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <style> @-webkit-keyframes gradient { 50% { background-position: 100% 0 }} @keyframes gradient { 50% { background-position: 100% 0 }} @-webkit-keyframes img { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); } } @keyframes img { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin-reverse { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); } } @keyframes spin-reverse { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } #loader-wrapper { background-image: linear-gradient(45deg, rgb(90, 54, 148) 0%, rgb(19, 189, 206) 33%, rgb(0, 148, 217) 66%, rgb(111, 199, 181) 100%); background-size: 400%; background-position: 0% 100%; -webkit-animation: gradient 7.5s ease-in-out infinite; animation: gradient 7.5s ease-in-out infinite; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; overflow: hidden; } #loader { display: flex; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fff; animation: spin 1.7s linear infinite; z-index: 11; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fff; animation: spin-reverse .6s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fff; animation: spin 1s linear infinite; } #loader img { margin: auto; align-items: center; display: table-cell; vertical-align: middle; text-align: center; animation: img 1.7s linear infinite; } .loader { top: 76%; left: 50%; -webkit-transform: translate(-50%,-50%); -mos-transform: translate(-50%,-50%); transform: translate(-50%,-50%); text-align: center; -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; width: 100%; max-width: 990px; overflow: visible; z-index: 99; } .loader,.loader div { position: absolute; height: 36px } .loader div { width: 30px; margin: 0 20px; opacity: 0; animation: move 2s linear infinite; -o-animation: move 2s linear infinite; -moz-animation: move 2s linear infinite; -webkit-animation: move 2s linear infinite; transform: rotate(180deg); -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0