Day 3

文字属性

字体font-family：宋体；

设置的字体要在系统中存在。若不存在，则按照默认样式展示。

大小font-size：100px；也有bold、normal、lighter等属性值

设置字体大小,默认正常，100~900越大越粗

颜色color：red；

字体水平方向排布text-align；left/center/right

默认向左，设置文字的水平位置

行高line-height：200px；

常用于设置垂直居中。例如div中放文字，文字的行高和div的行高一致则可居中

阴影text-shadow：10px 5px 5px balck：

水平偏移距离、垂直偏移距离、模糊度、阴影的颜色
如果不偏移的话，那么就有一种文字本身扩散的效果
- 如果再调整阴影颜色为黄色，那么就有一种发光的效果
- 阴影是可以叠加的。叠加就是字面意思的叠加效果。
发光增强效果：通过多个阴影叠加达成。text-shadow：0px 0px 5px yellow，0px 0px 5px orange；还可以叠加更多个。
如果有偏移叠加的话，可以做出3D效果。例如第一个偏移2px，第二个偏移4px，依此类推
加上动画还可以做成呼吸灯效果

项目·发光和3D文本效果

项目·文字呼吸灯效果

过渡效果

div的宽度变化再配合hover演示，最容易理解

设置需要过度的属性transition-property
设置过度的时间transition-duration
设置过度的速度transition-timing-function
- 同样时间内，可以有不同速度变化
设置延迟时间transition-delay

#d1{
            height: 100px;
            width: 200px;
            background-color: green;

            transition-property: width;
            /* 若要设置该选择器内多个属性的过渡效果，可用,隔开添加多个
            transition-property: width,background-color;
            设置该选择器内所有属性都生效，可用all
            transition-property: all; */
            transition-duration: 3s;
            /* ease是先加速后减速，ease-in是减速，ease-out是加速，这些在浏览器调试工具都可以看到 */
            /* 速度变化是可以自定义的，到浏览器调试工具中可以先调试，然后复制贝塞尔曲线到css中即可 */
            transition-timing-function: ease;
            transition-delay: 2s;
			/* 综合设置，不需要设置那么多属性，一行代码搞			定（与设置文字综合效果一样）。顺序为属性
            时间、速度、延迟 */
            transition: all 0.5s linear 1s;
        }
        #d1:hover{
            height: 100px;
            width: 1000px;
            background-color: orange;
        }

项目·用多种设置方式，写一个颜色和和长度变化的进度条

项目·做出按钮鼠标放上去的悬浮效果

转换

同样用矩形来做演示，方便理解

2D移动：水平和垂直方向的位移

写法一：transform
写法二：transform：translatex(npx) translatey(npx)

2D旋转（在平面上旋转）

transform：rotate（ndeg），按顺时针

3D旋转（用一根竹签横着串起来，转动竹签就是x轴旋转，竖着串起来转动就是y轴旋转，所以z轴旋转就是用竹签刺穿屏幕转动竹签，也就是2D旋转），但实际上也只是3D在2D上的投影，并不是真正的“3D”

transform：rotateX（ndeg）
transform：rotatey（ndeg）
如果想看3D的旋转的话，需要设置一个透视点，就是距离屏幕多远的地方看你的旋转
- 设置父元素{perspective：1000px}
当然可以同时三个轴旋转

项目·做出微软logoy轴旋转45度的效果

3D移动

水平和垂直移动和2D一样的，所以只看z轴的移动
首先设置父元素透视点的距离，然后设置子元素移动z轴的距离
- 注意往z轴移动会放大。
- 注意要先将子元素设置到正中央，否则移动的过程会跑偏出屏幕

项目·立方体（六张图片组成立方体）

需求：鼠标放上去可以旋转（此时肯定要考虑过渡效果）

思路：先将六张图片放到同一个地方。然后将立方体前面的图片设置z轴移动，后面的设置z轴移动负距离，左右和上下的同理。前后的最简单只需要移动，但是上下左右的还需要旋转+移动

transform：rotateY（90deg） translateZ（100px）

难点：

div放图片
div宽高和图片不一样的处理方法
定位问题
设置body的透视点后，如何保留图片div的3D效果（？）
- 为什么要保留？
透明度如何处理？
如何实现鼠标放上去就旋转

选项框

17素材网上有立方体旋转查看的实例，通过选项框实现旋转到特定面。

选项框是输入input标签，

单选框的type属性为radio，若多个单选框的name一样，则认为这些一样的选项只能选择其一

复选框的type属性为checkbox，同样需要设置name一样

因为有选中的状态（checked），所以可以用这个来做点事情。

和hover类似的checked选择器

项目·两个单选框，选择第一个，单选框下面的div方框变成黄色

难点：checked选择器如何再选择到div元素呢？
- 用~选择（+是接下来的一个）

当然之后可以用js来实现。

如何改变选项框样式？

label标签。for属性为绑定的对象id（因为唯一），如这里需要绑定输入框
这样隐藏输入框后（添加hidden属性），再通过设置label样式，达到改变选项框样式的效果
- 如边框、圆角，甚至hover在设置盒子阴影等等样式美化

立方体（转换）与选项框

transform缩放：

放大transform：scale（倍数）
缩小transform：small（倍数）
此外还可以通过移动Z轴来放大缩小
- 但可能会出现放大后滚出界面的情况，需要再加一个定位到正中央的样式

选项框必须与要控制的内容同一层级（代码中同一列/同缩进），label则可以不用同一层级

第三天