CSS3实现大小不一的粒子旋转加载动画

Stella ·
更新时间:2024-11-10
· 598 次阅读

先看看效果图,像是气泡在上升:

CSS Code复制内容到剪贴板 #load3,      #loader3 {       font-size: 20px;       margin: 80px 50px;       float: left;       width: 1em;       height: 1em;       border-radius: 50%;       position: relative;       text-indent: -9999em;       -webkit-animation: load3 1.3s infinite linear;       animation: load3 1.3s infinite linear;      }      @-webkit-keyframes load3 {         0%,         100% {           box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,                       3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,                       0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,                       -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;         }         12.5% {           box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,                       3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,                       0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,                       -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;         }         25% {            box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,                        3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,                        0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,                        -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;         }         37.5% {             box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,                         3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,                         0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,                         -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;        }        50% {            box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,                        3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,                        0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,                        -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;        }        62.5% {            box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,                        3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,                        0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,                        -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;        }        75% {           box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,                       3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,                       0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,                       -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;        }        87.5% {           box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,                       3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,                       0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,                       -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;        }      }      @keyframes load3 {        0%,        100% {            box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00,                        3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,                        0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,                        -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00;        }        12.5% {            box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,                        3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,                        0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,                        -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;        }        25% {            box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00,                        3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,                        0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,                        -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;        }        37.5% {           box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,                       3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,                       0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,                       -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;         }         50% {            box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,                        3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,                        0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,                        -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;         }         62.5% {             box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,                         3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,                         0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,                         -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;        }        75% {            box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,                        3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,                        0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,                        -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;         }         87.5% {             box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,                         3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,                         0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,                         -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;        }      }        



CSS

需要 登录 后方可回复, 如果你还没有账号请 注册新账号