HTML+CSS学习Day17笔记

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;

近大远小效果

注意点：设置在父元素上，值越小，效果越近，越大