加載動畫div，然後在父div內旋轉

我在我的網站上製作了一個簡單的技能塊。我有技能輪班父母div，然後我有一個內部與H2與一類技能的股利。 skillsWheel還包括8個具有一類技能的div。我有技能div和所有技能div集中在skillWheel中，只有技能div顯示和技能div隱藏在技能div後面。我希望技能分區在頁面加載時顯示動畫，圍繞技能分區創建一個圓圈，然後開始旋轉時鐘或反時鐘或兩者兼而有之。任何想法我必須做到這一點？到目前爲止，我已經做了很多。加載動畫div，然後在父div內旋轉

.skillsWheel { 
 
    width: 500px; 
 
    height: 500px; 
 
    background: #d7d7d7; 
 
    box-sizing: border-box; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 

 
div { 
 
    color: #fff; 
 
    border-radius: 50%; 
 
} 
 

 
.skill{ 
 
    height: 70px; 
 
    width: 70px; 
 
    background: crimson; 
 
    line-height: 70px; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -35px; 
 
    margin-left: -35px; 
 
    z-index: -5; 
 
    -webkit-transition: all 0.5s ease-out; 
 
      transition: all 0.5s ease-out; 
 
} 
 

 

 
.skill:nth-child(2) { 
 
    top: 15%; 
 
    left: 50%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(3) { 
 
    top: 25%; 
 
    left: 25%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(4) { 
 
    top: 70%; 
 
    left: 25%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(5) { 
 
    top: 85%; 
 
    left: 50%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(6) { 
 
    top: 70%; 
 
    left: 75%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(7) { 
 
    top: 45%; 
 
    left: 85%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(8) { 
 
    top: 25%; 
 
    left: 75%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(9) { 
 
    top: 45%; 
 
    left: 15%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 
.skills-main { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #98bf21; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    vertical-align: middle; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -50px; 
 
    margin-left: -50px; 
 
    
 
} 
 

 
.skills-main h5 { 
 
    font-size: 22px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    
 
    <div class="skillsWheel"> 
 
    <div class="skills-main"> 
 
     <h5> Skills </h5> 
 
    </div> 
 
    
 
    <div class="skill">HTML</div> 
 
    <div class="skill">CSS</div> 
 
    <div class="skill">JavaScript</div> 
 
    <div class="skill">jQuery</div> 
 
    <div class="skill">Sass</div> 
 
    <div class="skill">BootStrap</div> 
 
    <div class="skill">Git</div> 
 
    <div class="skill">Photoshop</div> 
 
    
 
    </div> 
 

 
</body> 
 
</html>

來源

2017-06-16 knight

因爲我相信，我會添加JavaScript以在頁面加載時向各個div添加類。 – knight

剛剛嘗試通過創建一個CSS類顯示並將其添加到第一個技能div封閉在window.onload，看看它的工作，但沒有運氣。這就是爲什麼我只是清除那部分 – knight

包括你已經試過你的問題？ – NewToJS

只需添加一個關鍵幀（確保您使用的前綴交叉兼容性）

@keyframes rotate{ 
from { 
transform:rotate(0deg) 
} 
to{ 
transform:rotate(360deg) 
} 
}

創建skill_container類股利和內添加所有skill容器。

與skill類添加動畫規則，以你的容器（也需要前綴）

animation-name:rotate; 
    animation-duration:1s; 
    animation-iteration-count:infinite; 
    animation-fill-mode:forwards;

摘錄如下

$(document).ready(function() { 
 
    $(".skill").css({ 
 
    width: "70px", 
 
    height: "70px" 
 
    }) 
 
})

.skillsWheel { 
 
    width: 500px; 
 
    height: 500px; 
 
    background: #d7d7d7; 
 
    box-sizing: border-box; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 

 
div { 
 
    color: #fff; 
 
    border-radius: 50%; 
 
} 
 

 
.skill { 
 
    height: 70px; 
 
    width: 70px; 
 
    background: crimson; 
 
    line-height: 70px; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -35px; 
 
    margin-left: -35px; 
 
    z-index: -5; 
 
    -webkit-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
.skill:nth-child(2) { 
 
    top: 15%; 
 
    left: 50%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(3) { 
 
    top: 25%; 
 
    left: 25%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(4) { 
 
    top: 70%; 
 
    left: 25%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(5) { 
 
    top: 85%; 
 
    left: 50%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(6) { 
 
    top: 70%; 
 
    left: 75%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill_container { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    animation-name: rotate; 
 
    animation-duration: 5s; 
 
    animation-iteration-count: infinite; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.skill:nth-child(7) { 
 
    top: 45%; 
 
    left: 85%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(8) { 
 
    top: 25%; 
 
    left: 75%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skill:nth-child(9) { 
 
    top: 45%; 
 
    left: 15%; 
 
    margin-left: -40px; 
 
    z-index: 1; 
 
} 
 

 
.skills-main { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #98bf21; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    vertical-align: middle; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -50px; 
 
    margin-left: -50px; 
 
} 
 

 
.skills-main h5 { 
 
    font-size: 22px; 
 
} 
 

 
@keyframes rotate { 
 
    from { 
 
    transform: rotate(0deg) 
 
    } 
 
    to { 
 
    transform: rotate(360deg) 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div class="skillsWheel"> 
 
    <div class="skills-main"> 
 
     <h5> Skills </h5> 
 
    </div> 
 
    <div class="skill_container"> 
 
     <div></div> 
 
     <div class="skill">HTML</div> 
 
     <div class="skill">CSS</div> 
 
     <div class="skill">JavaScript</div> 
 
     <div class="skill">jQuery</div> 
 
     <div class="skill">Sass</div> 
 
     <div class="skill">BootStrap</div> 
 
     <div class="skill">Git</div> 
 
     <div class="skill">Photoshop</div> 
 
    </div> 
 

 

 
    </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-06-16 04:09:24 repzero

感謝您的幫助，但我希望技術分會圍繞大輪的div。像他們的立場應該改變。 – knight

好吧，我想我現在得到你了....回答編輯 – repzero

加載動畫div，然後在父div內旋轉

回答

相關問題