今天完成的事情：
今天按照网上的教程做轮播图，但不知道为什么实现不了轮播的效果，只好先了解一下轮播图的新标签以及含义；
html
<main>
<section class="slider-contaner">
<ul class="slider">
<li class="slider-item slider-item1"></li>
<li class="slider-item slider-item2"></li>
<li class="slider-item slider-item3"></li>
</ul>
</section>
</main>
css
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
.floatfix {
*zoom: 1;
}
.floatfix:after {
content: "";
display: table;
clear: both;
}
.slider-contaner {
width: 100%;
position: relative;
}
.slider, .slider-item {
padding-bottom: 30%;
}
.slider-item {
width: 100%;
position: absolute;
background-size: 100%;
}
.slider-item1 {
background-image: url(5.png);
}
.slider-item2 {
background-image: url(29.png);
}
.slider-item3 {
background-image: url(30.png);
}
@keyframes fade {
0% {
opacity: 0;
z-index: 2;
}
5% {
opacity: 1;
z-index: 1;
}
20% {
opacity: 1;
z-index: 1;
}
25% {
opacity: 0;
z-index: 0;
}
100% {
opacity: 0;
z-index: 0;
}
}
.slider-item + .slider-item {
opacity: 0;
}
.slider-item1 {
animation-delay: -1s;
}
.slider-item2 {
animation-delay: 3s;
}
.slider-item3 {
animation-delay: 7s;
}
.slider-item4 {
animation-delay: 11s;
}
.slider-item5 {
animation-delay: 15s;
}
section
这个标签是定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
@keyframes
这个应该是应该动画的表达形式吧，我现在还不是特别清楚。
animation-delay
这个我理解的意思就是后面的数字代表了过几秒钟就会跳转到下一个动画。
明天的计划：
1完成轮播图
2完成任务一里的内容。
遇到的问题：
主要是轮播图的部分，我是计划先将网页上教程的代码先直接带入到我的代码中，然后一个一个的了解其中的原理，然后在进行修改，但是我这种直接带入好想并不能实现轮播图，也找不到原因。
任务13任务总结
做完任务13，对之前的一些知识点有了更为深入的了解，也充分的意识到了之前对基础知识了解不足的地方，之前用了三天的时间才把三个页面，现在我只用了一天就做出来来，这应该也是一种小小的进步吧，也有很多收获的地方，学会了用css写三道杠的快捷方法就是 border-top: 15px double #fff;这里的double ，可以直接网上写两个border，可以说是非常方便
第二个页面的投票部分基本上任务一九宫格的加强版，加强了对样式的理解以及对定位的理解，不过我这里是用flex做的，可以说是非常的简单，flex也是非常的好用。
第三个页面也没什么难度，只要有耐心一般都没什么太大的问题。
官方脑图
个人脑图
收货：大致了解了用css轮播图制作的过程
html代码没有什么可说的，样式的话首先必定slider的大盒子必定是相对定位，另外我们采用在li标签中添加background-image，因为这样才有可能用纯的css实现响应式，另外背景图为了在响应式中看清全貌，必然使用background-size:100%，另外就是高度问题了，显然slider-container必需是和li的高度一致，因为响应式中必然这个高度不能固定死，所以使用height属性显然不行，padding属性可以解决这个问题，一是background-image可以显示在padding中，二是padding中以%为单位是以父元素宽度为基准的。
淡入淡出效果肯定是使用opacity，首先整体来看所有图片的淡入淡出都是同一个动画，只是时间不一样而已，这肯定是利用animation-delay来控制，动画无限轮换肯定使用animation-iteration-count: infinite，我们这次5张图片，整个动画分为图片停留和淡入淡出两个效果，用下图表示，箭头表示淡入淡出过程。
因为css3中没有一个属性是规定两次动画播放的时间间隔，所以我们必须把其他图片淡入淡出时该图片的效果写进动画里，显然这时候是opacity:0；
我们为了写动画的方便，动画使用线性函数，也就是animation-timing-function:linear;整个过程使用20s，一次停留使用3秒，一次淡入淡出使用1s，折合成百分比也就是15%和5%；
接下来就是为每张图片添加animation-delay了，因为第一张图片必须显示在最前，所以其他通过相邻兄弟选择器使用opacity:0，第一张图片开始不需要淡入淡出，直接跳至停留也就是5%，所以animation-delay为-1s，第二章图片和第一张相隔20%，也就是4s，animation-delay为3s，以此类推
返回列表
评论