仅仅CSS就实现了轮播图----利用关键帧动画实现轮播图效果

利用CSS关键帧实现轮播图效果动画

最近梳理css的动画效果的时候，想到了原来学css的时候，有个好玩的轮播图效果，当时用的js写好的轮子，然后网上到处找，这次换自己来写一个css简单的轮播吧，给才接触的童鞋参考一下。

关键css技术：css的animation动画属性，@keyframes 关键帧

简单思路就是：
两个div，一个父div，一个子div，父div作为展示窗口，子div作为图片容器存放图片，设置浮动使得子div中图片依次在容器中横向排列，父div的宽高设置和图片一致，然后overflow:hidden把超出部分隐藏，用animation设置和@keyframes配置依据实际情况下调整就可以了。

这里不多废话了，直接上代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css关键帧实现简单轮播图动画</title><style type="text/css">*{margin: 0;padding: 0;background-color: #A9A9A9;}ul li{list-style: none;}#box{width: 1202px;height: 676px;margin: 0 auto;margin-top: 100px;overflow: hidden;}.content{width: 7212px;margin: 0 auto;animation: test 10s;}img{width: 1202px;height: 676px;float: left;}@-webkit-keyframes test{0%,15%{margin-left: 0;}18%,32%{margin-left: -1202px;}35%,49%{margin-left: -2404px;}52%,64%{margin-left: -3606px;}67%,81%{margin-left: -4808px;}84%,100%{margin-left: -6010px;}} </style></head><body><div id="box"><ul class="content"><li><img src="../img/2.jpg" ></li><li><img src="../img/3.jpg" ></li><li><img src="../img/4.jpg" ></li><li><img src="../img/9.jpg" ></li><li><img src="../img/10.jpg" ></li><li><img src="../img/12.jpg" ></li></ul></div></body>
</html>

最后的效果如下：

大家有什么需要讨论的请评论留言哦！！！

仅仅CSS就实现了轮播图----利用关键帧动画实现轮播图效果相关推荐

css3利用animation关键帧动画实现轮播图
1.原理说明: 见视频:168-关键帧动画-轮播案例_哔哩哔哩_bilibili (前3:44分钟) 文字说明:一个盒子里放里一个长条的盒子放很多小盒子,小盒子里面放的是图片,然后让这个小盒子浮动起来 ...
如何用python画数据图-利用Python绘制数据的瀑布图的教程
介绍对于绘制某些类型的数据来说,瀑布图是一种十分有用的工具.不足为奇的是,我们可以使用Pandas和matplotlib创建一个可重复的瀑布图. 在往下进行之前,我想先告诉大家我指代的是哪种类型的图 ...
android 自动轮播图,Android-自定义View实现轮播图
主要步骤 1.自定义View的实现过程(测量.布局.绘制) 2.事件拦截机制方法.图片轮播时的Scroller对象使用 3.轮播图自动轮播时,Timer.TimerTask.Handler三者的结合 ...
纯CSS实现轮播图（结合动画）
图片自动切换实现原理:使用一个div(class="out")并设置溢出隐藏保证每次只显示一张,在内部设置另一个div.outer包裹所有的图片,图片均水平排列,包裹图片的div使 ...
【HTML+CSS+JS】模仿星巴克主页，练习CSS排版，JS实现轮播图以及悬停动画（公开完整源码）
目录:完整源码仅供学习一.效果演示二.完整源代码 2.1 HTML代码 2.2 JS代码 2.3 CSS代码 2.3.1 index.css 2.3.2 base.css 三.完整项目下载一.效 ...
css3轮播不用jpuery_js和CSS3 3D轮播图
这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构以8张图片的3D轮播图为例,它的基本H ...
利用CSS3动画属性实现轮播图切换图片时出现附近内容抖动的解决办法。
利用CSS的动画完成轮播图功能,切换图片时发现,在QQ浏览器上轮播图切图时会影响附近内容抖动导致看起来模糊. 如下图: 轮播图切图时下面的内容:"办公家具"."更多&qu ...
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
html菜鸟教程轮播图自动播放,如何实现轮播图？
1.背景介绍轮播图,是由网页banner进化而来,通常放在屏幕最显眼的位置,以大图显示.随着互联网的发展,网页中需要推广的信息越来越多,宣传信息都欲占据黄金位置,最后相互妥协,轮播图应运而生.总而言 ...
html按钮轮播图,四种方式实现轮播图
不论是app,还是网站,基本上都会出现轮播图,今天和大家分享几种不同工具实现轮播图的几种方式. 轮播图的基本样式和功能就不需要解释了,相信能根据题目选择看文章的话都知道啥是轮播图,如果哪位读者老爷真的 ...

仅仅CSS就实现了轮播图----利用关键帧动画实现轮播图效果

利用CSS关键帧实现轮播图效果动画

仅仅CSS就实现了轮播图----利用关键帧动画实现轮播图效果相关推荐

最新文章

热门文章