第十一周第四天笔记之css3知识解读

1 css3知识解读

• css3解读链接：css3知识解读
• 自定义字体
  • 利用@font-face{}引入自定义字体；
  • 创建一个字体名称；
  • 利用src引入地址；

   
   
   
       
       
       
   
   
   
   
  美丽的大中国
   
  haome
   
   
  

• 选择器
  • [class^="xxx"]指的是class名开头为xxx；
  • [class$="xxx"]指的是class名结尾为xxx；
  • [class*="xxx"]指的是class名包含为xxx；
• 变形、过渡、动画
  • 变形transform
    • rotate()：旋转；顺时针旋转为正值；逆时针旋转为负值；
      • 默认沿Z轴旋转：transform:rotate(45deg);
      • 沿X轴旋转：transform:rotateX(180deg);
      • 沿Y轴旋转：transform:rotateY(180deg);
      • 沿Z轴旋转：transform:rotateZ(180deg);
      • 注意：当坐标系旋转后，位置就发生了改变；x,y,z轴的方向就发生了改变；
    • scale()：缩放；
      • X轴方向缩放：transform: scaleX(.5)
      • Y轴方向缩放：transform: scaleY(1.5)
      • x,y轴方向同时缩放：不同比例：transform: scale(.5,1.5)；同比例：transform: scale(.5)；
    • translate():位移；
      • X轴位移：transform:translateX(100px);
      • Y轴位移：transform:translateY(100px);
      • X,Y轴同时位移：transform:translate(100px,200px);
      • 注：位移值都是相对于零点的偏移值；正数在正方向，负数在负方向；
    • transform-origin: 原点位置，默认为元素的中心点；
      • 三个参数x,y,z，可以赋值为百分数，数值，left/top/bottom/right/center;
      • left与0时等价的；right与100%是等价的；center与50%是等价的；
      • 左上角：0 0或left top或left 0或0 top；
      • 右上角：right top或100% 0或right 0或100% top;
      • top/bottom：等价于top center/bottom center;
      • right/left：等价于right center/left center;
      • 解读链接：transform-origin解读
  • 过渡transition：指的就是元素的某一个属性从一个值变化到另一个值的过程变化；
    • 需要事件触发：hover onclick等；
    • transition-property:指定过渡的属性；其中all指所有的属性；
    • transition-duration:指定过渡的时间；
    • transition-timing-function:指定过渡的函数类型；如linear,ease-in,ease-out,ease-in-out;
    • transition-delay:指定过渡执行的延迟时间；
    • 复合形式：属性的赋值之间用空格间隔，两个不同的属性之间用逗号间隔；代码：transition: width 0.1s linear 1s,height .5s ease-in 1s;
    • 解读链接：transition解读
  • 动画animation:指的是动画效果，针对什么样的动作，延迟多长时间开始，在以什么样的执行形式，在规定的时间内完成一次，可以规定执行次数；
    • animation-name:动画名称；
      • 动画名称及动画内容通过关键帧构建；
        • 代码：@keyframes 动画名称{....};
        • 动画内容中可以通过%来控制进度，其中from代表0%；to代表100%;可以设置不同的百分比执行不同的代码;

          @keyframes move{
               from{
                  width: 200px;
                }
               50%{
                  width: 300px;
                }
               to{
                  width: 500px;
                  background-color: red;
                }    
           }
        

    • animation-duration:动画持续总时间；
    • animation-timing-function:动画执行的形式；
    • animation-delay:动画执行的延迟时间；
    • animation-iteration-count:动画执行次数；赋值为整数或infinite(无限次);
    • animation-direction:动画指定的方向；赋值为normal(默认向前)或alternate(轮流交替)；
    • animation-play-state:动画执行的状态；分为：running(运动)和paused(暂停);
    • 解读链接：animation解读
  • transition和animation的区别：
    • 正常情况下，二者都填在元素身上，但transition需要通过事件触发，设置要改变到的属性值，然后通过一个过渡过程执行；而animation不需要通过事件触发，直接加载后，就立刻执行；
    • transition只能从一个值变化到另一个值，执行一次；而animation可以分段执行；通过0-100%不同阶段来执行不同代码；而且可以执行多次；
  • 验证代码：

2 css3 3D转换

• 3D转换
  • transform-style：指定嵌套元素如何在3D空间中呈现；
    • 代码：transform-style: flat/perserve-3d;
    • flat:平面，即2D平面变形；默认值；
    • perserve-3d: 3D空间变形；（注意：一般在声明，和应用在父元素上,代表容器）；
  • perspective属性：透视，视觉！用该属性来激活一个3D空间；
    • 代码：perspective: number/none
    • 当为父元素定义perspective时，其子元素就能获得透视效果(使用了3D变换的元素)；所以，一般perspective都在父元素上；可以把这个元素成为"舞台元素";
    • 取值小技巧：取值不加单位，以像素记；
      • 取值为none或不设置，就没有3D空间。
      • 取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
      • 貌似当取值为元素的宽度时，视觉效果比较好。
  • 链接解读 3D转换解读
  • 注意：浏览器兼容性的处理
    • -webkit- ：Chrome 和 Safari浏览器兼容；
    • -moz-：Firefox浏览器兼容；
    • -ms-：Internet Explorer浏览器兼容；

3 3D效果实例

3.1 实现图片的开门关门效果

• 思路：
  • 图片需要实现3D效果，所以在其父级元素身上需要设置transform-style和perspective两个属性；
  • 图片需要实现位置的过渡变化，则在元素身上设置过渡效果transition；
  • 图片的过渡效果需要事件的触发，则添加hover事件触发，在hover事件中要设置图片的位置变化量，如绕Y轴旋转的角度；
  • 图片旋转在默认情况下是按照原点位置旋转的，默认的原点位置在图片的中心位置，所以需要在图片元素身上重新设置原点位置，则设置transform-origin的值为left，指的是原点位置为left center；即左边框的中心位置；
• 知识点：
  • 过渡是谁运动就设置在谁身上；
  • 3D效果是谁运动就设置在谁的父级元素身上；
  • perspective的作用是近大远小的效果，数值带单位(像素)；数值越小，效果越明显；
    -代码：

3.2 菜单栏的3D旋转效果

• 思路：
  • 页面架构，利用after伪元素；可以添加定位；
  • 翻转：after伪元素的原点及旋转角度；span元素的原点及旋转角度；
  • 过渡：span元素在改变过程中需要设置过渡，所以要在改元素身上设置过渡；
  • 未设置3D效果时，当span翻转后，after伪元素是不显示的；
  • 设置3D效果：
    • 需要让after伪元素呈现3D效果，所以要给其父级元素设置，即给span元素设置transform-style为preserve-3d;
    • 添加近大远小的透视效果，给a元素设置perspective属性；值越小效果越明显；
  • after伪元素是在样式中直接设置翻转；而span元素需要添加hover事件来改变位置，在改变位置时，让其向上偏移一半的高度，效果会更明显；
• 代码：

   
   
   
       
       
       
   
   
   
  
       
           美好日子
       
       
           美好一天
       
       
           漂亮身材
       
   
   
   
  

3.3 立方体实例

• 知识点：
  • 元素在进行旋转后，坐标系位置会发生变化；x,y,z轴方向会根据旋转的角度发生改变；
  • 正常情况下，x轴为页面的水平方向，向右为正；y轴为页面的竖直方向，向下为正；z轴为页面的垂直方向，向外为正；
  • 旋转角度正值为顺时针旋转；负值为逆时针旋转；
  • 代码：transform: rotateX(-90deg) translateZ(100px);中，沿X轴方向旋转-90度后，此时X轴正方向向右，Y轴正方向垂直页面向外，Z轴正方向竖直页面向下；所以在沿着Z轴正方向移动100像素；即向下移动100像素；
• 代码：

   
   
   
       
       
       
   
   
   
  
       
  平面1
       
  平面2
       
  平面3
       
  平面4
       
  平面5
       
  平面6
   
   
   
  

3.4 切割轮播图实例

• 思路：
  • 页面结构：
    • 容器中存在一个ul，ul中包含五个li元素，每个li元素中包含四个div，div的背景图为图片；
    • li元素和div元素均设置定位布局；
    • 每个li中的四个div元素的背景图均设置相同的图；
    • 四个div元素设置空间旋转，达到正方体的效果；
    • 页面结构的最终效果：五个li元素全部定位叠加在最左侧；每个li中的四个div元素中的背景图均定位在最左侧；每个li中的四个div元素均旋转到空间位置；
  • 设置5个li的left值，利用li的索引值来设置相对应的left值；
  • 设置4个div中的背景图的定位，也是利用li的索引值来设置相对应的left值，backgroundPosition值为负值；
  • 给左右按钮添加点击事件，当事件触发时，改变li元素的位置，让其绕x轴旋转，每点击一次让其旋转90度的n倍，通过全局变量来控制图片的旋转角度；
  • 给旋转添加过渡效果，将transition添加到li身上；要想让每个li不同时旋转，则给每一个li添加不同的延迟时间；
  • li旋转后，实现3D效果，则给li的父级元素添加transform-style为preserve-3d;
• 知识点：
• 代码：

   
   
   
       
       
       
   
   
   
  
       
  
           
  
               
  
               
  
               
  
               
  
           
           
  
               
  
               
  
               
  
               
  
           
           
  
               
  
               
  
               
  
               
  
           
           
  
               
  
               
  
               
  
               
  
           
           
  
               
  
               
  
               
  
               
  
           
       
       <
       >
   
   
   
   
   
  

3.5 切割轮播图实例复习

• 思路：
  • 不同的模块可以通过ul来设置，通过浮动来同行显示；
  • 每个模块ul中的li元素，通过3D旋转形成一个空间立方体；
  • 通过设置不同li背景图的定位，来进行不同背景图的显示；
  • 通过点击按钮来进行翻转；
  • 实现不同模块之间的延迟翻转：1）通过设置不同模块的transition-delay过渡延迟时间来实现；2）通过设置定时器，每个一段时间执行不同模块；
• 代码：

   
   
   
       
       
       
   
   
   
  
       
  
           
  
           
  
           
  
           
  
       
       
  
           
  
           
  
           
  
           
  
       
       
  
           
  
           
  
           
  
           
  
       
       
  
           
  
           
  
           
  
           
  
       
       
  
           
  
           
  
           
  
           
  
       
       <
       >