好吧，我的問題出在標題上。我需要通過懸停 main-section__* 之一來停止所有 @keyframes。我已經筋疲力盡了，再過幾個小時我就要去學習了，我在這段代碼后面花了一整夜。請幫幫我 ：（（（。
（如何發布，我必須描述多少細節才能在網站上發布）。
在這種情況下，main-section__title 本身就是網站的標題，接下來的 8 個 div 看起來像帶有主題圖示的圓圈。
在我的任何方法中，我能達到的最大結果是僅在 8 個圓中的一個上停止影片。
HTML：
<div class="main-section">
<div class="container">
<div class="main-section__title">Resume</div>
<div class="main-section__about-me anim-stop"><i class="fa fa-user-circle-o fa-5x" aria-hidden="true"></i></div>
<div class="main-section__skills anim-stop"><i class="fa fa-cogs fa-5x" aria-hidden="true"></i></div>
<div class="main-section__contacts anim-stop"><i class="fa fa-phone fa-5x" aria-hidden="true"></i></div>
<div class="main-section__languages anim-stop"><i class="fa fa-language fa-5x" aria-hidden="true"></i></div>
<div class="main-section__working-exp anim-stop"><i class="fa fa-briefcase fa-5x" aria-hidden="true"></i></div>
<div class="main-section__courses anim-stop"><i class="fa fa-certificate fa-5x" aria-hidden="true"></i></div>
<div class="main-section__post anim-stop"><i class="fa fa-map-marker fa-5x" aria-hidden="true"></i></div>
<div class="main-section__education anim-stop"><i class="fa fa-graduation-cap fa-5x" aria-hidden="true"></i></div>
</div>
</div>
社會保障體系：
.main-section {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($color: #bde0fe, $alpha: 0.2);
&__title {
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
color: #a2d2ff;
}
&__about-me {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-250px);
animation: 30s linear 0s infinite normal $animation-play main-section-about-me;
@keyframes main-section-about-me {
0% {
transform: rotate(0deg) translateY(-250px);
}
100% {
transform: rotate(360deg) translateY(-250px);
}
}
i {
position: absolute;
top: 20.5%;
left: 21%;
}
&:hover {
@for $elem from 1 through 10 {
.anim-stop:nth-child(#{$elem}) {
animation-play-state: paused;
}
}
}
}
&__skills {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(45deg) translateY(-250px);
animation: 30s linear 0s infinite normal $animation-play main-section-skills;
@keyframes main-section-skills {
0% {
transform: rotate(45deg) translateY(-250px);
}
100% {
transform: rotate(405deg) translateY(-250px);
}
}
i {
position: absolute;
top: 20%;
left: 16%;
}
}
&__contacts {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-contacts;
@keyframes main-section-contacts {
0% {
transform: rotate(90deg) translateY(-250px);
}
100% {
transform: rotate(450deg) translateY(-250px);
}
}
i {
position: absolute;
top: 22.5%;
left: 27.5%;
}
}
&__languages {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-languages;
@keyframes main-section-languages {
0% {
transform: rotate(135deg) translateY(-250px);
}
100% {
transform: rotate(495deg) translateY(-250px);
}
}
i {
position: absolute;
top: 23%;
left: 25%;
}
}
&__working-exp {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-working-exp;
@keyframes main-section-working-exp {
0% {
transform: rotate(180deg) translateY(-250px);
}
100% {
transform: rotate(540deg) translateY(-250px);
}
}
i {
position: absolute;
top: 22.5%;
left: 21.25%;
}
}
&__courses {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-courses;
@keyframes main-section-courses {
0% {
transform: rotate(225deg) translateY(-250px);
}
100% {
transform: rotate(585deg) translateY(-250px);
}
}
i {
position: absolute;
top: 21%;
left: 25%;
}
}
&__post {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-post;
@keyframes main-section-post {
0% {
transform: rotate(270deg) translateY(-250px);
}
100% {
transform: rotate(630deg) translateY(-250px);
}
}
i {
position: absolute;
top: 21%;
left: 33.5%;
}
}
&__education {
position: absolute;
border: 2px solid #dfdfdf;
width: 125px;
height: 125px;
border-radius: 50%;
top: 43.5%;
left: 46.75%;
transform: rotate(0deg) translateY(-380px);
animation: 30s linear 0s infinite normal $animation-play main-section-education;
@keyframes main-section-education {
0% {
transform: rotate(315deg) translateY(-250px);
}
100% {
transform: rotate(675deg) translateY(-250px);
}
}
i {
position: absolute;
top: 25%;
left: 13%;
}
}
}
uj5u.com熱心網友回復：
你可以設定
.anim-stop{
animation-play-state: paused;}
然后使用 onm ouseover 事件切換類：
<div onmouseover="myToggleFunction()" class="main-section">
uj5u.com熱心網友回復：
答案就在我眼前——它是 JS。但如果有人能告訴我如何只在 css 上制作這個功能，請感謝我。我想知道是否可能
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483159.html
上一篇：如何在vanillahtml中創建大小回應的獨立滾動部分
下一篇：使用顯示網格時的對齊和位置問題