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

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切割轮播图

    
    
    



    

        

            
            
            
            
        
        

            
            
            
            
        
        

            
            
            
            
        
        

            
            
            
            
        
        

            
            
            
            
        
    
    <
    >

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