【鸿蒙开发从0到1 day05】

一. 清除浮动

1.当外面的大盒子,仅仅只设置了宽度,里面的子盒子为了行排序,
设置了浮动,以至于小盒子脱标,大盒子的高度为0,这个时候就会导致大盒子下面的盒子会跑上去
解决办法
	方法一:给父盒子添加overflow:hidden,这个就是如果子盒子有溢出,,溢出部分会隐藏
	方法二:在子盒子的最后面添加一个块级标签,然后给这个块级标签设置一个清除浮动,clear:both;
	方法三:给父盒子添加一个伪类选择器

二.字体图标

我们开发过程中会使用到各种小图标,除了可以用精灵图之外,我们可以用字体图标,精灵图它图片放大会有失真

阿里字体图标链接

注册-登陆-素材库-加入购物车-下载至项目-引入`iconfont.css


运行结果:

三.平面转换transform

作用:为元素添加动态效果,一般与过渡transition配合使用

概念:改变盒子在平面内的形态（位移、旋转、缩放．倾斜)

1.平移

属性transform:translate(x轴距离,y轴距离)
取值:
像素单位数值
百分比(参照盒子本身尺寸计算结果)
正负均可
技巧:
1.translate()只写一个值，表示沿着×轴移动
2.单独设置×或Y轴移动距离:translateX()或 translateY()

运行结果:
向右边偏移100px

2.盒子垂直水平居中

运行结果:

四.双开门案例-transition和transform

五.平面转换-旋转

transfrom:rotate(角度deg)
可以让图片添加旋转效果

六.多重转换

ps 旋转方向必须放在位移的后面,因为放在
前面,位移过程中就会改变位移的方位,导致轮子跑出来

运行结果:

七.平面转换-缩放

属性:
transform: scale(缩放倍数);
transformm: scale(X轴缩放倍数,Y轴缩放倍数);
技巧
通常，只为 scalel设置一个值，表示×轴和y轴等比例缩放取值大于1			表示放大，取值小于1表示缩小

运行结果:

八.空间转换

空间︰是从坐标轴角度定义的X、Y和Z三条坐标轴构成了一个立体空间，Z轴位置与视线方向相同。
空间转换也叫3D转换
属性: transform

1.空间转换-平移

属性
transform: translate3d(x,y,z);
transform: translateX();
transform: translateY();
transform: translateZ();
·
取值〔正负均可)
像索单位数值
百分比(参照盒子自身尺寸计算结果)

提示
默认情况下，Z轴平移没有效果

2.视距

视距perspective
作用:指定了观察者与Z=0平面的距离，为元素添加透视效果
透视效果:近大远小、近实远虚
属性:(添加给父级。取值范围800-1200)
transform:translateZ();对空间转换的Z图的变化,如果数值为负数,图形变小,正数则变大

3.空间-旋转

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

4.立体呈现-transform-style

作用:设置元素的子无素是位于3D空间中还是平面中

属性名: transform-style

属性值:
	flat:子级处于平面中
	preserve-3d:子级处于3D空间

呈现立体图形步骤
1.父元素添加transform-style: preserve-3d;
2．子级定位
3.调整子盒子的位置〈位移或旋转)
●提示
空间内,转换元素都有自已独立的坐标轴，互不千扰

线性渐变

线性渐变
属性:
background-image: linear-gradient
渐变方向,
颜色1终点位置,
颜色2终点位置,;
取值
渐变方向:
可选to方位名词
角度度数

运行结果:

九.动画-animation

过渡:实现两个状态间的变化过程,必须结合hover使用

动画:实现多个状态间的变化过程，动画过程可控（重复猫放、最终画面、是否暂停)

步骤:
	1.定义动画

	2.使用动画
	animation:动画名称,动画花费时长
	当from的值和初始的值一致的时候,from的值可以省略

运行结果:

2.逐帧动画

精灵动画制作步骤
1．准备显示区域
	盒子尺寸与一张精灵小图尺寸相同3
2.定义动画
	移动背景图〔移动距离=精灵图宽度)
3.使用动画
	steps(N)，N与精灵小图个数相同

运行结果

十.总结

本章主要是学了清除浮动的一些常用方法,还分享了一个开发过程中会用到的一个字体图标,以及它的获取方式平面和空间的转换,线性渐变,css动画