Day17笔记
一、图片优化的四种方法
1、css sprite/精灵图/雪碧图/
图片整合技术,将小图整合到一张图上,通过定位显示。
2、base64格式
将图片变成代码的形式,百度搜索“图片base64”,选择《base64图片在线转换工具-站长工具》网站,上传图片,复制转换的代码。
<img src="base64代码"/>
3、svg格式
svg意为可缩放矢量图标,svg使用XML格式定义图像放大或缩小不会变形,这是H5新增的形式
XML为自定义标记语言,xhml不能自定义。
svg为代码编写成的图片,更适合浏览器的运行
4、iconfont字体
在iconfont网站上下载,再引入iconfont.css文件,就可以使用iconfont字体。
二、修改字体样式
服务器字体,有些字体例如艺术字体,浏览器本身是不支持的,所以可以引用
1、下载字体文件
2、
@font-face{
font-family:"自定义字体名称";
src:url("字体文件路径及文件全称");
}
需要修改字体样式的标记{
font-family:"自定义字体名称";
}
三、渐变
1、从一个东西慢慢过渡成另一个东西,例如:red、green
2、css3新增的渐变分为两种:
=> 线性渐变:从一个方向到另一个方向的渐变
=> 径向渐变:从圆心向四周进行扩散渐变
3、以前的渐变都是UI设计的图片,现在渐变可以通过代码的形式实现,由于不使用图片直接是编码,浏览器执行效率会更高
background-image:
属性:linear-gradient 线性渐变(一边向另一边)
属性值:
值一:to left 右向左
to right 左向右
to top 下向上
to bottom 上向下
数值+deg 角度
值二:颜色 数值%/数值px 渐变颜色的具体位置
属性:radial-gradient 径向渐变(中心向四周,圆形)
属性值:
值一:circle 矩形中呈现椭圆形渐变,使用circle可变成圆形渐变
值二:颜色 数值%/数值px 渐变颜色的具体位置
四、重复渐变
注意点:后面重复性渐变的颜色值的位置不能小于前面的
语法:background-image: repeating-linear/radial-gradient(渐变颜色 渐变颜色位置)
五、过渡属性
transition-property: all; 选择需要过渡的属性
transition-duration: 3s; 过渡的时间
transition-delay: 2s; 过渡延迟时间
transition-timing-function: 过渡速度属性
六、变形属性transform
作用:可以让咱们对元素进行位移、旋转、缩放
注意点:
1、transform属性只能存在一个,多个的时候后面的会把前面的进行覆盖。
2、翻转时,图片的XYZ轴会跟着进行旋转。
3、位移使用百分比时,位移的距离为自身尺寸的百分比。
属性值:
translateX() X轴上进行位移
translateY() Y轴上进行位移
translateZ() Z轴上进行位移
scaleX() X轴上缩放,大于1表示放大,小于1表示缩小
scaleY() Y轴上缩放,大于1表示放大,小于1表示缩小
scaleZ() Z轴上缩放,大于1表示放大,小于1表示缩小
rotateX() X轴翻转
rotateY() Y轴翻转
rotateZ() Z轴翻转
七、变形原点transform-origin
属性值:
left
right
top
bottom
center
注意点:默认点为中心,接受两个属性值一起写。
八、立体空间transform-style
将平面空间转成立体空间
不转换,只能看到最前面的图片的平面效果,无法看到侧面、顶面及底面。
transform-style:preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
}
九、prespective透视(景深)属性
prespective:500px;
近大远小效果
注意点:设置在父元素上,值越小,效果越近,越大