javascript - 制作页面内容滑块动画

Question

我想制作一个两页滑块来浏览内容。是否可以制作一个 CSS 代码来做这个例子中的动画？

Answer 1

像这样

演示

css

body {
    font:normal 1.25em/1.5 Arial, sans-serif;
}

.demo-wrapper {
    max-width: 640px;
    margin: 0 0 1em;
    padding: 5px;
    border: 1px solid #CCC;
    background: #F4F4F4;
}

/**
 * Slider CSS
 */
.slider {
    /* For no JS situations */
    overflow: auto;
}
.slider > ul {
    margin: 0;
    padding: 0;

    /* Force list items onto a single line and remove white space */
    font-size: 0;
    white-space: nowrap;

    /* Only WebKit requires prefix */
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.slider > ul > li {
    display: inline-block;
}
.slider .next,
.slider .prev {
    position: absolute;
    top: 50%;
    margin-top: -1em;
    padding: .5em;
    line-height: 1;
    text-decoration: none;
    color: white;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
}
.slider .next {
    right: 0;
}
.slider .prev {
    left: 0;
}

.slider .prev.is-disabled,
.slider .next.is-disabled {
    opacity: .25;
}

/* Full width variation */
.slider--fit li {
    width: 100%;
}

演示1