焦点轮播图示例
常用实现焦点图或者轮播图的前端技能较多，如JavaScript技能、BootStrap组件、CSS技能等。本文紧张先容利用CSS3供应的动画功能实现大略轮播效果。首先给出轮播实现动画效果如下所示：
焦点图实现效果展示
1、实现的基本思路
本例题设计实现图文轮播，紧张包括图片的轮播与笔墨轮播两部分，基本思路是实现按照周期改变图层背景实现图片的轮播。改变或者移动笔墨图层位置实现笔墨部分的移动及动画效果。
2、animation与@keyframe
通过利用CSS3供应的animation属性方法，我们可以编写动画，实现元素的移动、放缩、颜色改变等动画效果。Animation紧张属性包括绑定动画的名称、实行动画的实践、动画啊延迟等干系属性。基本语法如下：
对应属性值分别为动画名称、实行韶光、速率曲线、延迟韶光、实行次数、是否反向播放；
@keyframes与animation结合利用，紧张用于实现对动画进行定义。通过定义动画时长的百分比，确定在各个阶段动画的效果。@keyframes定义形式如下：
@keyframe animation_name{0%{样式1}100%{样式2}}
3、transform:translateX
该属性紧张用于实现x轴方向元素的移动，须要在利用时供应参数值，参数即为移动的值，正负号表示移动的方向，如：
transform:translateX(-1000px);
4、改变背景background-image
CSS属性background-image紧张用于设置元素的背景，常用于页面、图层的背景图片的设置。代码示例如下：
background-image:url('images/1.jpg');CSS3动画实现焦点图效果实现
本例紧张实现图文轮播效果，紧张素材为轮播图片，采取了1000600的图片5张，轮播周期为20s。图片缩略图如下：
素材缩略图
页面紧张采取div为容器实现布局，个中轮播图片所在层为父层，笔墨部分为子层，子层相对父层底部定位。根据图片尺寸设置子层宽度为5000，超出部分隐蔽。页面布局代码如下：
整体页面文件代码
页面基本HTML代码如上所示，a层为图片展示层，s层为笔墨展示层，c类型的div为笔墨容器层。页面效果如下所示：
页面布局效果
动画实现紧张在style css样式部分进行编写，定义两个动画，名称分别为mymove()与smove()，个中mymove紧张用于实现图片切换，绑定到父层a上。Smove紧张用于实现笔墨移动，绑定到s子层上。动画实现部分代码描述如下：
CSS动画部分代码
动画实现部分紧张代码如上所示，通过@keyframe分别对mymove与smove动画进行规则编写，终极实现图文轮播的效果。本例页面布局样式部分代码如下所示：
元素样式代码
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码缺点、建议与见地，可以联系作者，共同磋商。期待大家关注！
干系文章链接如下：
前端开拓-JavaScript DOM动态天生文本框
前端开拓-拼图游戏（N数码问题）A算法智能求解效果展示
前端设计-JavaScript美女拼图游戏开拓实例
前端设计-教你如何快速绘制HTML5动画
前端设计-相应式页面开拓根本
前端设计-Ajax技能及实例展示
