1

所以...我在旋转木马的幻灯片中有三个 div 类。现在我有一个 display:none 用于普通元素和 display:block 用于具有 .current 类的元素，如下所示：

p.readmore,.logo,.slidetxt{
display: none;
}


.current p.readmore, .current .logo, .current .slidetxt{
display: block;
}

它有效，但它只是“弹出”，我想淡化外观。我还有一个标题在当前时会向下移动，我也想为该标题设置动画或淡出。

.current h1.carousel-title{
margin-top: 200px;
}

谢谢

4

2 回答 2

4

只需将此 css 样式添加到当前类。我建议您使用不透明度而不是显示来切换幻灯片的显示。

.slide { opacity: 0; }

.slide.current {
    opacity: 1;
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
    visibility: visible !important; 
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        -webkit-transform: scale(1.1);
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        -webkit-transform: scale(1);
        opacity: 1; 
    }       
}
于 2013-08-09T17:45:56.697 回答
0

你在使用 jQuery 吗？

如果是这样，它内置了一些动画，可以在以下链接中找到：

http://api.jquery.com/category/effects/

如果你不使用 jQuery，这里有一个 CSS3 HTML5 动画演示：

http://www.script-tutorials.com/css3-fade-slider/

于 2013-08-09T17:40:27.083 回答