发表于： 2019-11-13 22:38:09
1 900
今日完成:
开始以为自动播放需要过渡属性,结果需要@keyframes,属性,
自动播放需要应用属性:
@keyframes
使用@keyframes规则创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。
为了获得最佳的浏览器支持，应该始终定义为0％和100％的选择器。
代码如下:
.box-1 {
position: relative;
width: 400vw;
overflow: hidden;
animation: carousel linear 10s infinite 0s normal;
.box-img {
display: block;
width: 100vw;
height: 30vw;
float: left;
}
@keyframes carousel {
0% {
left: 0;
}
18% {
left: -0vw;
}
36% {
left: -100vw;
}
54% {
left: -100vw;
}
72% {
left: -200vw;
}
90% {
left: -200vw;
}
100%{
left:-300vw;
}
总结:
1.carousel
自己取得动画名称,是必须存在的,相当于label和input中的for和id的名字,用来连接类名.box-1和@keyframes
2.@keyframes
必需的。动画持续时间的百分比。
合法值：
0-100%
from (和0%相同)
to (和100%相同)
ps: from (和0%相同)
to (和100%相同)
适用于只有一次改变的效果
任务中有多个keyframes选择器
3.animation: carousel linear 10s infinite 0s normal;
animationname
必需的。定义animation的名称。
linear 10s
整个@keyframes
所用的时间
任务中是按照,百分比平均分配,
36% {
left: -100vw;
}
54% {
left: -100vw;
}
中间两个不同的百分比,同一个距离,代表在这张轮播图中,停留的时间,
54% {
left: -100vw;
}
72% {
left: -200vw;
}
不同的距离代表从这张图到下张图过渡所需要的时间
4.infinite
infinite为无限循环，让轮播无止尽的循环下去
5.0s normal
添不添加是不影响的,暂时没搞清用途
遇到问题:
轮播图到最后一张,跳到第一张,不是类的过渡的动画效果,而是有一个空白的时间间隙,然后闪回到第一张图,
需要效果:最后一张像之前一样平稳的过渡到第一张
解决:在第三张轮播图后再插入一张第一张轮播图,填补空白的间隙,可以平稳的过渡到第一张
ps:%100到%0之间是没有分配时间的,所以才有闪回和空白,同样再插入一张图片也不会连续出现两次第一张轮播图
遇到问题:
描述:设置弹性布局两个块级元素添加下划线,下划线(边框)高度不一致
demo:
<div class="flex123">
<p class="p123">第一个文本,有向下外边距</p>
<p class="p456">第二个文本,在第一个基础上加左边边距</p>
</div>
.flex123{
display: flex;
background: yellow;
}
.p123{
background: red;
border-bottom:10px solid;
margin-bottom:10px
}
.p456{
border-bottom:10px solid;
background: blue;
margin-bottom:5px;
}
绿色为内容,被第一个块级元素,整个属性撑开
设置下划线
设置向下的外边距
原因(总结):
1.弹性布局的子元素,上下的外边距不会产生bfc,即:边距坍缩
2.第一个盒子内容,下边框,外边距撑开了父元素宽度,根据align-items:sctretch属性,第一个盒子的内容+边框+外边距是第二个盒子内容
3.为第二个盒子添加,边框,外边距,发现盒子没有在内容基础上撑开,而是向内减小内容高度,它们从设置的方向向内延伸,知道碰到实际的
文本内容,开始撑开高度
在任务中,因为两个块级元素设置的外边距不同,所以下划线不一致
验证,第二个块级元素撑开高度
第一个元素内容开始增加,验证成功
4.要想下划线一致,两种方法;
1.设置同样的外边距,
2.设置align-items: flex-start;属性
ps:flex-shrink: 0;在这里无效
遇到问题:
同一html文件中的超链接
解决:
在a标签href="#名字"设置名字,点击,就会跳转到
标签中添加"id=名字"的标签这里.
ps:
1.查到的同一html文件中的超链接,都是"name=名字",亲测无效,看到href="#名字"中,#在css中是id命名的类,
所以把"name=名字"改为"id=名字",有效,
原因:待解决
2.href="#名字"中#改为".",同样用name也是无效,id也无效.
遇到问题:
1.同上
2.考虑设置属性和结构,还是不够全面,自以为的和现实还是有差距,要多思考逐渐让,想的和呈现的尽量一致
3.命名还是不够规范或者是对less嵌套,继承的理解片面,导致在某些地方卡了一些时间
收获:
1.@keyframes的用法
2.flex布局,垂直方向的实践认知
明日计划:
1.12点前,总结梳理task14,15.做思维导图等
2.12点后,开始学习js
返回列表
评论