所以我正在尝试制作一个图像 slider ，除了我使用 :before 作为动画进度条和 :after 作为播放/暂停图标外，它都可以正常工作。整个事情是为了在 :hover 上暂停，但问题是 .slider :before 和 "after 不要让 .image-container 在 :hover 上暂停，所以一切都不同步。有人能帮我吗
附注我尝试制作 .image-container 的前后子元素，但随后它们随动画移出框架
body{
margin:0;
padding:0;
}
.slider{
padding:0;
width:1280px;
height:720px;
position:relative;
overflow:hidden;
background:green;
}
.image-container{
width:500%;
position:relative;
-webkit-animation: slide 20s ease-out 0 infinite normal;
animation: slide 20s ease-out 0 infinite mormal;
}
div.image-container img{
float:left;
width:20%;
height:auto;
}
div.slider:after{
content:"";
width:0;
height:0;
position:relative;
float:left;
top:-688px;
left:32px;
background:rgba(0,0,0,0);
border-top:24px solid transparent;
border-left:48px solid rgba(255,255,255,.1);
border-bottom:24px solid transparent;
transition:all .3s;
}
div.slider:before{
content:"";
width:0;
height:0px;
z-index:1;
position:absolute;
float:left;
top:700px;
border-top:20px double rgba(255,255,255,.1);
background:rgba(255,255,255,.1);
-webkit-animation: progress 5s ease-out -2s infinite;
animation: progress 5s ease-out -2s infinite;
}
div.slider:hover:before{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
div.slider:hover:after{
width:16px;
height:48px;
border-left:48px double rgba(255,255,255,.1);
border-top:0 solid transparent;
border-bottom:0 solid transparent;
}
div.image-container:hover{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes slide{
0% {right:0%;}
10% {right:0%;}
15% {right:100%;}
35% {right:100%;}
40% {right:200%;}
60% {right:200%;}
65% {right:300%;}
85% {right:300%;}
90% {right:400%;}
100% {right:400%;}
}
@keyframes slide{
0% {right:0%;}
10% {right:0%;}
15% {right:100%;}
35% {right:100%;}
40% {right:200%;}
60% {right:200%;}
65% {right:300%;}
85% {right:300%;}
90% {right:400%;}
100% {right:400%;}
}
@-webkit-keyframes progress{
0% {width:0px;}
80% {width:1280px;}
100% {width:0px;}
}
@keyframes progress{
0% {width:0px;}
80% {width:1280px;}
100% {width:0px;}
}
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider">
<div class="image-container">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="1.jpg">
</div>
</div>
</body>
</html>
也许有这样的东西？
div.slider:before:hover .image-container{
-webkit-animation-play-state: paused;
animation-play-state: paused;
最佳答案
在你的 CSS 中:
div.slider:hover:before
这是错误的伪元素使用方式。您同时使用了两个伪元素。这会造成困惑。
因此，请决定使用哪个伪元素，然后您可以使用所需的 CSS 样式设置页面样式。
关于html - css动画伪元素影响div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26828781/