发表于: 2016-07-23 22:08:39
1 1517
今天完成的事情:勉强完成task7.......调试页面调试了好久,看来不能随便用百分比,稀碎。写了个超级简陋的task主页。
明天计划的事情:明天得出门,时间不多就把之前的task都改改,现在看来之前好多的问题
遇到的问题:在本地写好的代码用Firefox调试后上传到服务器,再用Firefox从服务器打开为什么会格式不一样?
收获:(轮播图是用教程里面纯css3的那个方法写的,对@keyframe也有了一些了解。现在的学习基本上就是囫囵吞枣,太多不懂的地方,有时候也来不及每个问题都看到,只有边完成任务边看知识点,当后面的任务完成之后,对前面的问题也有了答案。
关于@keyframe的理解;
@keyframes pic_1 {
0% { opacity: 0;}
15% { opacity: 1;}
25% { opacity: 1;}
90% { opacity: 0;}
100% { opacity: 0;}}
假设animation-duration:100s,上面代码的意思就是:
0-15s线性对应图片opacity:0~1;
15-25s图片保持opacity:1;
25-90s线性对应图片opacity:1~0;
90-100s图片保持opacity:0;
当效果循环展示时,第一周期的100s即是第二周期的0s,因此在不设置播放延迟的情况下,一周期两端点状态应保持一致。
若想多个图片均匀渐变,则应保证各个图片的“渐变时间”彼此相同,“持续时间”彼此相同。
评论