加载动画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内旋转

回答

相关问题