css3中的animation:动画名 持续时间 动画的速度曲线 动画开始之前的延迟 动画播放的次数 是否应该轮流反向播放动画

动画播放次数：n（定义应该播放多少次动画） ； infinite（无限循环）
动画延迟：ns （默认为零）
是否反向播放： normal alterna
动画的速度曲线; linear (匀速)；ease（默认 先快然后加速，最后变慢）；ease-in（以低速开始）；ease-out（以低速结束）；ease-in-out（动画一低速开始和结束）
cubic-bezier（n，n，n，n）

@keyframes（用来改变动画轨迹或者效果）和animate
1需要创建一个名字，后面绑定动画时需要
2.from 起始时0%
3 to到达终点时等同于100%

box-sizing属性：content-box（border和padding值不计算在width之内）；padding-box（padding计算在width之内）；border-box（border和padding计算在width之内）
content属性：
a:after
{
content: " (" attr(href) ")";
}

HTML：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="main">
        <div class="imgs">
            <a href="javascript:void(0);" class="first-img"><img src="img/img1.jpg"></a>
            <a href="javascript:void(0);"><img src="img/img2.jpg"></a>
            <a href="javascript:void(0);"><img src="img/img3.jpg"></a>
            <a href="javascript:void(0);"><img src="img/img4.jpg"></a>
            <a href="javascript:void(0);"><img src="img/img5.jpg"></a>
        </div>

        <div class="controller">
            <div class="show-static"></div>
            <div class="show-run"></div>
            <a class="controller-tag1" href="javascript:void(0);"><img src="img/img1.jpg"></a>
            <a class="controller-tag2" href="javascript:void(0);"><img src="img/img2.jpg"></a>
            <a class="controller-tag3" href="javascript:void(0);"><img src="img/img3.jpg"></a>
            <a class="controller-tag4" href="javascript:void(0);"><img src="img/img4.jpg"></a>
            <a class="controller-tag5" href="javascript:void(0);"><img src="img/img5.jpg"></a>

    </div>

</body>
</html>

CSS：
* {
    margin: 0;
    padding: 0;
}
.main {
    position: relative;
    width: 1200px;
    margin: 50px auto;
    border: solid 1px #ccc;
}
.imgs {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}
.main a {
    display: block;
    width: 100%;
    height: 100%;
}
.imgs a:first-child{
    animation: imgAnimate 18s linear infinite alternate;
}
.imgs:hover > .first-img,
.imgs:hover + .controller .show-run {
    animation-play-state: paused;
}
.imgs a img {
    width: 100%;
    height: 100%;
}
.controller {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 80%;
    height: 40px;
    margin: 0 auto;
    margin-top: 560px;
}
.controller .show-run {
    margin-bottom: -17px;
    height: 16px;
    width: 20%;
    background: #FDB024;
    animation: showAnimate 18s linear infinite alternate;
}
.controller .show-static {
    margin-bottom: -17px;
    height: 17px;
    width: 100%;
    background: #575757;
}
.controller a {
    display: block;
    box-sizing: border-box;
    float: left;
    width: 20%;
    height: 17px;
    margin: 0px;
    border: solid 1px #CCC;
}
.controller a img {
    display: none;
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    margin-top: -160px;
    border: solid 1px #FDB024;
}

.controller a::after {
    position: relative;
    content: "";
    display: none;
    margin-left: -20px;
    left: 50%;
    width: 10px;
    height: 0px;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-top: solid 10px #FDB024;
}
.controller-tag1:hover > img,
.controller-tag1:hover::after{
    display: block;
}
.controller-tag2:hover > img,
.controller-tag2:hover::after{
    display: block;
}
.controller-tag3:hover > img,
.controller-tag3:hover::after{
    display: block;
}
.controller-tag4:hover > img,
.controller-tag4:hover::after{
    display: block;
}
.controller-tag5:hover > img,
.controller-tag5:hover::after{
    display: block;
}

@keyframes imgAnimate
{
    0% {
        margin-top: 0px;
    }
    11.11% {
        margin-top: 0px;
    }
    22.22% {
        margin-top: -600px;
    }
    33.33% {
        margin-top: -600px;
    }
    44.44% {
        margin-top: -1200px;
    }
    55.55% {
        margin-top: -1200px;
    }
    66.66% {
        margin-top: -1800px;
    }
    77.77% {
        margin-top: -1800px;
    }
    88.88% {
        margin-top: -2400px;
    }
    100% {
        margin-top: -2400px;
    }
}

@keyframes showAnimate
{
    0% {
        margin-left: 0px;
    }
    11.11% {
        margin-left: 0px;
    }
    22.22% {
        margin-left: 20%;
    }
    33.33% {
        margin-left: 20%;
    }
    44.44% {
        margin-left: 40%;
    }
    55.55% {
        margin-left: 40%;
    }
    66.66% {
        margin-left: 60%;
    }
    77.77% {
        margin-left: 60%;
    }
    88.88% {
        margin-left: 80%;
    }
    100% {
        margin-left: 80%;
    }
}

												


											
轮播图CSS的更多相关文章
	

    
								
  1. 用js和jQuery做轮播图
		
    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
    
		
    2. 
						
  2. 用 CSS 做轮播图
		
    对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...
    
		
    3. 
						
  3. 基于css制作轮播图的部分效果
		
    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
    
		
    4. 
						
  4. jquery里面的attr和css来设置轮播图竟然效果不一致
		
    /*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...
    
		
    5. 
						
  5. html、css、js实现轮播图
		
    2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...
    
		
    6. 
						
  6. css动画属性--轮播图效果
		
    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
    
		
    7. 
						
  7. 用html +js+css 实现页面轮播图效果
		
    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
    
		
    8. 
						
  8. css3 - 纯css实现一个轮播图
		
    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
    
		
    9. 
						
  9. 纯HTML和CSS实现JD轮播图
		
    博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识.  ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 代码 | 用ALNS框架求解一个TSP问题 - 代码详解
			
    写在前面 前面好多篇文章,我们总算是把整个ALNS的代码框架给大家说明白了.不知道大家对整个框架了解了没有.不过打铁要趁热,心急了要吃热豆腐.今天就来实战一下,教大家怎么用ALNS的代码框架,求解一个 ...
    
			
    2. 
						
  2. K-D Tree学习笔记
			
    用途 做各种二维三维四维偏序等等. 代替空间巨大的树套树. 数据较弱的时候水分. 思想 我们发现平衡树这种东西功能强大,然而只能做一维上的询问修改,显得美中不足. 于是我们尝试用平衡树的这种二叉树结构 ...
    
			
    3. 
						
  3. ORACLE批量导入图片到BLOB字段
			
    要插入图片的表不是固定的,而且是批量插入很多张,还要考虑到因为图片的文件名错误,修改后要再次插入,此时应避免已经插入的重复执行操作, 浪费时间. 所以就选择先用一张临时表来暂时保存从文件系统读取的照片 ...
    
			
    4. 
						
  4. 图灵学院java架构课程
			
    1.wps文档地址 https://docs.qq.com/doc/DRVNLUndvTmFSdEhO 2.百度网盘地址 https://pan.baidu.com/s/1uxaTzJZHKrsw_H ...
    
			
    5. 
						
  5. Qt 的插件制作
			
    首先会遇到一些插件使用的问题: 插件加载的时候出现乱码 qrc:/main.qml:20: Error: Qt.createQmlObject(): failed to create object:  ...
    
			
    6. 
						
  6. JVM 堆内存溢出后，其他线程是否可继续工作
			
    最近网上出现一个美团面试题:“一个线程OOM后,其他线程还能运行吗?”.我看网上出现了很多不靠谱的答案.这道题其实很有难度,涉及的知识点有jvm内存分配.作用域.gc等,不是简单的是与否的问题. 由于 ...
    
			
    7. 
						
  7. 小福bbs—项目系统设计与数据库设计
			
    这个作业属于哪个课程 班级链接 这个作业要求在哪里 作业要求的链接 团队名称 小福bbs 这个作业的目标 实现对校园论坛软件的制作,使其能够发布帖子,查看信息等 作业的正文 小福bbs--项目需求分析 ...
    
			
    8. 
						
  8. 实现一个微信小程序组件：文字跑马灯效果
			
    marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...
    
			
    9. 
						
  9. 微信小程序之圆形进度条（自定义组件）
			
    思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环逐步绘制. 在看我的文章前,必须先看 ,下面转的文章,因为本文是在它们基础上修改的. 它们的缺点为: ...
    
			
    10. 
						
  10. android studio 错误汇总以及解决办法
			
    android studio 错误汇总以及解决办法  参考 https://www.jianshu.com/p/7c7de6562231 问题1. Error:Execution failed for ...
    
			
    11.