找回密码
当前位置：前端开发者 > CSS > 正文

CSS3制作足球网站loading效果

2018-10-12 分类：CSS 阅读(898) 评论(0)

前端与移动开发总结 前端开发模拟移动端 移动前端开发书籍
html 代码

<!DOCTYPE html>
<head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <title>`substitute(Filename(”, ‘Page Title’), ‘^.’, ‘\u&’, ”)`</title>
</head>
<style>
    .Loading {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.2);
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        /*多轮布局*/
        align-items: center;
        /*垂直*/
        justify-content: center;
        /*水平*/
        z-index: 9999
    }
    .laodingCon {
        width: 50px;
        height: 120px;
    }
    .ball {
        -webkit-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
        -ms-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
        -moz-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
        animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
        height: 50px;
        width: 50px;
        background: url(http://www.njgep.com/images/loading-icon.png) no-repeat center;
        background-size: 100%
    }
    .ballshadow {
        -webkit-animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
        animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
        background: #000;
        bottom: -90px;
        height: 15px;
        width: 50px;
        -webkit-animation-delay: 0;
        animation-delay: 0;
        border-radius: 100%;
    }
    @-webkit-keyframes ball {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        100% {
            -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
        }
    }
    @keyframes ball {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        100% {
            -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
        }
    }
    @-webkit-keyframes shadow {
        0% {
            opacity: 0.2;
            -webkit-transform: scale(0.3);
            transform: scale(0.3);
        }
        100% {
            opacity: 0.05;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    @keyframes shadow {
        0% {
            opacity: 0.2;
            -webkit-transform: scale(0.3);
            transform: scale(0.3);
        }
        100% {
            opacity: 0.05;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
</style>
<body>
    <div id=”_loading_page” class=”Loading” :style=”style”>
        <div class=”laodingCon”>
            <div class=”ball”></div>
            <div class=”ballshadow”></div>
        </div>
    </div>
</body>
</html>

web前端开发包括移动端吗 移动前端开发ppt 前端移动开发问题

赞(0)
前端开发者 » CSS3制作足球网站loading效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论