css3关键帧动画实现轮播效果
实现效果：打开手机京东，可以看到首页的头部，以这个头部为基础，仿写一个类似的样式。
思路：仔细观察可以发现，手机京东的头部是以一个搜索栏和轮播特效组成的，而这个搜索栏是以轮播特效做为背景的，现在运用css3关键帧动画，可以实现这样的头部效果。
测试：首先，写一个简单的测试来验证思路是否正确，这样可以排除其他样式的干扰；测试如下：
1.两个嵌套的div，内部div1以简单的文字和图片模拟的搜索栏
<body>
<div class="diva">
<div class="div1">头部
<img src="../img/放大镜.png">
</div>
</div>
</body>
2.由于动画的主要原理在于改变背景图片的位置，这里先介绍一下background-img，知道的同学自行跳过吧
由url插入图片
div{
width: 300px;
height: 200px;
background: red;
background-image: url(../img/放大镜.png);
}
效果：
很明显看到，背景图片的大小不适合div的宽高，所以，用background-size设置图片的宽高
background-image: url(../img/放大镜.png);
background-size: 20px 30px;
效果：
因为背景图默认的设置是重复背景图片，所以更改为禁止重复
background-image: url(../img/放大镜.png);
background-size: 20px 30px;
background-repeat: no-repeat; /*禁止图片重复*/
效果：
这个时候呢，假如想调整图片的位置，就需要设置图片的position
background-image: url(../img/放大镜.png);
background-size: 20px 30px;
background-repeat: no-repeat; /*禁止图片重复*/
background-position: 100px 50px; /*这里设置的是px坐标，也可以用left或者百分比的形式设置图片位置*/
效果：
3.给外部diva设置宽度、背景色和边框，便于观察；给内部div1添加宽高和背景图片，注意这里div1的宽度是背景图片宽度的总和；当然，div1中的图片也要适当调整宽高。
.diva{
width: 100%;
background: red;
border: 5px solid blue;
}
.div1{
width: 900px;
height: 200px;
background-image: url(../img/轮播1.jpg),url(../img/轮播2.jpg),url(../img/轮播3.jpg);
background-repeat: no-repeat;
background-size: 300px 200px;
background-position: 0 0,300px 0,600px,0;
}
.div1 img{
width: 20px;
height: 20px;
}
大概就是这个效果啦
4.将div1的宽度设置为一张图片的宽度，就定义一个相当于用户的可见窗口
.div1{
width: 300px; /*设置div宽度为一张图片的宽度*/
height: 200px;
border: 10px solid green;
background-image: url(../img/轮播1.jpg),url(../img/轮播2.jpg),url(../img/轮播3.jpg);
background-repeat: no-repeat;
background-size: 300px 200px;
background-position: 0 0,300px 0,600px,0;
}
效果：
5.由于设置的窗口大小，剩余的两张图片不可见了，相当于屋子里面有三个人，你从一个窗口看进去，只看到了一个人，其他人被墙壁遮住了，这时如果这个人往左走，离开窗口，第二个人走到窗口位置，就可以看到第二个人了。
.div1{
width: 300px; /*设置div宽度为一张图片的宽度*/
height: 200px;
border: 10px solid green;
background-image: url(../img/轮播1.jpg),url(../img/轮播2.jpg),url(../img/轮播3.jpg);
background-repeat: no-repeat;
background-size: 300px 200px;
/*background-position: 0 0,300px 0,600px,0;*/
background-position: -300px 0,0 0,300px,0; /*图片左移*/
}
效果：
6.当这三个人不断重复这种移动，就会对窗户外的你形成轮播效果，css3的关键帧动画就可以实现这种重复不断的移动，不了解的同学可以自行百度，这里就不细说关键帧动画原理了。
css3关键代码：
.home{
width: 320px; /*为了适应iphone5的分辨率设置的宽度*/
height: 200px;
background: url(../img/轮播1.jpg),url(../img/轮播2.jpg),url(../img/轮播3.jpg),url(../img/轮播1.jpg);
/*第四张图片与第一张图片一致是为了轮播的时候效果更加自然，否则从最后一张播放到第一张会造成生硬的停顿*/
background-repeat: no-repeat;
background-size: 320px 200px;
animation: kbg 9s linear infinite;
/*调用kbg关键帧动画,动画时长为9s，匀速运动，无限循环播放(除非页面被关闭)*/
}
@keyframes kbg{
0%{
background-position: 0 0,320px 0,640px 0,960px 0;
}
5%{
background-position: 0 0,320px 0,640px 0,960px 0;
}
30%{
background-position: -320px 0,0 0,320px 0,640px 0;
}
40%{
background-position: -320px 0,0 0,320px 0,640px 0;
}
60%{
background-position: -640px 0,-320px 0,0 0,320px 0;
}
70%{
background-position: -640px 0,-320px 0,0 0,320px 0;
}
95%{
background-position: -960px 0,-640px 0,-320px 0,0 0;
}
100%{
background-position: -960px 0,-640px 0,-320px 0,0 0;
}
}
总结：关键帧轮播的视觉效果就和手机京东差不多，所缺的就是一些细节的地方。可能有人说网上的轮播器一大把,这样做是重复造轮子，但是我坚信学以致用，多练习才能理解和掌握知识要点。
题外话：
小妹初来乍到，望大家捧个人场，多多评论指正，最好加个关注呢，期待和各位的交流~
css3关键帧动画实现轮播效果的更多相关文章
- 纯CSS焦点轮播效果-功能可扩展
个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- Android使用ViewPager实现左右循环滑动及轮播效果
边界的时候会看到一个不能翻页的动画,可能影响用户体验.此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑动的情况下就能够看到其 ...
- Bootstrap插件之Carousel轮播效果（2015年-05月-21日）
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...
- 针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
- 点击轮播图片左右button，实现轮播效果
点击左右button.实现图片轮播效果.js代码例如以下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(" ...
随机推荐
- Redis数据类型之List（三）
前言:list即链表,它是一个能维持数据先后顺序的列表,便于在表的两端追加和删除数据,中间位置的存取具有O(N)的时间复杂度,是一个双向链表. 一.内部原理 redis ...
- JQuery源码阅读记录
新建html文件,在浏览器中打开文件,在控制台输入consoole.log(window);新建html文件,引入JQuery后在浏览器中打开,在控制台同样输入consoole.log(window) ...
- mysql主键约束和唯一性约束
主键约束和唯一性约束都是索引,它们的区别是: 主键字段可以确保唯一性,但主键字段不能为NULL. 唯一性约束可以确保唯一性,但唯一性约束的字段可以为NULL 唯一性约束对含有NULL的记录不起作用,即 ...
- JS+PHP实现用户输入数字后取得最大的值并显示为第几个
目的:分清JS PHP的区别,拓宽思维 分析 1.利用JS的prompt输入用户想要输入的值. 2.利用HTML表单的text标签将输入的值传递给PHP处理文件 3.PHP进行数值判定,选出最大值和位 ...
- Java字符串进阶
Java字符串进阶 前言 最常用的对字符串操作的类有三个,分别是String,StringBuilder,StringBuffer,下面将会详细的说说这三个类...... String String类 ...
- ⑨的完美冻青蛙(frog)
⑨的完美冻青蛙(frog) 时间限制: 1 Sec 内存限制: 128 MB 题目描述 输入 第一行是一个正整数n,表示上式中的p的个数. 接下来有n行,每一行两个正整数pi 和ei . 输出 ...
- JavaScript 基础——使用js的三种方式，js中的变量，js中的输出语句，js中的运算符；js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- WebService小记
这个问题找了好多地方都没有结果,自己暂且总结一下吧,也不算是解决问题的根本途径,但是也不失为一种办法.当时用了wsimport wsdl2java xfire 都没有解决,大牛能解决的话,欢迎留言. ...
- CSS样式之选择器
一.CSS选择器构成 CSS选择器是你想要改变样式的html元素,通俗的说,选择器可以改变html文件中标签的属性,这些属性可以是颜色,背景图,字体等.每个选择器有一条或多条声明,可以同时改变某个标签 ...
- Oracle trunc()函数的用法--来着心静禅定ing
1.TRUNC(for dates) TRUNC函数为指定元素而截去的日期值. 其具体的语法格式如下: TRUNC(date[,fmt]) 其中: date 一个日期值 fmt 日期格式,该日期将由指 ...