纯css实现蒙层loading效果

最新推荐文章于 2024-06-05 16:49:26 发布

alexcook2010

最新推荐文章于 2024-06-05 16:49:26 发布

阅读量586

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pcx105/p/9397105.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
        .span{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(0,0,0,0.4);
            height:100%;
            vertical-align: middle;
            border-radius: 1px;
            display:none
        }
        .help{
            width:1rem;
            height: 1rem;
            border: .05rem #fff solid;
            border-radius: 50%;
            -webkit-animation: rotation 1s ease-in-out infinite;
            -moz-animation: rotation 1s ease-in-out infinite;
            animation: rotation 1s ease-in-out infinite;
            position: absolute;
            top:50%;
            left:50%;
            margin-top:-.5rem;
            margin-left:-.5rem;
        }
        .help:after{
            width: .15rem;
            height: .15rem;
            background-color: #fff;
            border-radius: 100%;
            position: absolute;
            content: "";
            left:.06rem;
            top:.1rem;

        }
        @-webkit-keyframes rotation{
            0%{-webkit-transform: rotate(0deg);}
            100%{-webkit-transform: rotate(360deg);}
        }
        @-moz-keyframes rotation{
            0%{-moz-transform: rotate(0deg);}
            100%{-moz-transform: rotate(360deg);}
        }
        @keyframes rotation{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
    </style>
</head>
<body>
<div><button id="test" >点击</button></div>
<div class="span">
    <div class="help"></div>
</div>
<script>
    $("#test").click(function () {
        $('.span').show();
    })

</script>
</body>
</html>

转载于:https://www.cnblogs.com/pcx105/p/9397105.html

alexcook2010

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css实现蒙层loading效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <script type="text/javascript" src="http://code.jquery...
复制链接

扫一扫