我有一些移动字css3动画。 动画很好(片段)。如果有人使用悬停,动画停止(很好),但不接受不透明度和z-index(.bubble:hover)的更改。CSS 3动画与关键帧悬停改变不透明度和Z指数不起作用
opacity: 1;
z-index: 100;
.bubble:hover类正在使用转换操作工作。
transform: scale(1.2);
目标是在前景中弹出悬停的气泡。 如果泡泡离开,动画应该从停止点开始移动。 我该如何解决它?
感谢您的帮助。
.solSystem {
postion: absolute;
height: 25vw;
}
.orbitLink,
.orbitLink:active,
.orbitLink:visited {
color: #FFF;
}
.mars:hover,
.earth:hover {
animation-play-state: paused;
}
.bubble:hover {
background: #DE383B !Important;
padding: 1vw;
border: 0.1vw solid #000;
color: #FFF !Important;
transform: scale(1.2);
opacity: 1;
z-index: 100;
}
.mars {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveRigthToLeft, scale, color;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.earth {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveLeftToRigth, scale, color;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.bubble {
padding: 1vw;
color: #FFF;
border-color: #000;
border-width: 0.1vw;
background-color: #004A99;
font-weight: bold;
font-size: 1.1vw;
font-family: Arial, FreeSans, sans-serif;
position: absolute;
border-style: solid;
border-radius: 100%;
}
@keyframes moveLeftToRigth {
0% {
left: 15vw;
}
50% {
left: 40vw;
}
100% {
left: 15vw;
}
}
@keyframes scale {
0% {
transform: scale(1);
}
32% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
70% {
transform: scale(0.8);
animation-timing-function: ease-in;
}
75% {
transform: scale(0.9);
animation-timing-function: ease-in-out;
}
86% {
transform: scale(1.2);
}
98% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes color {
0% {
opacity: 0.5;
z-index: 1;
}
20% {
opacity: 0.6;
z-index: 2;
}
40% {
opacity: 0.7;
z-index: 3;
}
60% {
opacity: 0.8;
z-index: 4;
}
80% {
opacity: 0.9;
z-index: 5;
}
90% {
opacity: 1;
z-index: 6;
}
95% {
opacity: 0.8;
z-index: 4;
}
100% {
opacity: 0.6;
z-index: 2;
}
}
<div class="solSystem">
<a href="Test1.html">
<div class="earth" style="animation-duration: 20s,20s,20s;">
<div class="bubble" style="left:12vw;">
<a href="Test1.html" title="Test1" class="orbitLink"> Test1</a>
</div>
</div>
</a>
<a href="Test2.html">
<div class="mars" style="animation-duration: 30s,30s,30s;">
<div class="bubble" style="left:30vw;">
<a href="Test2.html" title="Test2" class="orbitLink">Test2</a>
</div>
</div>
</a>
</div>
'important'不起作用? – xXDarioXx
!重要的不工作 –