2018年04月6日网站服务器迁移完成……

css3 实现酷炫加载中特效

Css 苏 demo 793℃ 0评论

废话不多说,上代码:

示例下载:test

 

<html>
<head>
    <title>css3动画实现超酷loading特效</title>
    <style type="text/css">
        .loading {
            -webkit-animation: fadein 2s;
            -moz-animation: fadein 2s;
            -o-animation: fadein 2s;
            animation: fadein 2s;
        }
        .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 {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            animation: 1.5s ease 0s normal none infinite running spin;
            border-color: rgba(255, 0, 0, 1) transparent;
            border-image: none;
            border-radius: 50px;
            border-style: solid;
            border-width: 20px;
            display: block;
            height: 1px;
            left: 50%;
            margin-left: -160px;
            position: absolute;
            top: 45%;
            width: 1px;
        }
        .spinner-text {
            color: #000;
            font-family: Arial;
            font-size: 20px;
            left: 50%;
            letter-spacing: 1px;
            margin-left: -100px;
            margin-top: 2px;
            position: absolute;
            top: 45%;
        }
        @keyframes spin {
            0%, 100% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(720deg) scale(0.6);
            }
        }
        @keyframes spin {
            0%, 100% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(720deg) scale(0.6);
            }
        }
    </style>
</head>
<body>
<div class="loading">
    <div class="spiner-wrapper">
        <div class="spinner-wrapper">
            <span class="spinner-text">数据加载中,请稍候...</span>
            <span class="spinner"></span>
        </div>
    </div>
</div>
</body>
</html>
打赏

转载请注明:苏demo的别样人生 » css3 实现酷炫加载中特效

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情