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

1 css3知识解读

css3解读链接：css3知识解读

自定义字体

利用@font-face{}引入自定义字体；
创建一个字体名称；
利用src引入地址；

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>自定义字体</title>
     <style>
         @font-face {
             font-family: "guobin";
             src:url("font/Tensentype-MianBaoJ.ttf");
         }
         /*指的是class名开头为icon-，或者时class名中包含空格+icon-的元素设置自定义字体*/
         [class^="icon-"],[class*=" icon-"]{
             font-family: "guobin" !important;
             font-size: 200px;
         }
     </style>
 </head>
 <body>
 <!--在标签中使用时，class名的开头为icon-，或是class名中包含多个class，只要包含空格icon-即成立-->
 <p class="icon-meihao">美丽的大中国</p>
 <div class="box icon-tiankong">haome</div>
 </body>
 </html>

选择器
- [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%不同阶段来执行不同代码；而且可以执行多次；
- 验证代码：
```
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>过渡及动画</title>
     <style>
         #div1{
             width: 200px;
             height: 200px;
             background-color: red;
             transition: width 1s linear 2s;
         }
         #div1:hover{
             width: 500px;
         }
         #div2{
             width: 200px;
             height: 200px;
             margin-top: 50px;
             background-color: red;
             animation: 1s linear 2s 4;
         }
         @keyframes move{
             from{
                 width: 200px;
             }
             50%{
                 width: 350px;
                 background-color: green;
             }
             to{
                 width: 500px;
                 background-color: purple;
             }
         }
     </style>
 </head>
 <body>
 <div id="div1"></div>
 <div id="div2"></div>
 <script>
     //如果不想让animate立刻执行，就不给元素赋值name值，添加点击事件后再给其赋值name，然后再执行；
     var oDiv2=document.getElementById("div2");
     oDiv2.onclick=function () {
         this.style.animationName="move";
     }
 </script>
 </body>
 </html>
```

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的作用是近大远小的效果，数值带单位(像素)；数值越小，效果越明显；
-代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>图片的3D效果旋转</title>
     <style>
         .wrap{
             width: 500px;
             height: 280px;
             margin: 100px auto;
             border: 3px solid red;
             transform-style: preserve-3d;
             perspective: 2000px;
         }
         .wrap img{
             width: 100%;
             height: 100%;
             transition: all 2s;
             /*transform-origin: bottom;*/
             -webkit-transform-origin: left;
         }
         .wrap:hover img{
             /*transform: rotateX(60deg);*/
             -webkit-transform: rotateY(-120deg);
         }
     </style>
 </head>
 <body>
 <!--过渡是谁运动就设置在谁身上，然后通过事件触发改变位置，进行过渡；3D效果是谁运动就设置在谁的父级元素上，设置transform-style和perspective-->
 <div class="wrap">
     <img src="img/1.jpg" alt="">
 </div>
 </body>
 </html>

3.2 菜单栏的3D旋转效果

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

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>菜单栏翻转效果</title>
     <style>
         .wrap{
             width: 660px;
             height: 50px;
             margin: 200px auto;
         }
         .wrap a{
             width: 200px;
             height: 50px;
             font-size: 28px;
             text-align: center;
             line-height: 50px;
             margin: 10px;
             float: left;
             color: white;
             text-decoration: none;
             perspective: 250px;
         }
         .wrap a span{
             display: block;
             width: 100%;
             height: 100%;
             background-color: green;
             transform-origin: top;
             transition: all 1s;
             transform-style: preserve-3d;
             position: relative;
         }
         .wrap a:hover span{
             transform: rotateX(90deg) translateY(-25px);
         }
         .wrap a span::after{
             display: block;
             position: absolute;
             left: 0;
             top: 50px;
             width: 100%;
             height: 100%;
             background-color: lightcoral;
             content: attr(data-content);
             transform-origin: top;
             transform: rotateX(-90deg);
         }
     </style>
 </head>
 <body>
 <div class="wrap">
     <a href="javascript:;">
         <span data-content="天空">美好日子</span>
     </a>
     <a href="javascript:;">
         <span data-content="蓝天">美好一天</span>
     </a>
     <a href="javascript:;">
         <span data-content="美女">漂亮身材</span>
     </a>
 </div>
 </body>
 </html>

3.3 立方体实例

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

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>立方体实例</title>
     <style>
         .wrap{
             width: 200px;
             height: 200px;
             margin: 200px auto;
             position: relative;
             transform-style: preserve-3d;
             transition: all 5s;
         }
         .wrap:hover{
             transform: rotateX(270deg) rotateY(360deg);
         }
         .wrap div{
             width: 100%;
             height: 100%;
             position: absolute;
             line-height: 200px;
             text-align: center;
             opacity: 0.6;
             left: 0;
             top: 0;
         }
         .wrap div:nth-child(1){
             background-color:lightcoral;
             transform: rotate(0) translateZ(100px);
         }
         .wrap div:nth-child(2){
             background-color:lightgreen;
             transform: rotateX(-90deg) translateZ(100px);
         }
         .wrap div:nth-child(3){
             background-color:lightskyblue;
             transform: rotateX(-180deg) translateZ(100px);
         }
         .wrap div:nth-child(4){
             background-color:lightseagreen;
             transform: rotateX(-270deg) translateZ(100px);
         }
         .wrap div:nth-child(5){
             background-color:lightgray;
             transform: rotateY(-90deg) translateZ(100px);
         }
         .wrap div:nth-child(6) {
             background-color: lightpink;
             transform: rotateY(90deg) translateZ(100px);
         }
     </style>
 </head>
 <body>
 <div class="wrap">
     <div>平面1</div>
     <div>平面2</div>
     <div>平面3</div>
     <div>平面4</div>
     <div>平面5</div>
     <div>平面6</div>
 </div>
 </body>
 </html>

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;
知识点：

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>切割轮播图实例</title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
         .wrap{
             width: 600px;
             height: 336px;
             margin: 100px auto;
             position: relative;
         }
         .wrap ul{
             width: 100%;
             height: 100%;
             position: relative;
         }
         .wrap ul>li{
             width: 120px;
             height: 336px;
             position: absolute;
             top: 0;
             transform-style: preserve-3d;
             transition: all 1s;
         }
         .wrap ul>li>div{
             position: absolute;
             width: 100%;
             height: 100%;
             left: 0;
             top: 0;
         }
         .wrap ul>li>div:nth-child(1){
             background: url("img/1.jpg") no-repeat;
             background-size: 600px 336px;
             transform: rotateX(0deg) translateZ(168px);
         }
         .wrap ul>li>div:nth-child(2){
             background: url("img/2.jpg") no-repeat;
             background-size: 600px 336px;
             transform: rotateX(-90deg) translateZ(168px);
         }
         .wrap ul>li>div:nth-child(3){
             background: url("img/3.jpg") no-repeat;
             background-size: 600px 336px;
             transform: rotateX(-180deg) translateZ(168px);
         }
         .wrap ul>li>div:nth-child(4){
             background: url("img/4.jpg") no-repeat;
             background-size: 600px 336px;
             transform: rotateX(90deg) translateZ(168px);
         }
         .wrap span{
             position: absolute;
             width: 40px;
             height: 60px;
             font-size: 40px;
             text-align: center;
             line-height: 60px;
             color: white;
             background-color: lightskyblue;
             top: 50%;
             margin-top: -30px;
             opacity: 0.3;
             cursor: pointer;
         }
         .wrap span:hover{
             opacity: 1;
         }
         .wrap span.prev{
             left: 5px;
         }
         .wrap span.next{
             right: 5px;
         }
     </style>
 </head>
 <body>
 <div class="wrap">
     <ul>
         <li>
             <div></div>
             <div></div>
             <div></div>
             <div></div>
         </li>
         <li>
             <div></div>
             <div></div>
             <div></div>
             <div></div>
         </li>
         <li>
             <div></div>
             <div></div>
             <div></div>
             <div></div>
         </li>
         <li>
             <div></div>
             <div></div>
             <div></div>
             <div></div>
         </li>
         <li>
             <div></div>
             <div></div>
             <div></div>
             <div></div>
         </li>
     </ul>
     <span class="prev"><</span>
     <span class="next">></span>
 </div>
 <script src="JS/jquery.js"></script>
 <script>
     var dis=$("ul")[0].offsetWidth/$("li").length;
     var n=0;
     $("li").each(function (index, item) {
         //this指的就是item，也就是每个li元素；
         $(this).css({
             left: dis*index,
             transitionDelay: index*.2+"s"
         }).find("div").css({
             backgroundPosition: -dis*index+"px 0px"
         })
     });
     $(".next").click(function () {
         $("li").css({
             transform:"rotateX("+90*(++n)+"deg)"
         })
     });
     $(".prev").click(function () {
         $("li").css({
             transform:"rotateX("+90*(--n)+"deg)"
         })
     })
 </script>
 </body>
 </html>

3.5 切割轮播图实例复习

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

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>切割轮播图实例复习</title>
     <style type="text/css">
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
         .wrap{
             width: 600px;
             height: 336px;
             margin: 100px auto;
             position: relative;
         }
         .wrap ul{
             width: 20%;
             height: 100%;
             background-repeat: no-repeat;
             float: left;
             position: relative;
             transform-style: preserve-3d;
             transition: all 1s;
         }
         .wrap ul li{
             width: 100%;
             height: 100%;
             position: absolute;
             left: 0;
             top: 0;
         }
         .wrap ul > li:nth-child(1){
             background-image: url("img2/1.jpg");
             transform: translateZ(168px);
         }
         .wrap ul > li:nth-child(2){
             background-image: url("img2/2.jpg");
             transform: rotateX(-90deg) translateZ(168px);
         }
         .wrap ul > li:nth-child(3){
             background-image: url("img2/3.jpg");
             transform: rotateX(-180deg) translateZ(168px);
         }
         .wrap ul > li:nth-child(4){
             background-image: url("img2/5.jpg");
             transform: rotateX(-270deg) translateZ(168px);
         }
         .wrap ul:nth-child(1) li{
             background-position-x: 0;
         }
         .wrap ul:nth-child(2) li{
             background-position-x: 25%;
         }
         .wrap ul:nth-child(3) li{
             background-position-x: 50%;
         }
         .wrap ul:nth-child(4) li{
             background-position-x: 75%;
         }
         .wrap ul:nth-child(5) li{
             background-position-x: 100%;
         }
         .wrap a{
             display: block;
             text-decoration: none;
             width: 40px;
             height: 60px;
             background-color: lightblue;
             position: absolute;
             top: 50%;
             margin-top: -30px;
             z-index: 2;
             font-size: 45px;
             text-align: center;
             line-height: 60px;
             color: white;
             opacity: 0.5;
             filter: alpha(opacity=50);
         }
         .wrap a:hover{
             opacity: 1;
             filter: alpha(opacity=100);
         }
         .wrap a:nth-of-type(1){
             left: 4px;
         }
         .wrap a:nth-of-type(2){
             right: 4px;
         }
     </style>
 </head>
 <body>
 <div class="wrap">
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
     <a href="javascript:;">&lt;</a>
     <a href="javascript:;">&gt;</a>
 </div>
 <script src="../toolLibrary/jquery.js"></script>
 <script>
     var $oWrap=$(".wrap");
     var $aUl=$oWrap.children("ul");
     var $aBtn=$oWrap.children("a");
     var timer=null;
     var n=0;
     var m=0;
     //1.利用transition-delay来设置过渡延迟时间，实现延迟旋转
     $aBtn.eq(0).click(function () {
         n++;
         toMove();
     });
     $aBtn.eq(1).click(function () {
         n--;
         toMove();
     });
     function toMove() {
         $aUl.each(function (index) {
             //设置过渡延迟和旋转
             $(this).css({
                 transitionDelay: 0.2*index+"s",
                 transform: "rotateX("+90*n+"deg)"
             });
         })
     }
     /*//2.利用定时器来实现延迟旋转；
     $aBtn.eq(0).click(function () {
         n--;
         toTimer();
     });
     $aBtn.eq(1).click(function () {
         n++;
         toTimer();
     });
     //封装函数
     function toTimer() {
         m=0;
         clearInterval(timer);
         imgMove();
         timer=setInterval(imgMove,200);
         //函数封装
         function imgMove() {
             $aUl.eq(m).css({
                 transform:"rotateX("+90*n+"deg)"
             });
             m++;
             if(m===5){
                 clearInterval(timer);
             }
         }
     }*/
 </script>
 </body>
 </html>