【鸿蒙开发从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动画