前言

工作中一个小小的特效 ✨

本来想运用 perspective-origin ，最后发现不用那么高大上，如果有更好地实现方案欢迎评论区交流~

1.在线尝试

CodeSandbox

2.仓库地址

• Gitee: https://gitee.com/yuziikuko/eyes-mousemove.git
• GitHub: https://github.com/yuziikuko/Eyes_Mousemove.git

（一）项目仓库地址

• 源项目：https://gitee.com/dev-edu/frontend-xiaomi/tree/master
• 练习：https://gitee.com/yuziikuko/du-yi-edu-practice/tree/master/03HTML+CSS%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98

（一）主流浏览器

指有自主研发的内核的浏览器

1.组成

• shell：外壳
• core：内核（JS 执行引擎、渲染引擎）

2.各浏览器内核

（一）CSS 权重

（一）补充重要知识

1.控制尺寸

• 使用 border-box 控制尺寸更加直观，因此，很多网站都会加入下面的代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

以下内容引用自该博客

专门用来对浏览器的样式进行重置，有以下三种方式：

（一）全局

适用于学习场景，容易造成后续代码重叠，样式重复设置等问题

* {
  margin: 0;
  padding: 0;
}

（一）高度塌陷和 BFC

1. 成因

• 在浮动布局中，父元素高度默认由子元素高度撑开
• 当子元素设置浮动脱离文档流后，父元素高度丢失，导致页面结构上移
• https://www.bilibili.com/video/BV1XJ411X7Ud?p=64

2. 解决

（一）translateZ

• 调整元素在 z 轴的位置
  • 正常情况就是调整元素和人眼之间的距离
  • 距离越大，表示元素离人越近
• z 轴平移属于立体效果【近大远小】
  • 默认情况下网页是不支持透视的，所以单独设置 translateZ 看不出效果

（二）perspective

• 如果需要透视效果，必须设置网页的视距
• 一般设置 html 的 perspective 属性

（一）问题

• img 标签默认垂直方向居中
• 多张图片纵向排列时底部会有空隙

（二）成因

• img 标签是行块盒
• 带有文本属性（inline）的元素在行内会按照文本基准线对齐

（三）解决

1.设置 img 垂直顶部对齐

img {
  vertical-align: top;
}

Bootstrap v3

最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

https://v3.bootcss.com/components/

Bootstrap v4.6

最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

https://v4.bootcss.com/docs/components/alerts/