css3製做旋轉動畫

時間 2019-11-19

標籤 css3 css 製做旋轉動畫欄目 CSS 简体版

原文原文鏈接

如今的css3真是強大，以前不少動畫都是用jq來實現，可是css3製做的動畫要比jq實現起來簡單不少，今天呢，我本身也寫了一個css旋轉動畫和你們分享。效果以下面的圖片css

思路：1.製做以前呢，咱們先來整理一下思路，這個圓軸軌跡上一共有八個圓。html

仔細看的話，你會發現一個規律，那就是一個月是360度的，裏面放了八個圓，也就是每一個圓都是佔了45度，而後平均的在圓軸上面分佈開來。有了這個發現以後，咱們就開始想一想該怎麼佈局好啦。下面是個人佈局方式，能夠給你們參考一下：css3

我是每兩個垂直對應的圓就放在同一個div中，八個圓的話，那就是四個div，讓div展現成上面的效果的話，須要用到css3的旋轉屬性。讓第一個div保持0deg不變，而後第二個div呢就旋轉45deg，以此類推，下一個div都要比上一個div多旋轉45deg，就出現了上面的這個佈局啦。我在這邊貼上代碼：web

html代碼：瀏覽器

	<div class="out_circle">
		<div class="slide"></div>
		<div class="nav_circle r1">
			<div class="img_top img">
				<img src="images/menu.png">
				<a href="#">產品中心</a>
			</div>
			<div class="img_bottom img" >
				<img src="images/menu_01.png">
				<a href="#">官方網站</a>
			</div>
		</div>
		<div class="nav_circle r2">
			<div class="img_top img">
				<img src="images/menu_02.png">
				<a href="#">代理查詢</a>
			</div>
			<div class="img_bottom img" >
				<img src="images/menu_03.png">
				<a href="#">後臺登陸</a>
			</div>
		</div>
		<div class="nav_circle r3">
			<div class="img_top img">
				<img src="images/menu_04.png">
				<a href="#">公司資質</a>
			</div>
			<div class="img_bottom img" >
				<img src="images/menu_05.png">
				<a href="#">質檢報告</a>
			</div>
		</div>
		<div class="nav_circle r4">
			<div class="img_top img">
				<img src="images/menu_06.png">
				<a href="#">代理登陸</a>
			</div>
			<div class="img_bottom img" >
				<img src="images/menu_07.png">
				<a href="#">代理受權</a>
			</div>
		</div>
	</div>

　　css代碼：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;
        }

布好局以後呢，最大的亮點來了，沒錯，就是讓它動起來。接下來就是要解決旋轉的問題了，在建立動畫的時候，咱們要考慮一下。就是它旋轉是按着圓軸來旋轉的，就是說它轉一圈以後，仍是會回到它原來的位置上，這個相信你們都能理解。因此每一個圓都要單首創建動畫：ide

css3動畫的代碼：佈局

第一個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); 
            }
        }

第二個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); 
            }
        }

第三個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); 
            }
        }

第四個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); 
            }
        }

兼容各類瀏覽器內核的寫法我這邊沒寫，大家本身添加前綴就能夠了。由於加上去代碼會太長，因此這邊就不加了，望能理解。

這邊加上以後，轉動是能夠轉動了，可是會出現一個問題，如圖所示：

要解決這個bug的話，就須要div裏面的子元素也跟着一塊兒轉動也行，怎麼轉動呢？多是要和轉動的父元素的轉動方向相反才能維持正常狀態啦。下面呢，我就直接貼上子元素轉動的代碼吧

@keyframes rotate_c1{
            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); 
            }
        }
        @keyframes rotate_c2{
            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); 
            }
        }
        @keyframes rotate_c3{
            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); 
            }
        }
        @keyframes rotate_c4{
            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); 
            }
        }

注意：建立好動畫以後，別忘了給相應的類添加動畫名，否則是轉動不起來的，由於css3不是全部瀏覽器都徹底支持的，因此必定要記得添加內核前綴名

好啦，旋轉動畫如今就完成了，其實只要思路對了，實現起來那是很是簡單的。用其餘佈局方法也是能夠實現的。若是大家有時間的，也能夠本身去嘗試一下

相關標籤/搜索

每日一句

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