css轮播

转载 2017年10月13日 14:02:28

css部分

.loop-wrap {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 100px auto;
    overflow: hidden;
}

.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */
    height: 100%;
    font-size: 0;
}

.loop-image{
    width: 500px;
    height: 300px;
}
.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%;
    height: 100%;
    font-size: 0;
    transform: translate(0,0); /* 初始位置位移 */
    animation: loop 10s linear infinite;
}

/* 创建loop动画规则 */
/*
   轮播5张,总耗时10s,单张应为2s(20%)
   单张切换动画耗时500ms,停留1500ms
*/
@keyframes loop {
    0% {transform: translate(0,0);}
    15% {transform: translate(0,0);} /* 停留1500ms */

    20% {transform: translate(-20%,0);} /* 切换500ms 位移-20% */
    35% {transform: translate(-20%,0);}

    40% {transform: translate(-40%,0);}
    55% {transform: translate(-40%,0);}

    60% {transform: translate(-60%,0);}
    75% {transform: translate(-60%,0);}

    80% {transform: translate(-80%,0);}
    95% {transform: translate(-80%,0);}

    100% {transform: translate(0,0);} /* 复位到第一张图片 */
}
html部分

<div class="loop-wrap" style="margin-left: 10px;width: 500px;">
    <div class="loop-images-container">
        <img src="002.png" alt="" class="loop-image">
        <img src="003.png" alt="" class="loop-image">
        <img src="002.png" alt="" class="loop-image">
        <img src="001.png" alt="" class="loop-image">
        <img src="002.png" alt="" class="loop-image">
    </div>
</div>
src后面改成自己的图片。

用CSS做文字向上移动的轮播

hellohellohellohellohellohellohellohellohellohello hellohellohellohellohellohellohellohelloh...
  • scorpio_h
  • scorpio_h
  • 2017年04月14日 18:06
  • 1007

纯CSS实现简易轮播(一)

做项目的时候总用别人的轮播插件,就想着自己能不能做一个轮播,能不能用纯CSS做的,然后就在网上查了一下,发现例子还不少,然后看一下别人的,自己照猫画虎的也来一个试试,很简单的一个效果,这个的体验效果不...
  • qq_29326717
  • qq_29326717
  • 2017年09月07日 17:44
  • 202

CSS实现3D轮播效果

通过大牛张鑫旭的分享理解css 3D图片轮播效果 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-a...
  • Showingbun
  • Showingbun
  • 2017年03月09日 16:04
  • 590

【banner】介绍一个纯CSS3做的轮播图

日常搜寻组件中,发现有人做出一款css3轮播图,感觉挺棒,就转载过来分享下。HTML部分: ...
  • yuedudadan
  • yuedudadan
  • 2017年07月18日 15:25
  • 503

CSS + jQuery banner 轮播

竖屏轮播
  • yuqiongran
  • yuqiongran
  • 2017年03月09日 09:46
  • 347

浅谈纯CSS实现轮播

.box{ position:absolute; width:20px; height:20px; background:grey; color:white; ...
  • zhouziyu2011
  • zhouziyu2011
  • 2016年12月25日 17:23
  • 320

CSS3无缝轮播效果

CSS3无缝轮播效果
  • xyphf
  • xyphf
  • 2017年07月06日 10:12
  • 524

纯CSS实现图片轮播

原文:http://www.aichengxu.com/view/4182590 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好 总共花...
  • kencaber
  • kencaber
  • 2016年10月09日 10:33
  • 2230

JS原生轮播-基础篇(HTML+CSS)部分

根据慕课网的轮播教程,今早也写了一个,主要是把思路捋清楚,下面的代码我尽全力把每一行解释清楚, 我也是根据我今早写的思路一步一步来,希望能帮到读者! 那么就从最基础的HTML和CSS开始写 ...
  • qq_26626113
  • qq_26626113
  • 2015年07月28日 10:35
  • 1120

CSS动画实现轮播图

关键是将外面的container设置成为相对定位且其width为一个子元素的width,里面的子元素长度设置为count*width,且绝对定位,利用animation实现动画效果。 ...
  • u012657197
  • u012657197
  • 2017年08月19日 15:18
  • 386
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css轮播
举报原因:
原因补充:

(最多只允许输入30个字)