H5C3

课程目标

掌握css3选择器使用
掌握css3颜色的使用
掌握css3阴影的使用
掌握css3更新盒模型
掌握css3渐变的使用
掌握css3背景尺寸设置
掌握css3过渡的使用
掌握css3转换的使用
掌握css3动画的使用

课程内容

选择器

属性选择器

E[attr=value] 选中E元素中属性有attr的且属性值为value的元素
E[attr^=value] 选中E元素中属性有attr的且属性值以value开头的元素
E[attr$=value] 选中E元素中属性有attr的且属性值以value结尾的元素
E[attr*=value] 选中E元素中属性有attr的且属性值包含value的元素

伪类序号选择器

E:first-child 选中E元素的父元素下所有的子元素的第一个元素，如果类型为E选中否则无效
E:last-child 选中E元素的父元素下所有的子元素的最后一个元素，如果类型为E选中否则无效
E:nth-child(n) 选中E元素的父元素下所有的子元素的第n个元素，如果类型为E选中否则无效
E:nth-last-child(n) 选中E元素的父元素下所有的子元素的倒数第n个元素，如果类型为E选中否则无效

伪元素选择器

E::before 选中E元素的内容前伪元素
E::after 选中E元素的内容前伪元素

颜色

rgba

rgba(R,G,B,A)
R：红色值。

G：绿色值。

B：蓝色值。

A：Alpha透明度。取值0~1之间。

阴影

text-shadow

text-shadow: h-shadow v-shadow blur color;
h-shadow：阴影横向偏移
v-shadow：阴影纵向偏移
blur：阴影模糊度
color：阴影颜色

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：阴影横向偏移
v-shadow：阴影纵向偏移
blur：阴影模糊度
spread：阴影的延伸
color：阴影颜色
inset：内阴影

盒模型

box-sizing

box-sizing: content-box|border-box|inherit;
content-box：从内容开始计算宽度
border-box：从边框开始计算宽度
inherit：继承

渐变

linear-gradient

background-image:linear-gradient(direction,startColor,endColor)
direction：渐变方向to right|left|top|bottom 可以使用角度 deg
startColor：渐变开始颜色
endColor：渐变结束颜色

radial-gradient

background-image:radial-gradient(radius at position,startColor,endColor)
radius：半径
position：放射原点定位
startColor：渐变开始颜色
endColor：渐变结束颜色

背景尺寸

background-size

background-size: length|percentage|cover|contain;
length：宽度高度单位px
percentage：宽度高度单位%
cover：等比缩放背景完全铺满容器，多余被裁剪
contain：等比缩放背景完全显示在容器内容，可能铺不满

过渡

transition

transition 需要过渡的属性过渡时间过渡的动画速度函数过渡的延时时间
transition-property 需要过渡的属性
transition-duration 过渡时间单位秒
transition-timing-function 过渡的动画速度函数如：ease linear
transition-delay 过渡的延时时间单位秒

转换

transform

transform 转换属性属性值为不同的转换形式
scale 缩放
translate 位移
rotate 旋转
skew 倾斜
transform-origin 转换中心

动画

animation

animation 动画属性
animation-name 动画序列名称
animation-duration 动画时长
animation-timing-function 动画速度函数
animation-delay 动画延时
animation-iteration-count 动画执行次数无数次 infinite
animation-direction 动画播放方向默认normal 逆播放 alternate
animation-play-state 动画的播放状态默认 running 暂停 paused
animation-fill-mode 动画结束状态默认 backwards 保持 forwards

扩展内容

3d转换

3d转换属性

translateX x轴方向的位移
translateY y轴方向的位移
translateZ z轴方向的位移
rotateX 绕x轴旋转
rotateY 绕y轴旋转
rotateZ 绕z轴旋转

透视

透视 perspective:200px
在2d平面产生近大远小视觉立体，但是只是效果二维的
原理：
a. 模拟人类的视觉位置，可认为安排一只眼睛去看 b. 距离电脑平面的距离为视距 c. 距离视觉点越近的在电脑平面成像越大，越远成像越远
特点：只是显示3d图像的近大远小效果，无法呈现3d的三维成像的特点，如遮挡
使用场景：只是辅助性的帮助开发者检查3d效果

3d呈现

3d呈现 transform-style:preserve-3d
在2d平面产生近大远小视觉立体，但是只是效果二维的
原理：
a. 第一张图是没有使用3d呈现的无3d效果b. 第二张图是使用了3d呈现的出现遮挡三维立体效果
特点：真正意义的3d呈现，三维立体,有遮挡
使用场景：在3d立体图形的构建使用

案例3d切割轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 560px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #ccc;
            position: relative;
        }

        .box ul {
            position: absolute;
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .box ul li {
            width: 112px;
            height: 300px;
            float: left;
            position: relative;
            /*3D呈现*/
            transform-style: preserve-3d;
            /*加过渡*/
            transition: all 1s;
        }

        /*1. 拼背景*/
        .box ul li span {
            background: url("images/1.jpg") no-repeat;
        }

        .box ul li:nth-child(2) span {
            background-position: -112px 0;
        }

        .box ul li:nth-child(3) span {
            background-position: -224px 0;
        }

        .box ul li:nth-child(4) span {
            background-position: -336px 0;
        }

        .box ul li:nth-child(5) span {
            background-position: -448px 0;
        }

        .box ul li span:nth-child(1) {
            transform: translateZ(150px);
        }

        .box ul li span:nth-child(2) {
            background-image: url("images/2.jpg");
            transform: rotateX(90deg) translateZ(150px);
        }

        .box ul li span:nth-child(3) {
            background-image: url("images/3.jpg");
            transform: rotateX(180deg) translateZ(150px);
        }

        .box ul li span:nth-child(4) {
            background-image: url("images/4.jpg");
            transform: rotateX(270deg) translateZ(150px);
        }

        /*2. 拼立体容器*/
        .box ul li span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .box a {
            width: 40px;
            height: 60px;
            background: rgba(0, 0, 0, 0.3);
            position: absolute;
            top: 120px;
            text-decoration: none;
            line-height: 60px;
            text-align: center;
            color: #fff;
            font-size: 20px;
        }

        .box .prev {
            left: 0;
        }

        .box .next {
            right: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </ul>
    <a class="prev" href="javascript:;">&lt;</a>
    <a class="next" href="javascript:;">&gt;</a>
</div>
<!--
归类：称为 实体
&gt;  &lt;   &nbsp;
-->
<script src="js/jquery.min.js"></script>
<script>
    /*需求：*/
    /*1. 点击上一张切换当上一张图片*/
    /*2. 点击下一张切换当下一张图片*/
    $(function () {
        /*节流阀 */
        var flag = true;

        /*轮播图的核心 索引*/
        var index = 0;
        $('.prev').on('click', function () {
            if(!flag) return;
            flag = false;
            index--;
            /*旋转的角度 = - 索引 * 90deg */
            $('li').css('transform', 'rotateX(' + (-index * 90) + 'deg)').each(function (i, item) {
                /*设置不同的过渡延时时间  0 0.25 0.5 ... */
                $(this).css('transition-delay', i * 0.25 + 's');
            });
            console.log(index);
        });
        $('.next').on('click', function () {
            if(!flag) return;
            flag = false;
            index++;
            /*旋转的角度 = - 索引 * 90deg */
            $('li').css('transform', 'rotateX(' + (-index * 90) + 'deg)').each(function (i, item) {
                /*设置不同的过渡延时时间  0 0.25 0.5 ... */
                $(this).css('transition-delay', i * 0.25 + 's');
            });
            console.log(index);
        });


        /*点击按钮的时候  锁上*/
        /*最后一个LI过渡完成  开锁*/

        /*知识点：怎么去监听过渡执行完成 transitionend */
        /*有5个LI元素都会执行过渡  监听最后一个LI的过渡结束 */
        $('li:last-child').on('transitionend',function () {
            flag = true;
        });
    });
</script>
</body>
</html>

"我是Spirit_Breeze,中文<晟世清风>,在这纷纷乱世之中,祈望能有一股清流之风."本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究,欢迎研究讨论,转载请备注地址和作者,谢谢

清风带你学-H5+CSS3基础（一）