水墨风格的加载页面

时间：2017-09-12 20:56:02 阅读：179 评论：0 收藏：0 [点我收藏+]
标签：key col wrap meta width body back bsp load
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrap-load{
            width: 163px;
            height: 203px;
            animation: scale 20s;
            animation-fill-mode:forwards;

        }

        @-webkit-keyframes scale {
                  0% {
                      background: url(images/load.png) 0 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 8% {
                      background: url(images/load.png) 0 0;
                    transform: scale(0);
                        opacity: 0; }       
                 9% {
                      background: url(images/load.png) -163px 0;
                    transform: scale(0);
                        opacity: 0; }
                 10% {
                      background: url(images/load.png) -163px 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 18% {
                      background: url(images/load.png) -163px 0;
                    transform: scale(0);
                        opacity: 0; }  
                 19% {
                      background: url(images/load.png) -326px 0;
                    transform: scale(0);
                        opacity: 0; }            
                 20% {
                      background: url(images/load.png) -326px 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 28% {
                      background: url(images/load.png) -326px 0;
                    transform: scale(0);
                        opacity: 0; }
                 29% {
                      background: url(images/load.png) -489px 0;
                    transform: scale(0);
                        opacity: 0; }       
                 30% {
                      background: url(images/load.png) -489px 0;
                    transform: scale(1);
                        opacity: 1; }
                 38% {
                      background: url(images/load.png) -489px 0;
                    transform: scale(0);
                        opacity: 0; }
                 39% {
                      background: url(images/load.png) -647px 0;
                    transform: scale(0);
                        opacity: 0; }       
                 40% {
                      background: url(images/load.png) -647px 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 48% {
                      background: url(images/load.png) -647px 0;
                    transform: scale(0);
                        opacity: 0; }
                 49% {
                      background: url(images/load.png) -803px 0;
                    transform: scale(0);
                        opacity: 0; }
                 50% {
                      background: url(images/load.png) -803px 0;
                    transform: scale(1);
                        opacity: 1; }
                 58% {
                      background: url(images/load.png) -803px 0;
                    transform: scale(0);
                        opacity: 0; }
                 59% {
                      background: url(images/load.png) 0 -219px;
                    transform: scale(0);
                        opacity: 0; }
                 60% {
                      background: url(images/load.png) 0 -219px;
                    transform: scale(1.5);
                        opacity: 1; }
                 68% {
                      background: url(images/load.png) 0 -219px;
                    transform: scale(0);
                        opacity: 0; }
                 69% {
                      background: url(images/load.png) -163px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 70% {
                      background: url(images/load.png) -163px -219px;
                    transform: scale(1.5);
                        opacity: 1; }
                 78% {
                      background: url(images/load.png) -163px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 79% {
                      background: url(images/load.png) -326px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 80% {
                      background: url(images/load.png) -326px -219px;
                    transform: scale(1.5);
                        opacity: 1; }
                 88% {
                      background: url(images/load.png) -326px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 89% {
                      background: url(images/load.png) -489px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 90% {
                      background: url(images/load.png) -489px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 100% {
                      background: url(images/load.png) -489px -219px;
                    transform: scale(1);
                        opacity: 1; }
                 
        }
    </style>

</head>
<body>
    <!-- 163 326 489 647 803 -->
    <!-- 219 -->
    <div id=‘wrap-load‘></div>
</body>
</html>
水墨风格的加载页面
标签：key col wrap meta width body back bsp load
原文地址：http://www.cnblogs.com/chenss/p/7511789.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行