发表于： 2020-05-09 21:27:35
2 1229
今天完成的事情：
任务14,15完成。开始准备js的学习准备，初步了解一些关于js的知识。
明天计划的事情：
学习js任务1，尝试解决。
遇到的问题和收获：
在写轮播图焦点的时候没什么头绪，轮播图的自动实现方式用的是margin-left和float-left进行实现，焦点如何改变颜色没想到思路。
搜索了不少资料，以及参考了师兄的任务总结，后面搜索到使用opacity来写焦点，期间不理解如何分配停留时间和圆点间的时间长短，
这三个属性可以简写为animation：fade linear infinite；也可以在fade后面加个秒数，不过为了方便看还是使用
然后分别给各个圆点分配秒数使用
再使用父级相对，子级绝对定位把焦点（小圆圈）定到轮播图下方进行居中。
关于如何设定时间以及渐变，时间使用animation-delay分配秒数，再使用@keyframes关联名称（可自定义名称），开始时0%为显示状态，显示到25%，留点时间渐变为透明，一开始不懂这个百分比的意思，以为要设置到100%于是设置了66%，99%之间的变化，但是产生了不少问题，比如一起显示一起消失之类的。在写这个的时候，逐渐了解了关于animation的一些属性，对于如何分配动画时间也比较清楚了。虽然写这个焦点卡了我差不多三个小时。
其他部分的问题基本是以前解决过的，这次修复细节。
返回列表
评论