master

分支 (1)

管理

管理

master

CSS3-animation
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3动画</title>

    <style type="text/css">
        body{
            background: #abcdef;
        }
        .main{
            position: relative;
            width: 760px;
            height: 760px;
            margin: auto;
         }
         .center{
             position: absolute;
             top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%;
             margin:  auto;
             background-repeat: no-repeat;
             background-position: center;
         }
         .inner{
            background-image: url("images/circle_inner.png");
         }

        .middle{
            background-image: url("images/circle_middle.png");
        }
        .outer{
            background-image: url("images/circle_outer.png");
        }
        .imooc{
            background-image: url("images/imooc.png");
        }

    </style>

</head>
<body>
    <div class="main">
        <div class="center inner"></div>
        <div class="center middle"></div>
        <div class="center outer"></div>
        <div class="center imooc"></div>
    </div>
</body>
</html>