Heim  >  Artikel  >  Web-Frontend  >  Eine sehr coole CSS3-Animation jquery.loding, die darauf wartet, das Plug-in zu laden

Eine sehr coole CSS3-Animation jquery.loding, die darauf wartet, das Plug-in zu laden

高洛峰
高洛峰Original
2016-11-24 09:37:521447Durchsuche

Der Screenshot-Effekt scheint nicht sehr gut zu sein. Sie sollten den Code kopieren und lokal ausführen, um ihn zu erleben. Es ist ein moderner Browser erforderlich, der CSS3 unterstützt. Es gibt nicht viel Code und es sind grundsätzlich keine Kommentare erforderlich. Es ist einfach, das aufzurufen, was Sie brauchen.

[javascript] 
/*
* JQuery loading Plugin
* http://blog.csdn.net/sweetsuzyhyf
*
* Licensed same as jquery - MIT License
* http://www.opensource.org/licenses/mit-license.php
*
* Author: hyf
* Email: 36427561@qq.com
* Date: 2012-11-15
*/ 
$.loading = function (param) { 
    var option = $.extend({ 
        id: 'loading',      //唯一标识 
        parent: 'body',     //父容器 
        msg: ''             //提示信息 
 
    }, param || {}); 
    var obj = {}; 
    var html = &#39;<table id=&#39; + option.id + &#39; class="loading">&#39; + 
                    &#39;<tr>&#39; + 
                        &#39;<td>&#39; + 
                            &#39;<div class="circle">&#39; + 
                            &#39;</div>&#39; + 
                            &#39;<div class="circle1">&#39; + 
                            &#39;</div>&#39;; 
    if (option.msg) { 
        html += &#39;<div class="msg"><p class="shine">&#39; + option.msg + &#39;</p></div>&#39;; 
    } 
    html += &#39;</td></tr></table>&#39;; www.2cto.com
    var loading = $(html).appendTo(option.parent); 
 
    return { 
        play: function () { 
            $(&#39;.circle,.circle1,.shine&#39;, loading).toggleClass(&#39;stop&#39;); 
        }, 
        pause: function () { 
            $(&#39;.circle,.circle1,.shine&#39;, loading).toggleClass(&#39;stop&#39;); 
        }, 
        close: function () { 
            loading.remove(); 
        } 
    }; 
};
[css] 
/*加载等待样式*/ 
.loading 
{ 
    width:100%; 
    height:100%; 
    vertical-align:middle; 
} 
.loading td 
{ 
    text-align:center; 
} 
.loading .circle { 
    background-color: rgba(0,0,0,0); 
    border:5px solid rgba(0,183,229,0.9); 
    opacity:.9; 
    border-right:5px solid rgba(0,0,0,0); 
    border-left:5px solid rgba(0,0,0,0); 
    border-radius:50px; 
    box-shadow: 0 0 35px #2187e7; 
    width:50px; 
    height:50px; 
    margin:0 auto; 
    -webkit-animation:spinPulse 1s infinite linear; 
} 
.loading .circle1 { 
    background-color: rgba(0,0,0,0); 
    border:5px solid rgba(0,183,229,0.9); 
    opacity:.9; 
    border-left:5px solid rgba(0,0,0,0); 
    border-right:5px solid rgba(0,0,0,0); 
    border-radius:50px; 
    box-shadow: 0 0 15px #2187e7; 
    width:30px; 
    height:30px; 
    margin:0 auto; 
    position:relative; 
    top:-50px; 
    -webkit-animation:spinoffPulse 1s infinite linear; 
} 
@-webkit-keyframes spinPulse { 
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; } 
    50% { -webkit-transform:rotate(145deg); opacity:1;} 
    100% { -webkit-transform:rotate(-320deg); opacity:0; } 
} 
@-webkit-keyframes spinoffPulse { 
    0% { -webkit-transform:rotate(0deg); } 
    100% { -webkit-transform:rotate(360deg); } 
} 
.loading .stop { 
    -webkit-animation-play-state:paused; 
} 
.loading .msg 
{ 
    display:inline-block; 
    font-size: 12px; 
    position:relative; 
    top:-30px; 
    color:#ccc; 
    display:inline-block; 
} 
@-webkit-keyframes shine 
{ 
    0% 
    { 
        background-position: top left; 
    } 
    100% 
    { 
        background-position: top right; 
    } 
} 
.shine 
{ 
    background: #222 -webkit-gradient(linear, left top, right top, from(#000), to(#000), color-stop(0.5, #fff)) 0 0 no-repeat; 
    -webkit-background-size: 30% 100%; 
    color: rgba(48,196,233, 0.3); 
    -webkit-background-clip: text; 
    -webkit-animation-name: shine; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
} 
/*加载等待样式end*/


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Div-Popup-Effekt CSS und JSNächster Artikel:Div-Popup-Effekt CSS und JS