关闭

纯CSS实现轮播图效果,你不知道的CSS3黑科技

214人阅读 评论(0) 收藏 举报
分类:

前言

轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片。

一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的。不过就是有些繁琐,今天这篇文章我们来看看如何不用Javascript,而使用纯CSS代码去实现轮播图吧。

这篇文章的所有代码我都放在了群文件了,感兴趣的同学可以去下载看看。


CSS

实现效果

首先我们来看看只使用CSS实现的轮播图效果。


实现效果图

具体分析

看到上述的实现效果后,我们来具体分析下页面的构成。

  • 页面在布局上首先要有5张图片,图片固定宽度。

  • 每张图片对应一个标题,标题通过ul>li实现,事先算好宽度,跟随图片一起滚动。

  • 下边有个1,2,3,4,5表示图片顺序的索引,鼠标放上去后会显示对应的图片。

HTML页面

接下来我们通过代码层面去看看整个效果是如何实现的。

首先来看看HTML页面的实现,代码中都有每个区域的描述。

HTML页面

CSS部分

实现这个效果主要是通过CSS代码的,其代码量比较大,我们分开来看。

  • 外层容器

对于最外层容器我们设置绝对定位,方便图片标题子元素的定位。


外层容器

  • 图片标题

对于图片的标题我们也采用绝对定位,并且让标题横向一行展示,方便在动画的时候直接横向滚动。

得到的代码如下所示。

 

图片标题

  • 图片与图片容器

接下来是设置图片容器属性以及图片的基本大小。

图片容器也采用绝对定位,宽度可以动态设置,根据图片数量计算。每张图片设置宽度与高度,得到的代码如下。


图片与图片容器

  • 图片动画效果

然后设置图片的动画效果,对于任意的图片都有进入和静止两个状态,中间的效果可以任意定制。

在这里,中间效果设置成5%的间隔,其他时间在进行位置的切换,因为图片是处于水平分布,通过设置margin-left的值为负数进行偏移即可。

图片动画效果

  • 数字索引的基本属性

对于下面的数字图标也是通过基本的CSS属性进行设置的,包括宽高,行高,透明度等等。

在鼠标移动到对应的数字上后,数字会显示不同的颜色。而且在鼠标停留在数字上后,动画效果会暂停。

数字索引基本属性

  • 数字索引的偏移量

因为数字是水平方向展示的,因此要设定每个数字的水平偏移量。

web前端/H5/javascript学习群:250777811

欢迎关注此公众号→【web前端EDU】跟大佬一起学前端!欢迎大家留言讨论一起转发


数字水平偏移量

  • 鼠标停在数字上的动画效果

然后就是处理鼠标停留在数字上的动画效果,因为每张图片对应特定的数字,需要计算出每次的动画开始位置和结束位置。

鼠标停在数字上的动画效果

  • 动画效果赋予指定的数字

最后一步就是将定义的动画效果赋予指定的数字上,每个数字都有特定的id。得到的代码如下。


动画效果赋予指定的数字

至此所有步骤完成了,就可以得到文章开始的动画效果了。

 

结束语

这篇文章完全通过CSS实现了一个轮播图的效果,相比于使用JS来说减少页面阻塞程度,效果更好。

看完后你有过这样的思考不?

  1. 为什么这样能实现?

  2. 能不能像js那样循环播放?从第一个图可以跳到最后一个图后面

  3. 你是否掌握了这样的思路?


web前端/H5/javascript学习群:250777811

欢迎关注此公众号→【web前端EDU】跟大佬一起学前端!欢迎大家留言讨论一起转发

0
0
查看评论

+【CSS3】使用纯css代码实现图片轮播效果

使用纯CSS3代码实现简单的图片轮播。 1.基本布局: 将5张图片左浮动横向并排放入一个div容器(#photos)内,图片设置统一尺寸,div宽度设置5个图片的总尺寸,然后放入相框容器div(#frame),相框设置1个图片的大小并设置溢出隐藏,以保证正确显示一个照片。 2.设置动画: 然...
  • rtian001
  • rtian001
  • 2015-09-15 20:58
  • 49619

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

日常搜寻组件中,发现有人做出一款css3轮播图,感觉挺棒,就转载过来分享下。HTML部分:<div class="baner-box"> <ul class="banner"> <li style="background...
  • yuedudadan
  • yuedudadan
  • 2017-07-18 15:25
  • 490

纯CSS3实现真实翻书效果

研读以下代码及其注释,让你轻松掌握如何用 纯CSS3实现真实翻书效果。 可以参考代码下的参考内容
  • b954960630
  • b954960630
  • 2016-12-02 13:36
  • 1639

用css3实现简单的进入效果

这是一个比较简单的小例子,实现如图效果 仅仅用css3就可以达到这种效果,代码如下: .div { position: relative; top: 20px; height: 300px; width: 200px; margin: 0 auto; ...
  • sangjinchao
  • sangjinchao
  • 2017-03-31 20:22
  • 896

使用纯CSS3实现一个日食动画

日食现象是月亮挡在了地球和太阳之间,也就是月亮遮挡住了太阳。所以要构造日食,我们需要2个对象:一个代表月亮,一个代表太阳。 我们把整个日食过程分解为3个阶段:1. 缓慢移入 2. 短暂停留 3. 缓慢移出。在此期间,会产生3个彼此关联的动画。首先是月亮的位置移动,我们通过改变月亮的X坐标(left或...
  • iefreer
  • iefreer
  • 2016-03-19 15:52
  • 1677

纯CSS实现手风琴效果

今天来看一个使用hover触发的一个手风琴效果,鼠标hover时改变图像宽度,配合transition实现动画,效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。
  • whqet
  • whqet
  • 2014-02-23 10:32
  • 7843

纯CSS3属性animation实现的打字效果

*{margin:0;padding:0;} @keyframes typing { from { width: 0; } } @keyframes blink-caret { 50% { border-color: transparent; } } h1 { ...
  • u013018357
  • u013018357
  • 2016-02-29 15:12
  • 3600

css3写下雨效果

css3写下雨效果 .xiayuxiaoguo{ width:100%; height: 100%; position: absolute; left:0px; top:0px; z-index: 2; } ....
  • oMiracle123
  • oMiracle123
  • 2017-03-15 14:42
  • 502

如何使用CSS3/SCSS实现逼真的车窗雨滴效果

在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素,其次雨滴是一个个凸透镜,能折射出远处的景色。
  • iefreer
  • iefreer
  • 2016-05-03 17:27
  • 5648

纯CSS3实现彩色缎带效果

纯CSS3实现的缎带效果,你仔细看下,像不像一个彩缎的头部?现在来说,只有通过CSS3才可方便实现,我暂时对传统CSS实现缎带没有好的方法。
  • life66881
  • life66881
  • 2015-06-03 14:06
  • 1718
    个人资料
    • 访问:7001次
    • 积分:454
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:21篇
    • 译文:0篇
    • 评论:0条
    文章分类