一
规定转换 transform-origin: left bottom ；
帅字初始位置
轮子水平向右转动 transform：translate（）rotate（Xdeg）；
图片放大1.5倍 transform：scale（1.5）
边框圆角 border-radius：50%；
二
华为综合案例第二遍
1·图片悬停放大效果 ，错误写法：img:hover {transform: scale(1.2)}（后续会给a标签加渐变背景，那时候悬停在图片上会认为是悬停在a上 看不到图片放大效果）
正确写法：a:hover img {
transform: scale(1.2);
}
2·伪元素无渐变效果
错误原因1，未设置伪元素的宽高 width: 100%；height: 100%;
2，写法错误：缺linear-gradient 透明与渐变用逗号隔开
正确写法：background-image: linear-gradient(transparent,rgba(0, 0, 0, 0.781));
添加透视
perspective：800px(初始离我们800px，)
transform:translateZ(600px)(向我们走600px)
3D效果
transform-style: preserve-3d;（tfs）
小米li栏3D突出效果
transform: translate3d(0,-2px,0);
动画@keyframes move
animation：
调用动画 animation：move 5s infinite alternate linear 2s forwards;
动画播放次数：infinite 无限次播放
动画交替播放（播放完慢慢收回）：alternate
匀速播放：linear （速度曲线默认值ease）
逐帧播放：steps（12）
执行完毕时最后一帧状态：forwards
当属性值有两个时间，第一个永远表示动画播放时长，第二个表示等待时间
forwards 不能和 infinite 结合使用 ，效果会不生效
animation-play-state：paused 暂停动画 配合hover使用
精灵图奔跑注意点 ：
1.大盒子引入精灵图，都是bgu ,而不是bgi，因为精灵图需要有定位坐标
2.奔跑精灵图移动距离应该是 background-position: -1680px 0；
ul>li*7>img[scr="./images/$.jpg"]
走马灯思路（7张图）：
1去除边距m0+p0；
2去除li样式；
3盒子大小w600+h112，边框()；
4图片缩放 w200；
5 ul设置宽度，如果走7张图会出现一段空白时间，所以要加3张图，后面加的3张图只是填补视觉空白
6 li左浮动
7设置动画，向左移动7个图的距离。注意 是ul动。如果给box，box也会跟着一起跑
8盒子悬停 会 暂停
三
1.移动端特点
2.百分比布局
display: flex;
justify-content: space-between;
align-items: center;
小兔鲜儿
1.地址信息思路:
框架：
大盒子，包裹两字体图标
2.商品
display: flex;
/* 默认值 flex-start*/
/* justify-content: flex-start; */
/* 从终点开始排列 flex-end*/
/* justify-content: flex-end; */
/* 沿主轴方向水平居中 center*/
/* justify-content: center; */
/* 空白距离会均分在盒子的两侧 space-around*/
/* justify-content: space-around; */
/* 空白间距均分在相邻盒子之间 space-between*/
/* justify-content: space-between; */
/* 弹性盒子与容器之间间距相等 */
/* justify-content: space-evenly; */
四
/* 修改主轴方向：主轴 变成从上往下 flex-direction: column;
弹性盒子与容器之间间距相等 justify-content:space-evenly;
df二连 display: flex;
flex-wrap: wrap ;自动换行
min-height :600px; 高度的最小值为600px ,可以由内容撑大；
小兔鲜儿个人中心模块
1.先 画盒子 左右 flex
2.左右盒子设置宽高
3.左盒子做头像盒子模块：图片 p 盒子：包裹VIP和文字
4.头像盒子设置宽高，边框 ，竖直向下排列 4段代码
5.头像照片设置宽高
6.p设置文字大小。上下边距
7.VIP图片设置宽高
8.VIP内容复制psd内容，设置文字水平垂直居中
9.注意图片与文字对齐方式
五
媒体查询的基本使用
@media (width:414px) {
html {
font-size: 40px;
}
}
.less
@import url(./base.less);
@import url(./normalize.less);
压缩css文件
//compress ：true
六
复制footer里面的多个P标签方法：
点到footer部分，鼠标右键Edit as HTML
查看底部固定定位部分离底下的距离：看盒子模型，
头部 固定定位 缩放时一直居中：
：头部left50%
transform： translate（-50%）
注意and 前后 必须跟空格，写单位
@media (min-width:768px) and (max-width:991px) {
body {
bgc:
}
}
七
版心：container
在less 里面输入//out../css/
引入icon link favicon
2.引入bootstarp.min.css
-- 引入自己的css文件 --