loading bar

时间：2016-05-20 19:33:25 阅读：161 评论：0 收藏：0 [点我收藏+]

标签：

技术分享

上面的loading条，想到的办法是用两个半圆覆盖实现，结果也就这么做了，可是明明一个圆就可以的，哎智商堪忧...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        margin: 100px auto;
        width: 664px;
        height: 664px;
    }
    .circle-wrap{
        position: relative;/* 相对定位 */
        width: 664px;
        height: 329px;/* 1/2高 */
        overflow: hidden;
    }
    .circle-con{
        position: absolute;/* 绝对定位 */
        width: 658px;
        height: 658px;
        border-width: 3px;
        border-style: solid;
        border-radius: 50%;
        border-color: #ed506c #ed506c #87c1ff #87c1ff;
        transform: rotate(135deg);
        transition: 1s;
    }
    .pan-bg{
        margin: -300px auto;
        width: 601px;
        height: 326px;
        background: url(./pan_bg.png) no-repeat;
    }
    .pan-txt{
        margin-top: 60px;
        text-align: center;
    }
    .pt-top{
        font-size: 168px;
        color: #ed506c;
        font-weight: bold;
    }
    .pt-cen{
        margin-top: -20px;
        font-size: 68px;
        color: #ed506c;
    }
    .pt-bot{
        font-size: 27px;
        color: #9ecdff;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="circle-wrap">
            <div class="circle-con"></div>
        </div>
        <div class="pan-bg"></div>
        <div class="pan-txt">
            <p class="pt-top">646</p>
            <p class="pt-cen">财商优秀</p>
            <p class="pt-bot">评估时间：2016.05.12</p>
        </div>
    </div>
</body>
</html>

loading bar

标签：

原文地址：http://www.cnblogs.com/jiujiaoyangkang/p/5513113.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行