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

CSS3制作的loading

2018-10-24 分类：CSS 阅读(683) 评论(0)
前端快速开发框架说明书
开发前端框架的原则
手机网站前端开发框架

技术：css3 animation，transfrom:rotate(), transform:scale()

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>loading</title>
    <style>
        .loading {
            width: 100px;
            height: 100px;
            border: 20px solid #ccc;
            border-radius: 50%;
            animation: loading 2s ease-out infinite;
            position: relative;
            margin-top: 50px;
        }
        .loading:before,
        .loading:after {
            content: “”;
            width: 20px;
            height: 20px;
            background: #ccc;
            border-radius: 50%;
            position: absolute;
            z-index: 2;
        }
        .loading:before {
            top: -36px;
            left: -20px;
            animation: showHiden 2s ease-out infinite;
            transform: scale(0);
        }
        .loading:after {
            top: -36px;
            right: -20px;
            animation: showHiden 2s ease-out infinite;
            transform: scale(0);
        }
        .loading i {
            display: block;
            width: 100px;
            height: 100px;
            border: 20px solid #fff;
            position: absolute;
            top: -20px;
            left: -20px;
            border-radius: 50%;
            border-color: #fff transparent transparent transparent;
            animation: showHidens 2s ease-out infinite;
        }
        @keyframes loading {
            0% {
                transform: rotate(0deg);
                border-radius: 0 0 50% 50%;
            }
            20% {
                transform: rotate(0deg);
                border-radius: 0 0 50% 50%;
            }
            30% {
                transform: rotate(0deg);
                border-radius: 50%;
            }
            70% {
                transform: rotate(360deg);
                border-radius: 0 0 50% 50%;
            }
            100% {
                transform: rotate(360deg);
                border-radius: 0 0 50% 50%;
            }
        }
        @-webkit-keyframes loading
        /*Safari and Chrome*/
            {
            0% {
                transform: rotate(0deg);
                border-radius: 0 0 50% 50%;
            }
            20% {
                transform: rotate(0deg);
                border-radius: 0 0 50% 50%;
            }
            30% {
                transform: rotate(0deg);
                border-radius: 50%;
            }
            70% {
                transform: rotate(360deg);
                border-radius: 0 0 50% 50%;
            }
            100% {
                transform: rotate(360deg);
                border-radius: 0 0 50% 50%;
            }
        }
        @keyframes showHiden {
            0% {
                transform: scale(1);
            }
            20% {
                transform: scale(1);
            }
            30% {
                transform: scale(0);
            }
            70% {
                transform: scale(0);
            }
            100% {
                transform: scale(1);
            }
        }
        @-webkit-keyframes showHiden
        /*Safari and Chrome*/
            {
            0% {
                transform: scale(1);
            }
            20% {
                transform: scale(1);
            }
            30% {
                transform: scale(0);
            }
            70% {
                transform: scale(0);
            }
            100% {
                transform: scale(1);
            }
        }
        @keyframes showHidens {
            0% {
                border-radius: 0;
                width: 142px;
                left: -40px;
            }
            20% {
                border-radius: 0;
                width: 142px;
                left: -40px;
            }
            30% {
                border-radius: 50%;
            }
            70% {
                border-radius: 0;
                width: 142px;
                left: -40px;
            }
            100% {
                border-radius: 0;
                width: 142px;
                left: -40px;
            }
        }
        @-webkit-keyframes showHidens
        /*Safari and Chrome*/
            {
            0% {
                border-radius: 0;
                width: 142px;
                left: -40px;
            }
            20% {
                border-radius: 0;
                width: 142px;
                left: -40px;
            }
            30% {
                border-radius: 50%;
            }
            70% {
                border-radius: 0;
                width: 142px;
                left: -40px;
            }
            100% {
                border-radius: 0;
                width: 142px;
                left: -40px;
            }
        }
    </style>
</head>
<body>
    <div class=”loading”><i></i></div>
</body>
</html>
前端开发一般用什么框架
前端语言移动开发框架
ui设计 web前端开发框架
赞(0)
前端开发者 » CSS3制作的loading
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论