清风带你学-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平面产生近大远小视觉立体,但是只是效果二维的

  • 原理:

  • 清风带你学-H5+CSS3基础(一)_第1张图片

  • a. 模拟人类的视觉位置,可认为安排一只眼睛去看 b. 距离电脑平面的距离为视距 c. 距离视觉点越近的在电脑平面成像越大,越远成像越远

  • 特点:只是显示3d图像的近大远小效果,无法呈现3d的三维成像的特点,如遮挡

  • 使用场景:只是辅助性的帮助开发者检查3d效果

3d呈现

  • 3d呈现 transform-style:preserve-3d

  • 在2d平面产生近大远小视觉立体,但是只是效果二维的

  • 原理:

  • 清风带你学-H5+CSS3基础(一)_第2张图片

  • 清风带你学-H5+CSS3基础(一)_第3张图片

  • a. 第一张图是没有使用3d呈现的 无3d效果b. 第二张图是使用了3d呈现的 出现遮挡三维立体效果

  • 特点:真正意义的3d呈现,三维立体,有遮挡

  • 使用场景:在3d立体图形的构建使用

案例3d切割轮播图




    
    Title
    


   
           
  •                                                        
  •        
  •                                                        
  •        
  •                                                        
  •        
  •                                                        
  •        
  •                                                        
  •    
       

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

你可能感兴趣的:(H5+CSS3)