css3第二天

CSS3

颜色

透明度
opacity：直接设置透明度，但是会被子元素继承透明度
transparent：只能将透明度设置为0，不能调节；可以用在backgroud或者background-color属性上，不能用在background-image属性上。
rgba:…
hsla:H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360 ;S： Saturation(饱和度)。取值为：0.0% - 100.0% ;L： Lightness(亮度)。取值为：0.0% - 100.0% ;A： Alpha透明度。取值0~1之间。

渐变

• [ background-image ]： 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
• 渐变不需要两个状态，所以直接写在要改变的元素的样式里
• 渐变的位置有百分比表示，如果第一个颜色设置了百分比，该位置前的颜色是纯色
• 角度是按顺时针方向计算

//线性渐变
 .gradient {
            display: inline-block;
            height: 100px;
            width: 100px;
            background: green;
            /*设置渐变*/
            /*param1:变化的角度；prama2:变化颜色和位置*/
            background-image: linear-gradient(
                    90deg,
                    skyblue,
                    pink 25%,
                    yellow 50%,
                    gray 75%,
                    orange
            );
        }
//径向渐变
.gradientTwo {
            display: inline-block;
            height: 100px;
            width: 100px;
            background: green;
            /*设置渐变*/
            /*param1:变化的范围和圆心的位置；prama2:变化的区间和颜色*/
            background-image: radial-gradient(
                    100px at 50% 50%,
                    skyblue,
                    pink 25%,
                    yellow 50%,
                    gray 75%,
                    orange
            );
        }

//这样写就不会发生渐变，而是颜色交替
 background-image: linear-gradient(
                135deg,
                /*这样写就不会渐变*/
                black 25%,
                transparent 25%,
                transparent 50%,
                black 50%,
                black 75%,
                transparent 75%,
                transparent 100%
            );

过渡

transition: linear all 2s 1s;//会根据这些条件变化到第二个状态的最终值
//param1:过渡执行的速度 transition-timing-function: ease-in-out;
//param2:需要设置过渡的属性 transition-property
//param3:过渡的执行时间 transition-duration
//param4:延时的时长 transition-delay

linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(, , , )： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

2D

2D移动是相对元素本身来计算移动的距离的
旋转的过程中坐标轴也发生变化
transform: scale(2);//缩放
transform: translate(100px,100px);//位置发生改变
transform: rotate(45deg);//逆时针旋转是负值
transform: skew(45deg);//按角度倾斜
transform-origine: right top;
transform-origine: 0% 100%;//和transition一样设置在两个状态的初状态中
display：table-cell;模拟表格
vertical-align:两个元素的基线要对齐
transform：translate（）//若设置百分比，是相对于自生的宽度和高度
元素居中的方式有5种：
table 默认vertical-align
模拟table 加vertical-align
middle对齐 span: display:
inline-block;vertical-align:middle;
margin
translate

阴影特效的应用

通过before after 结合盒子阴影与2D转换来实现自定义的阴影

3D

transform: rotateX(180deg);
transform: rotateY(-180deg);
transform: rotateZ(180deg);
transform-origin: center center;//旋转的时候要不偏离原位子，就将容器元素的面放到几何体的中心位置，然后在容器元素上设置transrform-origin:center;
3D运动
transform:translateX(500px);
transform:translateY(500px);
transform:translateZ(500px);