CSS3實現一個旋轉的花朵

時間 2019-12-09

標籤 css3 css 實現一個旋轉花朵欄目 CSS 简体版

原文原文鏈接

要效果圖以下：
html

實現原理：
其實很簡單，就是中間的圓圈定位在中間，其餘的6個圓圈，進行不一樣的絕對定位，而後進行旋轉！
代碼：web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS實現的旋轉的花朵</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        *,*:before,*:after{
            box-sizing: border-box;
        }
        html body{
          height: 100%;
        }
        .container {
            background: #f39c12;
            height: 300px;
            position: relative;
        }
        .loader{
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
        .loader .spinnerBlock{
            -webkit-animation: rotate 1000ms linear infinite;
                     animation: rotate 1000ms linear infinite;
            -webkit-transform-origin: center;
                     transform-origin: center;
            display: block;
            width: 50px;
            height: 50px;
        }
        .loader span{
            display: block;
            border: 2px solid #fff;
            border-radius: 50%;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .loader soan:nth-child(1){
            border-color: #eee;
        }
        .loader span:nth-child(2){
            left: -18px;
            top: 10px;
        }
        .loader span:nth-child(3){
            left: -18px;
            top: -10px;
        }
        .loader span:nth-child(4){
            left: 0;
            top: -18px;
        }
        .loader span:nth-child(5){
             left: 18px;
            top: -10px;
          }
        .loader span:nth-child(6){
            left: 18px;
            top: 10px;
        }
        .loader span:nth-child(7){
            left: 0;
            top: 18px;
        }
        @-webkit-keyframes rotate {
            from{
                -webkit-transform: rotate(0deg);
                         transform: rotate(0deg);
            }
            to{
                -webkit-transform: rotate(360deg);
                         transform: rotate(360deg);
            }
        }
        @keyframes rotate {
            from{
                -webkit-transform: rotate(0deg);
                         transform: rotate(0deg);
            }
            to{
                -webkit-transform: rotate(360deg);
                         transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="loader">
            <div class="spinnerBlock">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</body>
</html>

運行代碼便能看到完整的旋轉效果！spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。