随笔分类 -  css

摘要：3D导航栏 旋转木马 阅读全文

摘要：1. 呈现 1. ☆☆☆☆☆ 控制子元素是否开启三维立体环境 代表子元素不开启 立体空间，默认的 子元素开启立体空间 代码写给父级，但是影响的是子盒子 2. 代码演示 阅读全文

摘要：旋转 3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转 1. 语法 沿着 x 轴正方向旋转 45 度 沿着 y 轴正方向旋转 45 度 沿着 z 轴正方向旋转 45 度 沿着自定义轴旋转 45 deg 为角度 2. 代码案例 3. 左手准则 左手的手拇指指向 x 阅读全文

摘要：【经试验，Z轴的位移距离大于或等于perspective时，元素不显示。】 1. 知识点讲解 如果想要网页产生 效果，需要 透视 (理解成 物体投影在 平面上) 实际上模仿人类的视觉位置，可视为安排一直眼睛去看 透视，也称为 视距 ，所谓的视距，就是人的眼睛到屏幕的距离 【 透视越小，物体看的越大， 阅读全文

摘要：一、 认识 转换 1. 的特点 近大远小 物体后面遮挡不可见 2. 三维坐标系 x 轴：水平向右 注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 注意：往外边的是正值，往里面的是负值 二、 转换 1. 转换知识要点 位移： 【transla 阅读全文

该文被密码保护。

摘要：转换综合写法以及顺序问题 1. 知识要点 同时使用多个转换，其格式为 顺序会影响到转换的效果(先旋转会改变坐标轴方向) 但我们同时有位置或者其他属性的时候，要将 位移放到最前面 2. 代码演示 阅读全文

摘要：1. 的作用 用来控制元素的放大与缩小 2. 语法 3. 知识要点 注意，x 与 y 之间使用逗号进行分隔 : 宽高都放大一倍，相当于没有放大 : 宽和高都放大了二倍 : 如果只写了一个参数，第二个参数就和第一个参数一致 : 缩小 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且 不影响其 阅读全文

摘要：transform-origin 基础语法 transform-origin: x y; 重要知识点 注意后面的参数 x 和 y 用空格隔开 x、 y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center 还可以给 x y 设置像素，或者方位名词(top、bottom 阅读全文

摘要：1. rotate 旋转 旋转指的是让元素在二维平面内顺时针或者逆时针旋转 2. 语法、使用步骤： （1）给元素添加转换属性 （2）属性值为 ， 如 顺时针方向旋转 30度 3. 重点知识点 里面跟度数，单位是 角度为正时，顺时针，角度为负时，逆时针 默认旋转的中心点是元素的中心点 4. 代码演示 阅读全文

摘要：```html Document 123 哈哈哈 ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191223154057942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3BvbH 阅读全文

摘要：/ 移动盒子的位置： 定位、盒子的外边距、2d转换移动 / 1. 转换 转换是改变标签在二维平面上的位置和形状 移动： 【位移】 旋转： 缩放： 2. 语法 x 就是 x 轴上水平移动 y 就是 y 轴上水平移动 3. 重点知识点 的移动主要是指 水平、垂直方向上的移动 最大的优点就是 不影响其他元 阅读全文

摘要：1. 伪元素选择器 【伪元素：不是真正的元素，但是具有元素的一些特性。】 【 伪类：不是真正的类，但是具有元素的一些特性。】 【类数组：不是真正的数组，但是具有数组的一些特性。】 ::before 在 元素内部的前面 插入内容。 【一个冒号:，也可以，但是两个冒号是最正式的写法。】 ::after 阅读全文

摘要：如果页面中有两个这样的div结构，则两个第一个<span>我是span</span>，都是pink <div> <p>我是一个p标签</p> <span>我是span</span> <br> <span>我是span</span> <br> <span>我是span</span> <br> </di 阅读全文

摘要：1. 什么是 在 的基础上拓展、新增的样式 2. 发展现状 移动端支持优于 端 目前还草案，在不断改进中 相对 ，应用非常广泛 3. 属性选择器列表 4.属性选择器代码演示 阅读全文

该文被密码保护。

摘要：:focus 伪类 选择器：用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素。 :hover 语法： ~~~css .total input { border: 1px solid ccc; height: 30px; width: 40px; transition: all .5s; } 阅读全文

该文被密码保护。

摘要：过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画： 是从一个状态 渐渐的过渡到另外一个状态 可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie 阅读全文

摘要：CSS3：background size 1、定义：background size属性规定背景图像的尺寸。 2、用法：background size：length | percentage | cover | contain 属性值： length：设置背景图像的高度高度和宽度。第一个值设置宽度，第 阅读全文