不错的页面跳转特效

    页面加载中,请稍候…body { background: #555}.loading { -webkit-animation: fadein 2s; -moz-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s}@-moz-keyframes fadein { from { opacity: 0 } to { opacity: 1 }}@-webkit-keyframes fadein { from { opacity: 0 } to { opacity: 1 }}@-o-keyframes fadein { from { opacity: 0 } to { opacity: 1 }}@keyframes fadein { from { opacity: 0 } to { opacity: 1 }}.spinner-wrapper { position: absolute; top: 0; left: 0; z-index: 300; height: 100%; min-width: 100%; min-height: 100%; background: rgba(255,255,255,0.93)}.spinner-text { position: absolute; top: 45%; left: 50%; margin-left: -100px; margin-top: 2px; color: #000; letter-spacing: 1px; font-size: 20px; font-family: Arial}.spinner { position: absolute; top: 45%; left: 50%; display: block; margin-left: -160px; width: 1px; height: 1px; border: 20px solid rgba(255,0,0,1); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; border-left-color: transparent; border-right-color: transparent; -webkit-animation: spin 1.5s infinite; -moz-animation: spin 1.5s infinite; animation: spin 1.5s infinite}@-webkit-keyframes spin { 0%,100% { -webkit-transform: rotate(0deg) scale(1) } 50% { -webkit-transform: rotate(720deg) scale(0.6) }}@-moz-keyframes spin { 0%,100% { -moz-transform: rotate(0deg) scale(1) } 50% { -moz-transform: rotate(720deg) scale(0.6) }}@-o-keyframes spin { 0%,100% { -o-transform: rotate(0deg) scale(1) } 50% { -o-transform: rotate(720deg) scale(0.6) }}@keyframes spin { 0%,100% { transform: rotate(0deg) scale(1) } 50% { transform: rotate(720deg) scale(0.6) }}

    页面加载中,请稍候…    

]]>

原创文章,作者:键盘游走者,如若转载,请注明出处:http://www.708034.com/2016/07/%e4%b8%8d%e9%94%99%e7%9a%84%e9%a1%b5%e9%9d%a2%e8%b7%b3%e8%bd%ac%e7%89%b9%e6%95%88/

发表评论

邮箱地址不会被公开。 必填项已用*标注