background:url(./loading.gif);
}
//判断是否支持animation 属性,支持则增加动画效果
@support (animation:none) {
.loading{
width:10px;
heigth:10px;
background:url(./loading.png);
animation: spin 1s linear infinite;
}
@keyframes spin{
from { transform: rotate(360deg);}
to {transform: rotate(0deg);}
}
}
例如:使用position:sticky 实现滚动粘滞效果,传统浏览器使用js支持。
//js 判断是否支持positon:sticky 属性 CSS.supports(propertyName,value)
if( !window.CSS || !CSS.supports || !CSS.supports(‘position’,‘sticky’){
//TODO
}
fit-content
fit-content 我们可以理解为内容的大小,如果把内容理解为"大腿",那么fit-content就是"紧身裤"
需求:文本少的时候,文本水平居中,多行文本的时候,文本向左对齐(这什么鬼需求,但我确实遇到了)。
// 传统实现
.content{
display:table;
margin:auto;
}
// 如果是内联元素
.content{
display:inline-block;
margin:auto;
}
// fit-content 实现
.content{
width:fit-content;
margin:auto;
}
fit-content 优势
-
保护了元素原始的display计算值,例如 li 标签设置成display:table,前面的项目符号就不会出现,::marker伪元素也会失效。
-
让元素尺寸有了确定的值。
针对第二点让元素有了确定的值,我们的应用场景。例如:我们利用绝对布局,使用margin:auto 来实现居中效果,需要我们设置具体的with或者height的属性值。
.test2-center{
position: absolute;
width: 300px;
height: 200px;
background: red;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
有的时候我们不确定width,height,我们就会使用transform 来实现居中
.test3-center{
position: absolute;
left: 50%;
top: 50%;
background: red;
transform: translate(-50%, -50%);
}
这个时候我们如果需要给 test3-center 添加一个位移动画
@keyframes move{
from { transform:translateY(5px);}
to { transform:translateY(0); }
}
这个时候我们的transform就会受到位移动画干扰。
更好的方法是使用我们的 fit-content,这样就有了确定的宽高,居中可以生效了。
.test3-center{
position: absolute;
width:fit-content;
height:fit-content;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
animation: move .2s;
}
border-image
border-image 属性作用过程分为两个点:
-
源图像的划分(九宫格)
-
九宫格尺寸的控制
border-image 成员组成:
-
border-image-source //图像资源,不讲解
-
border-image-slice
-
border-image-width
-
border-image-outset
-
border-image-repeat
border-image 应用场景:设计师给了我们一张list的背景图,背景图四个角有不同的小图案,中间区域可以拉伸,由于list的高度是不固定的,我们不能确定背景的高度,只能靠内容填充,这就需要我们的背景拉伸,设计师的原则:四个角不变形,中间区域拉伸。这个时候我们的border-image就可以出场了。
border-image类似于安卓中常用到的.9图。
下面案例使用源图像如下:
image.png
九宫格
border-image 划分九宫格如下:
image.png
border-image 会将这九宫格作用在源图像上。
border-image-slice
//语法
border-image-slice: {1,4} && fill?
表示支持1 ~ 4个数值或者1 ~ 4个百分比值,后面带一个fill关键字,fill关键字可选。border-image-slice 用于划分源图像,划分的方位和顺序为:上,右,下,左。
例如:border-image-slice:100 ,表示距离源图像上方100px,距离源图像右侧100px,距离源图像下方100px,距离源图像左侧100px,这个时候四个角1,2,3,4都被固定了,其他区域拉伸。
.test5 {
position: relative;
width: 400px;
height: 300px;
border: 50px solid red;
border-image-source: url(“./bg1.png”);
border-image-slice: 100;
}
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
中…(img-PS0HOGGP-1715823713596)]
[外链图片转存中…(img-wvyW2uPu-1715823713596)]
[外链图片转存中…(img-h4aAYbS4-1715823713597)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!