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

前端CSS3 加载loading 动画效果

2018-09-29 23:25:14 分类：CSS 阅读(307) 评论(0)

flex前端开发环境搭建 如何建立前端开发的环境 android开发前端开发环境搭建

代码片段 1

<!DOCTYPE html>
<html lang=”en” id=”html”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”format-detection” content=”telephone=no”>
    <meta name=”viewport” content=”width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
    <title>懒人原生css3 加载loading 动画效果</title>
    <style>
        body {
            width: 1400px;
            height: 900px;
            background-color: #000;
        }
        a {
            display: block;
            width: 70px;
            height: 70px;
            background-color: #007750;
            position: fixed;
            left: 50%;
            top: 50%;
            border-radius: 70px;
        }
        a .line1 {
            width: 80px;
            height: 80px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -42px 0 0 -42px;
            border: 2px solid #fff;
            border-radius: 80px 80px 80px 80px;
            border-right-color: transparent;
            border-top-color: transparent;
        }
        @-webkit-keyframes line1 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            20% {
                -webkit-transform: rotate(720deg);
                transform: rotate(720deg);
            }
            50% {
                -webkit-transform: rotate(1080deg);
                transform: rotate(1080deg);
            }
            75% {
                -webkit-transform: rotate(1300deg);
                transform: rotate(1300deg);
            }
            100% {
                -webkit-transform: rotate(2500deg);
                transform: rotate(2500deg);
            }
        }
        @keyframes line1 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            20% {
                -webkit-transform: rotate(720deg);
                transform: rotate(720deg);
            }
            50% {
                -webkit-transform: rotate(1080deg);
                transform: rotate(1080deg);
            }
            75% {
                -webkit-transform: rotate(1300deg);
                transform: rotate(1300deg);
            }
            100% {
                -webkit-transform: rotate(2500deg);
                transform: rotate(2500deg);
            }
        }
        a .line1 {
            -webkit-animation: line1 10s ease-in-out 1s infinite alternate;
            animation: line1 10s ease-in-out 1s infinite alternate;
        }
    </style>
</head>
<body id=”body”>
    <a href=”#”>
        <div class=”line1″></div>
    </a>
</body>
</html>

web前端集成开发环境 前端环境开发搭建 前端开发环境分析

» 本文来自：前端开发者 » 《前端CSS3 加载loading 动画效果》
» 本文链接地址：https://www.rokub.com/5960.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论