Question

我为客户here创建了一个css动画。实际上有两个独立但同步的动画正在运行。目前我将它们定位为“绝对”并且它们工作正常，除了移动设备，由于定位它们被推到右侧。如果我将它们定位为“相对”，则仅右侧文本动画起作用，而左侧图片动画仅显示图像的一小部分。我错过了什么？非常感谢您的意见。下面的CSS代码：

/*SLIDESHOWS IMAGES*/

.slideshow
{
    list-style-type:none;
    margin:0;
    padding:0;
}

.slideshow li span
{
    width:453px;
    height:340px;
    position:absolute;
    top:91px;
    left:175px;
    color:transparent;
    background-image:url('images/banner.jpg');
    background-size:cover;
    background-repeat:none;
    opacity:0;
    z-index:0;

    -webkit-animation: myfirst 60s linear infinite 0s;

    -moz-animation: myfirst 60s linear infinite 0s;

    -o-animation: myfirst 60s linear infinite 0s;

    -ms-animation: myfirst 60s linear infinite 0s;

    animation: myfirst 60s linear infinite 0s;
}

.slideshow li:nth-child(1) span
{
    background-image:url('images/banner.jpg');
}

.slideshow li:nth-child(2) span 
{
    background-image:url('images/banner-2.jpg');
    -webkit-animation-delay:15s;
    -moz-animation-delay:15s;
    -o-animation-delay:15s;
    -ms-animation-delay:15s;
    animation-delay:15s;
}

.slideshow li:nth-child(3) span 
{
    background-image:url('images/banner-3.jpg');
    -webkit-animation-delay:30s;
    -moz-animation-delay:30s;
    -o-animation-delay:30s;
    -ms-animation-delay:30s;
    animation-delay:30s;
}

.slideshow li:nth-child(4) span 
{
    background-image:url('images/banner-4.jpg');
    -webkit-animation-delay:45s;
    -moz-animation-delay:45s;
    -o-animation-delay:45s;
    -ms-animation-delay:45s;
    animation-delay:45s;
}

@-webkit-keyframes myfirst 
{
    0% { opacity: 0; animation-timing-function: ease-in; }
    12% { opacity: 1; animation-timing-function: ease-out; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

@-moz-keyframes myfirst 
{
    0% { opacity: 0; animation-timing-function: ease-in; }
    12% { opacity: 1; animation-timing-function: ease-out; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

@-o-keyframes myfirst 
{
    0% { opacity: 0; animation-timing-function: ease-in; }
    12% { opacity: 1; animation-timing-function: ease-out; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

@-ms-keyframes myfirst 
{ 
    0% { opacity: 0; animation-timing-function: ease-in; }
    12% { opacity: 1; animation-timing-function: ease-out; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes myfirst
{ 
    0% { opacity: 0; animation-timing-function: ease-in; }
    12% { opacity: 1; animation-timing-function: ease-out; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
} 




/*SLIDESHOWS TEXT*/ 

.slogan
{
    list-style-type:none;
    margin:0;
    padding:0;
}

.slogan li div
{
    width:453px;
    height:200px;
    padding-left:20px;
    padding-top:40px;
    padding-right:10px;
    padding-bottom:10px;
    font-family:'Lucida Handwriting';
    box-shadow: 10px 10px 10px #888888;
    position:absolute;
    top:170px;
    left:675px;
    color:#cf112d;
    opacity:0;
    z-index:0;

    -webkit-animation: mysecond 60s linear infinite 0s;

    -moz-animation: mysecond 60s linear infinite 0s;

    -o-animation: mysecond 60s linear infinite 0s;

    -ms-animation: mysecond 60s linear infinite 0s;

    animation: mysecond 60s linear infinite 0s;
}

.slogan li:nth-child(1) div
{
    background-color:#ffffff;
}

.slogan li:nth-child(2) div
{
    background-color:#ffffff;
    -webkit-animation-delay:15s;
    -moz-animation-delay:15s;
    -o-animation-delay:15s;
    -ms-animation-delay:15s;
    animation-delay:15s;
}

.slogan li:nth-child(3) div
{
    background-color:#ffffff;
    -webkit-animation-delay:30s;
    -moz-animation-delay:30s;
    -o-animation-delay:30s;
    -ms-animation-delay:30s;
    animation-delay:30s;
}

.slogan li:nth-child(4) div
{
    background-color:#ffffff;
    -webkit-animation-delay:45s;
    -moz-animation-delay:45s;
    -o-animation-delay:45s;
    -ms-animation-delay:45s;
    animation-delay:45s;
}

@-webkit-keyframes mysecond
{
    0% { opacity: 0; animation-timing-function: ease-in; }
    12% { opacity: 1; animation-timing-function: ease-out; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

@-moz-keyframes mysecond
{
    0% { opacity: 0; animation-timing-function: ease-in; }
    12% { opacity: 1; animation-timing-function: ease-out; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

@-o-keyframes mysecond
{
    0% { opacity: 0; animation-timing-function: ease-in; }
    12% { opacity: 1; animation-timing-function: ease-out; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

@-ms-keyframes mysecond
{
    0% { opacity: 0; animation-timing-function: ease-in; }
    12% { opacity: 1; animation-timing-function: ease-out; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes mysecond
{
    0% { opacity: 0; animation-timing-function: ease-in; }
    12% { opacity: 1; animation-timing-function: ease-out; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

Answer 1

现在，您将元素相对于整个页面进行绝对定位。你想要做的是相对于包装器将元素置于绝对位置。你可以这样做：

.slideshow, .slogan {
    position:relative;
}
.slideshow li span {
    top:0;
    left:0;
}
.slogan li div {
    right: 15px;
    top: 80px;
}

请注意，我只是在这里添加/覆盖相关属性。因此，将这些更改集成到CSS中。

动画元素的定位

1 个答案: