2

我有这个结构。

HTML：

<div id="sequence">
            <img class="prev" src="themes/bc/imagesx/bt-prev.png" alt="Previous" />
            <img class="next" src="themes/bc/imagesx/bt-next.png" alt="Next" />
            <ul>
                <li>
                    <div class="info animate-in">
                        <h2>Built using Sequence.js</h2>
                        <p>The Responsive Slider with Advanced CSS3 Transitions</p>
                    </div>
                    <img class="sky animate-in" src="themes/bc/imagesx/bg-clouds.png" alt="Blue Sky" />
                    <img class="balloon animate-in" src="themes/bc/imagesx/balloon.png" alt="Balloon" />
                </li>
                <li>
                    <div class="info">
                        <h2>Creative Control</h2>
                        <p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>
                    </div>
                    <img class="sky" src="themes/bc/imagesx/bg-clouds2.png" alt="Blue Sky" />
                    <img class="aeroplane" src="themes/bc/imagesx/aeroplane.png" alt="Aeroplane" />
                </li>
                <li>
                    <div class="info">
                        <h2>Cutting Edge</h2>
                        <p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
                    </div>
                    <img class="sky" src="themes/bc/imagesx/bg-clouds3.png" alt="Blue Sky" />
                    <img class="kite" src="themes/bc/imagesx/kite.png" alt="Kite" />
                </li>
            </ul>
        </div>

CSS：

.sky {
    width: 100%;
    right: -100%;
    opacity: 1;
    top: auto;
    bottom:-25px;
    vertical-align: middle;

    -webkit-transition-property: left top;
    -moz-transition-property: left top;
    -o-transition-property: left top;
    -ms-transition-property: left top;
    transition-property: left top;
    z-index: 1;
}

.sky.animate-in {
    right: 0%;
    opacity: 1;
    top: auto;
    bottom:-25px;

    -webkit-transition-duration: 4s;
    -moz-transition-duration: 4s;
    -o-transition-duration: 4s;
    -ms-transition-duration: 4s;
    transition-duration: 4s;

    -webkit-transition-property: left top;
    -moz-transition-property: left top;
    -o-transition-property: left top;
    -ms-transition-property: left top;
    transition-property: left top;
    z-index: 1;
    ransition-timing-function: ease;
-moz-transition-timing-function: ease; /* Firefox 4 */
-webkit-transition-timing-function: ease; /* Safari and Chrome */
-o-transition-timing-function: ease; /* Opera */

}

.sky.animate-out {
    right: 100%;
    opacity: 1;
    top: auto;
    bottom:-25px;

    -webkit-transition-duration: 4s;
    -moz-transition-duration: 4s;
    -o-transition-duration: 4s;
    -ms-transition-duration: 4s;
    transition-duration: 4s;

    -webkit-transition-property: left top;
    -moz-transition-property: left top;
    -o-transition-property: left top;
    -ms-transition-property: left top;
    transition-property: left top;
    z-index: 1;
    transition-timing-function: ease;
-moz-transition-timing-function: ease; /* Firefox 4 */
-webkit-transition-timing-function: ease; /* Safari and Chrome */
-o-transition-timing-function: ease; /* Opera */
}

我正在使用Sequence JS插件。一切正常。但我希望 bgclouds 和 bgclouds2 在过渡时不要分开。同一时间开始，同一时间结束。但现在，一帆风顺。

我可以通过 CSS3 制作该结构吗？http://css3.bradshawenterprises.com/sliding/点击image 2，进入image1，直接启动image2。

对不起我的严厉表达。请帮我。

4

1 回答 1

0

您可能想研究 CSS 中的 @keyframes。这些允许您设置项目在动画中开始和停止的时间。

于 2013-05-25T07:46:26.217 回答