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. CSP 2019 退役记
			
    声明:博主不会时空穿越,也没有造成恐慌,不应禁赛三年 Day0 上午:打板子 Polya定理; exkmp; exbsgs; 乘法逆元; 矩阵快速幂; 扫描线; ST表; excrt; Dirichl ...
    
			
    2. 
						
  2. NetworkX系列教程(10)-算法之四:拓扑排序与最大流问题
			
    小书匠Graph图论 重头戏部分来了,写到这里我感觉得仔细认真点了,可能在NetworkX中,实现某些算法就一句话的事,但是这个算法是做什么的,用在什么地方,原理是怎么样的,不清除,所以,我决定先把图 ...
    
			
    3. 
						
  3. 学习C/C++的简单方法
			
    如何学习C++呢.C和C++是很多专业的必修课,尤其对计算机专业来说,更是重中之重.C++语言是早期发展的高级语言,具备执行速度快,语法优美等特点.是底层高效率系统的首选开发语言.今天就和大家分享一下 ...
    
			
    4. 
						
  4. linux下安装apache和php和mysql
			
    我的系统环境时ubuntu 18.04.3,为了ROS: 首先:安装下面一堆软件包: sudo apt install nginx nginx-doc fcgiwrap sudo apt instal ...
    
			
    5. 
						
  5. Struts2（补充）
			
    关于Struts 配置文件(Struts.xml)中结果页说明 <result type=" " name=" "> </result> ...
    
			
    6. 
						
  6. socket.io 消息发送
			
    socket.io学习笔记 1.服务器信息传输: 2.不分组,数据传输: 3.分组数据传输: 4.Socket.io难点大放送(暂时没有搞定): 服务器信息传输 1. // 发送到当前请求套接字客户端 ...
    
			
    7. 
						
  7. i18n 语言码和对应的语言库
			
    语言码 语言名称 af Afrikaans am Amharic ar Arabic az Azerbaijani be Belarusian bg Bulgarian bh Bihari bn Be ...
    
			
    8. 
						
  8. osg fbx 绘制坐标轴、控制模型影藏与显示
			
    int main() { osg::ref_ptr<osgViewer::Viewer> viewer1 = new osgViewer::Viewer; osg::ref_ptr< ...
    
			
    9. 
						
  9. 10--STL无序容器（Unordered Containers）
			
    一:无序容器简介 Unordered Containers也是一种关联式容器.其中元素是分散,没有定性的排列(不是图中那样松散).其中元素可能在某一次操作后改变原来的位置. 哈希表的链地址法,更能表现 ...
    
			
    10. 
						
  10. ios排序NSArray(数字.字符串)
			
    NSArray *originalArray = @[@"1",@"21",@"12",@"11",@"0&q ...
    
			
    11.