css实现炫酷loading页面加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现炫酷loading页面加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no"> <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-a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0