使用css3实现图片轮播
前言：实现图片轮播的方式有很多种 ，例如js ，css 等等。 本文主要讲述使用纯css3实现轮播图
工具介绍：
使用的编辑器： Hbuilder进入正题
html代码：
???<div id="slide_show"> ???????<div id="photos"> ???????????<!-- ???????????????作者：JavaBuild ???????????????时间：2018-10-21 ???????????????描述：轮播图 ???????????--> ???????????<img id="first_slide_photo" src="images/slideshow_1.png" /> ???????????<img src="images/banner.jpg"/> ???????????<img src="images/midbanner.jpg"/> ???????????????????????????????????????????????????????????</div> ???</div>解释： 定义两个div，第一个div用来确定展示的大小，第二个div用来实现图片的轮播。
css代码：
/* start slide show */#slide_show { ???/* 第一个div的尺寸 */ ???width: 1360px; ????height: 600px; ???/* overflow:hidden 表示超出这个div的展示内容将被隐藏 */ ???overflow: hidden;}#photos { ???/* calc(1360px * 3) 代表 一共有三张图片 ， 每张长度为1360px */ ???width: calc(1360px * 3); ???height: 600px; ???/* animation 属性 实现动画效果，switch 动画函数名称，下面会写这个函数，6s代表整个轮播时长, ease-out 方向 ?infinite 循环轮播 normal 正常结束不反向轮播*/ ???-webkit-animation: switch 6s ease-out infinite normal;}#photos > img { ???float: left;/* 向左浮动 ，图片连接无缝隙 */ ???width: 1360px; ???height: 600px;}/* 轮播函数 */@-webkit-keyframes switch{ ???0%, 25% { /* 第1张图所用时长 */ ???????margin-left: 0px; /* 第一张距离左侧的长度 */ ???} ???30%, 60% {/* 第2张图所用时长 */ ???????margin-left: -1360px; /* 第一张距离左侧的长度 */ ???} ???70%, 100% {/* 第3张图所用时长 */ ???????margin-left: -2720px; /* 第一张距离左侧的长度 */ ???}}/* end slideshow */以上即可实现图片的轮播，简单易用。纯css！
使用css实现轮播图
原文地址：https://www.cnblogs.com/amazingjava/p/9835817.html