css3を使用して円回転アニメーションを作成する方法（完全なコードは添付されています）

CSS3 の普及により、人々が閲覧する Web ページはますます多様化しており、フロントエンド開発者は人間とコンピューターの対話やユーザー エクスペリエンスにますます注目するようになりました。冒頭のテキストからその後の絵、そして最近のアニメーションの特殊効果に至るまで、ウェブページに対するこだわりはますます高まっています。そこで今回は CSS3 を使用して回転アニメーションを作成する方法を紹介します。この記事では、CSS3 を使用して回転アニメーションを作成する方法を、その具体的な手順に焦点を当てて紹介します。この記事の内容はコンパクトなので、何かを得ることができれば幸いです。

#例を図に示します

##css3 を使用して回転を作成するアニメーションのアイデア

最初に、これら 8 つのアイコンを描画するために div を使用する必要があります。観察すると、8 つのアイコンが 4 つの div グループに分割でき、円は次のように分割できることがわかります。 8 等分に分割することで、その後の作業が容易になります。垂直に対応する 2 つの円を同じ div に配置します。それらを回転するには、CSS3 の回転属性を使用する必要があります。最初の div は静止したままで、2 番目の div は 45 度回転します。次の div は 45 度回転する必要があります。 ° レイアウトを実現するために、前の div よりも多くの値を追加します。

css3 を使用して回転アニメーションを作成する手順

ステップ 1: 8 つのアイコンを描画し、4 つの div に設定します。

<div class="out_circle">
    <div class="slide"></div>
    <div class="nav_circle r1">
        <div class="img_top img">
            <img  src="images/menu.png" alt="css3を使用して円回転アニメーションを作成する方法（完全なコードは添付されています）" >
            <a href="#">产品中心</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_01.png" alt="css3を使用して円回転アニメーションを作成する方法（完全なコードは添付されています）" >
            <a href="#">官方网站</a>
        </div>
    </div>
    <div class="nav_circle r2">
        <div class="img_top img">
            <img  src="images/menu_02.png" alt="css3を使用して円回転アニメーションを作成する方法（完全なコードは添付されています）" >
            <a href="#">代理查询</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_03.png" alt="css3を使用して円回転アニメーションを作成する方法（完全なコードは添付されています）" >
            <a href="#">后台登录</a>
        </div>
    </div>
    <div class="nav_circle r3">
        <div class="img_top img">
            <img  src="images/menu_04.png" alt="css3を使用して円回転アニメーションを作成する方法（完全なコードは添付されています）" >
            <a href="#">公司资质</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_05.png" alt="css3を使用して円回転アニメーションを作成する方法（完全なコードは添付されています）" >
            <a href="#">质检报告</a>
        </div>
    </div>
    <div class="nav_circle r4">
        <div class="img_top img">
            <img  src="images/menu_06.png" alt="css3を使用して円回転アニメーションを作成する方法（完全なコードは添付されています）" >
            <a href="#">代理登录</a>
        </div>
        <div class="img_bottom img" >
            <img  src="images/menu_07.png" alt="css3を使用して円回転アニメーションを作成する方法（完全なコードは添付されています）" >
            <a href="#">代理授权</a>
        </div>
    </div>
</div>

ステップ 2: CSS3 レイアウトを使用する

 .out_circle{
            width:440px;
            height:440px;
            border:1px solid;
            border-radius:50%; 
            margin:30px auto 0 auto;
            position: relative;
            }
            .nav_circle{
            width:110px;
            height:440px;
            float:left;
            position:absolute;
            top:0;
            left:169px; 
            text-align:center;
            }
            .img_top{
            top:-27px;
            -webkit-transform: rotate(0deg);
        }
        .img_bottom{
            top:316px;
            -webkit-transform: rotate(0deg);
        }
        .img_top img,.img_bottom  img{
            width:77px;
            height: 77px;
        }
         .img_top,.img_bottom{
            position: relative;
            z-index:1;
        }
        .nav_circle .img a{
            position: absolute;
            top:10px;
            left:94px;
            width: 52px;
        }
        .r1{
            transform:rotate(0deg) skew(0deg) scale(1);
            -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(0deg) skew(0deg) scale(1); 
            animation: rotate 10s linear infinite;
            -webkit-animation:rotate 10s linear infinite;
            -moz-animation:rotate 10s linear infinite;
            -o-animation:rotate 10s linear infinite;
        }
        .r1 .img{
            transform:rotate(0deg) skew(0deg) scale(1);
            -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(0deg) skew(0deg) scale(1); 
            animation:rotate_c1 10s linear infinite;
            -webkit-animation:rotate_c1 10s linear infinite;
        }
        .r2{
            transform:rotate(45deg) skew(0deg) scale(1);
            -ms-transform:rotate(45deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(45deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(45deg) skew(0deg) scale(1); 
            animation: rotatef 10s linear infinite;
            -webkit-animation:rotatef 10s linear infinite;
            -moz-animation:rotatef 10s linear infinite;
            -o-animation:rotatef 10s linear infinite;
        }
        .r2 .img {
            transform:rotate(-45deg) skew(0deg) scale(1);
            -ms-transform:rotate(-45deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(-45deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(-45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(-45deg) skew(0deg) scale(1); 
            animation:rotate_c2 10s linear infinite;
            -webkit-animation:rotate_c2 10s linear infinite;
        }
        .r3 {
            transform:rotate(90deg) skew(0deg) scale(1);
            -ms-transform:rotate(90deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(90deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(90deg) skew(0deg) scale(1);
            animation: rotates 10s linear infinite;
            -webkit-animation:rotates 10s linear infinite;
            -moz-animation:rotates 10s linear infinite;
            -o-animation:rotates 10s linear infinite;
        }
        .r3 .img{
            transform:rotate(-90deg) skew(0deg) scale(1);
            -ms-transform:rotate(-90deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(-90deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(-90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(-90deg) skew(0deg) scale(1); 
            animation:rotate_c3 10s linear infinite;
            -webkit-animation:rotate_c3 10s linear infinite;
        }
        .r4{
            transform:rotate(135deg) skew(0deg) scale(1);
            -ms-transform:rotate(135deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(135deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(135deg) skew(0deg) scale(1); 
            animation: rotatet 20s linear infinite;
            -webkit-animation:rotatet 10s linear infinite;
            -moz-animation:rotatet 10s linear infinite;
            -o-animation:rotatet 10s linear infinite;
        }
        .r4 .img{
            transform:rotate(-135deg) skew(0deg) scale(1);
            -ms-transform:rotate(-135deg) skew(0deg) scale(1);     /* IE 9 */
            -moz-transform:rotate(-135deg) skew(0deg) scale(1);     /* Firefox */
            -webkit-transform:rotate(-135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
            -o-transform:rotate(-135deg) skew(0deg) scale(1); 
            animation:rotate_c4 10s linear infinite;
            -webkit-animation:rotate_c4 10s linear infinite;
        }

ステップ 3:各 div のアニメーションを作成します

## 最初の div

##

@keyframes rotate{
            0%{
                transform:rotate(0deg) skew(0deg) scale(1);
                -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(0deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(360deg) skew(0deg) scale(1);
                -ms-transform:rotate(360deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(360deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(360deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(360deg) skew(0deg) scale(1); 
            }
        }

2 番目の div

@keyframes rotatef{
            0%{
                transform:rotate(45deg) skew(0deg) scale(1);
                -ms-transform:rotate(45deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(45deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(45deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(405deg) skew(0deg) scale(1);
                -ms-transform:rotate(405deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(405deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(405deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(405deg) skew(0deg) scale(1); 
            }
        }

3 番目の div

@keyframes rotates{
            0%{
                transform:rotate(90deg) skew(0deg) scale(1);
                -ms-transform:rotate(90deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(90deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(90deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(450deg) skew(0deg) scale(1);
                -ms-transform:rotate(450deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(450deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(450deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(450deg) skew(0deg) scale(1); 
            }
        }

4 番目の div

@keyframes rotatet{
            0%{
                transform:rotate(135deg) skew(0deg) scale(1);
                -ms-transform:rotate(135deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(135deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(135deg) skew(0deg) scale(1); 
            }
            100%{
                transform:rotate(495deg) skew(0deg) scale(1);
                -ms-transform:rotate(495deg) skew(0deg) scale(1);     /* IE 9 */
                -moz-transform:rotate(495deg) skew(0deg) scale(1);     /* Firefox */
                -webkit-transform:rotate(495deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */
                -o-transform:rotate(495deg) skew(0deg) scale(1); 
            }
        }

Note
## ※CSS3の回転属性はすべてのブラウザに対応していないため、作成後に対応するクラスにアニメーション名を追加する必要があります。

以上がcss3を使用して円回転アニメーションを作成する方法（完全なコードは添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。