<<查看全部Demo

CSS3 loading效果

        #modal div span {
            animation: 1s ease 0s alternate  infinite  iframeLoader;
            background: #333;
            border-radius: 50px;
            display: inline-block;
            height: 10px;
            margin: 50px 4px;
            vertical-align: middle;
            width: 10px;
        }
        #modal div span:nth-of-type(2) {
            animation-delay: 0.3s;
        }
        #modal div span:nth-of-type(3) {
            animation-delay: 0.6s;
        }
        @keyframes iframeLoader {
            0% {
                height: 10px;
                opacity: 0.9;
                transform: translateY(0px);
                width: 10px;
            }
            100% {
                height: 24px;
                opacity: 0.1;
                transform: translateY(-21px);
                width: 24px;
            }
        }