divで負荷をアニメートし、親div内で回転する

私は自分のウェブサイトで簡単なスキルブロックを作っています。私はスキルを持っています。親クラスのDivaクラスと、次に、スキルクラスを持つh2の内部divがあります。 skillsWheelには、スキルを備えた8つのdivが含まれています。私はスキルdivを持っており、スキルdiv内のすべてのスキル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

以下のスニペットを使ってコンテナにアニメーションルールを追加ページの読み込み時に個々のdivにクラスを追加するためのjavascriptを追加する – knight

ちょうどcssクラスのショーを作成し、最初のスキルdivにwindow.onloadで囲んで追加して、動作するかどうかを確認します。だからこそ私はその部分をクリアしたのです – knight

あなたの質問に試した内容を含めていますか？ – NewToJS

単にクラスskill_containerとdiv要素を作成し、内部のすべてのskillコンテナーを追加

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

（あなたがクロスの互換性のために接頭辞を使用確保）キーフレームを追加します。

と私は私が持っているだろうと信じているので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内で回転する

答えて

関連する問題