纯CSS3图片轮播效果

所属分类:媒体-幻灯片和轮播图

纯CSS3图片轮播效果 ie兼容10

代码说明

.zong{
    width:1164px;
    height:291px;
    -webkit-animation:change 10s linear infinite; //10s是整个动画的秒数 infinite是永久循环
}

滚动部分

@-webkit-keyframes change{
    0%{
        margin-left:0;
    }
    30%{
        margin-left:0; 
    }
    /*总共用10秒,0%到30% 也是3.333秒第一张图片停留位置后面以此类推*/
    33%{
        margin-left:-291px;
    }
    63%{
        margin-left:-291px;
    }
    66%{
        margin-left:-582px;
    }
    97%{
        margin-left:-582px;
    }
    100%{
        margin-left:-873px;
    }
}


相关插件-幻灯片和轮播图

文字菜单特效-BLUR MENU WITH CSS3 TRANSITIONS

随着css3的出现,我们能实现的网页特效就变得更加容易,更炫了。今天我要给大家介绍的是一款是一款由 css3 打造的文字特效插件,用于当我们将鼠标移动到菜单上时,那么该效果的灵感是通过高亮显示某一项和模糊其它项来突出选中的菜单。注意,该插件只能工作在支持 css3 的浏览器中。
  幻灯片和轮播图
 8725  35

jQuery图片轮播(焦点图)插件jquery.slideBox

jQuery图片轮播(焦点图)插件jquery.slideBox兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定默认显示第N张,自由设定,代码简洁,运行效率高
  幻灯片和轮播图
 145402  214

三种常见轮播

三种常见轮播(左右,上下,渐变)
  幻灯片和轮播图
 15979  53

jQuery图片轮播

jQuery图片轮播
  幻灯片和轮播图
 17410  35

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复