Question

所以我正在尝试制作一个图像滑块，除了我使用的是：之前作为动画进度条，然后是：作为播放/暂停图标之后，它一切正常。整个事情是暂停：悬停，但问题是.slider：之前和“之后不要使.image容器暂停：悬停所以这一切都不同步。有人可以帮我吗< / p>

P.S。我尝试制作.image容器的前后子项，但随后它们被动画移出框架

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;

Answer 1

在你的CSS中：

div.slider:hover:before

这是使用伪元素的错误方法。您一次使用了两个伪元素。这会造成混乱。

因此，请确定使用哪个伪元素，然后您可以使用所需的CSS样式设置页面样式。

css动画影响div的伪元素

1 个答案: