1

我正在研究纯 CSS 轮播，通过将图片和超链接溶解在蓝色背景上来更改 4 个 div。

它在 IE10/11、Opera 15、Mozila 23、Safari 5.1.7 (win)、Safari 中运行良好？（osx108）。在 Chrome 29 中运行时，除了一个问题外几乎没问题。如果它在 2 个以上的浏览器选项卡中打开，它会失去同步并几乎立即跳过图像。如果它在 2 个以上的浏览器窗口中打开，一切正常。

它在 iPad2 上的 Safari 中以同样的方式被破坏。

是浏览器问题还是代码问题？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Carousel v0</title>
    <link href="carousel.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Carousel Start -->
  <div class="carousel-items">
       <div id="carousel-item-1" class="carousel-item">
               <a class="carousel-item-text" href="#" title="Go to Showcase Item 1">
                       <span class="carousel-item-title">Showcase Item 1 Title</span>
                       <span class="carousel-item-description">Brief description or introduction into Showcase Item 1.</span>
              </a>
    </div>
    <div id="carousel-item-2" class="carousel-item">        
        <a class="carousel-item-text" href="#"  title="Go to Showcase Item 2"> 
            <span class="carousel-item-title">Showcase Item 2 Title</span>
            <span class="carousel-item-description">Brief description or introduction into Showcase Item 2.</span>
        </a>
    </div>
    <div id="carousel-item-3" class="carousel-item">        
        <a class="carousel-item-text" href="#"  title="Go to Showcase Item 3"> 
            <span class="carousel-item-title">Showcase Item 3 Title</span>
            <span class="carousel-item-description">Brief description or introduction into Showcase Item 3.</span>
        </a>    
    </div>
    <div id="carousel-item-4" class="carousel-item">        
        <a class="carousel-item-text" href="#"  title="Go to Showcase Item 4"> 
            <span class="carousel-item-title">Showcase Item 4 Title</span>
            <span class="carousel-item-description">Brief description or introduction into Showcase Item 4.</span>
        </a>
    </div>
</div>
    <!-- Carousel Finish -->
</body>
</html>

CSS：

/* Container to position carousel composition */
.carousel-items {
  overflow: hidden;
  width: 923px;
  height: 355px;
  background: rgba(0,19,127,0.3);
}
/* Deafault position of carousel items */
.carousel-item {
  position: absolute!important;
  width: 923px;
  height:355px;  
  opacity: 0;
  -webkit-animation: colorDissolve 24s linear infinite;
  -moz-animation: colorDissolve 24s linear infinite;
  -ms-animation: colorDissolve 24s linear infinite;
  animation: colorDissolve 24s linear infinite;
}
/* Backgrounds to carousel items */
#carousel-item-1{background-image:url('one.jpg');}
#carousel-item-2{background-image:url('two.jpg');}
#carousel-item-3{background-image:url('three.jpg');}
#carousel-item-4{background-image:url('four.jpg');}

/* Animation delay for carousel item 2 */
.carousel-item:nth-child(2) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
/* Animation delay for carousel item 3 */
.carousel-item:nth-child(3) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;  
}
/* Animation delay for carousel item 4 */
.carousel-item:nth-child(4) {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}
/* Appearance of carousel item description  - Initial style*/
.carousel-item-text {
    position:relative;
    display:block;
    top:285px;
    z-index: 1500;
    width: 923px;   
    height: 70px;   
    overflow: hidden;
    color:#ffffff;
    text-decoration:none;
    background:  rgba(0,19,127,0.3);
    -webkit-transition: all 750ms ease;
    -moz-transition: all 750ms ease;
    -o-transition: all 750ms ease;
    -ms-transition: all 750ms ease;
    transition: all 750ms ease;     
}
/* Appearance of carousel item description - Item hover style */
.carousel-item:hover > .carousel-item-text {
top:205px;
    height: 150px;
}
/* Title of carousel item */
.carousel-item-title {
    position:relative;
    padding-left:20px;
    font-size:xx-large;
    line-height:70px;
    letter-spacing: 2px;
}
/* Description of carousel item */
.carousel-item-description {
    position:relative;
    display:block;
    width:783px;
    padding-left:20px;
    line-height:130%;
    font-size:x-large;
}
/* The keyframes calculations are based on assumption of 4 items in the carousel. */
@-webkit-keyframes colorDissolve {
    0%, 27%, 100% { opacity: 0; }
    2%, 25% { opacity: 1; z-index:1000;}
}
@-moz-keyframes colorDissolve {
    0%, 27%, 100% { opacity: 0; }
    2%, 25% { opacity: 1; z-index:1000;}
}
@-ms-keyframes colorDissolve {
    0%, 27%, 100% { opacity: 0; }
    2%, 25% { opacity: 1; z-index:1000;}
}
@keyframes colorDissolve {
    0%, 27%, 100% { opacity: 0; }
    2%, 25% { opacity: 1; z-index:1000;}
}
4

0 回答 0