首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >css3滑块自动旋转

css3滑块自动旋转
EN

Stack Overflow用户
提问于 2013-03-25 20:02:58
回答 1查看 5.5K关注 0票数 0

我有手风琴滑块。使用CSS3是他们使用jquery使滑块自动旋转的一种方式,但只使用纯css3动画?这是我网站的网址。

EN

回答 1

Stack Overflow用户

发布于 2013-05-06 09:59:10

是像这样吗?

http://jsfiddle.net/coma/bXDHE/30/

代码语言:javascript
复制
<div class="neat">
    <div>
        <img src="http://www.menucool.com/slider/prod/image-slider-4.jpg"/>
        <img src="http://blogs.mathworks.com/pick/files/zebrainpastelfield.png"/>
        <img src="http://www.freewarepocketpc.net/wp7/img/image-effecter-free.png"/>
        <img src="http://www.poyraz.gen.tr/wp-content/uploads/images_4781_1.jpg"/>
    </div>
</div>

CSS

代码语言:javascript
复制
div.neat {
    font-size: 500px;
    width: 1em;
    height: 200px;
    overflow: hidden;
}

div.neat > div {
    position: relative;
    left: 0;
    width: 4em;
    -webkit-animation: loop 10s infinite;
    -moz-animation: loop 10s infinite;
}

div.neat > div > img {
    width: 1em;
    display: block;
    float: left;
}

@-webkit-keyframes loop {
    0% { left: 0; }
    20% { left: 0; }
    25% { left: -1em; }
    45% { left: -1em; }
    50% { left: -2em; }
    70% { left: -2em; }
    75% { left: -3em; }
    95% { left: -3em; }
}

@-moz-keyframes loop {
    0% { left: 0; }
    20% { left: 0; }
    25% { left: -1em; }
    45% { left: -1em; }
    50% { left: -2em; }
    70% { left: -2em; }
    75% { left: -3em; }
    95% { left: -3em; }
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15623703

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档