CSS动画 框架集09-12

框架集

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面
框架集可以同时引入多个页面，而内联框架只能引入一个(在h5标准中，推荐使用框架集，而不使用内联框架)
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中

所以要使用框架集，页面中就不可以使用body标签
属性：(这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小)

rows，指定框架集中的所有的框架，一行一行的排列
cols， 指定框架集中的所有的页面，一列一列的排列

frameset中也可以再嵌套frameset
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索
所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的

使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面
而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
如果非得用建议使用frameset而不使用iframe

(在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示)

解决方法：

1.可以使用png8来代替png24，即可解决问题，但是使用png8代替png24以后，图片的清晰图会有所下降 
2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件，然后在写一下简单的JS代码，来处理该问题

CSS3过渡动画

圆角

设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;

阴影

 box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

eg:

 .box{
    width:200px;
    height:50px;
    background-color:gold;
    /* box-shadow:10px 10px 5px 2px pink inset; */
    box-shadow:10px 10px 5px 2px pink;
}
<div class="box"></div>

rgba（新的颜色值表示法）

盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

扩展二级菜单

   eg： .box{
        width: 200px;
        height: 300px;
        margin: 0px auto 0;
        border: 1px solid #000;
        position: relative;
        /*overflow: hidden;*/
    }
    .box img{
        width: 200px;
        height: 300px;
    }
    .box .pic_info{
        width: 200px;
        height: 200px;
        background-color: #000;
        color: #fff;
        position: absolute;
        left: 200px;
        top: 0px;
        transition: all 500ms cubic-bezier(0.470, -0.600, 0.475, 1.605);
        background-color: rgba(0,0,0,0.5);
        display: none;
    }
    .box:hover .pic_info{
        /*top: 150px;*/
        display: block;
    }
    .box .pic_info p{
        margin: 20px;
        line-height: 30px;
    }

<div class="box">
    <img src="img/location_bg.jpg" alt="花朵">
    <div class="pic_info">
        <p>图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花</p>
  
<div class="box">
    <img src="img/location_bg.jpg" alt="花朵">
    <div class="pic_info">
        <p>图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花</p>

CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

     linear 匀速
    ease 开始和结束慢速
    ease-in 开始是慢速
    ease-out 结束时慢速
    ease-in-out 开始和结束时慢速
    steps 动画步数

5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction

  normal 默认动画结束不返回
  Alternate 动画结束后返回

8、animation-play-state 动画状态

  paused 停止
  running 运动

9、animation-fill-mode 动画前后的状态

  none 不改变默认行为
  forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
  backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
  both 向前和向后填充模式都被应用

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

eg:小人走路动画

    .box{
        width:120px;
        height:180px;
        border:1px solid #ccc;            
        margin:50px auto 0;
        position:relative;
        overflow:hidden;            
    }

    .box img{
        display:block;
        width:960px;
        height:182px;
        position: absolute;
        left:0;
        top:0;
        animation:walking 1.0s steps(8) infinite;            
    }
    @keyframes walking{
        from{
            left:0px;
        }

        to{
            left:-960px;
        }
    }

<div class="box"><img src="images/walking.png"></div>

CSS3 transition动画

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式

 linear 匀速
 ease 开始和结束慢速
 ease-in 开始是慢速
 ease-out 结束时慢速
 ease-in-out 开始和结束时慢速
 cubic-bezier(n,n,n,n)

eg：

 cubic-bezier(0.845, -0.375, 0.215, 1.335)

 曲线设置网站：[https://matthewlein.com/ceaser/](https://matthewlein.com/ceaser/)

4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

eg:

<style type="text/css">        
.box{
width:100px;
height:100px;
background-color:gold;
transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;            
}
.box:hover{
width:300px;
height:300px;
background-color:red;
}
    </style>
 <div class="box"></div>

页面内滚动跳转

页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。

 <a href="#mao1">标题一</a>

 <h3 id="mao1">跳转到的标题</h3>

CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

eg：

    .box{
        width:300px;
        height:272px;
        margin:50px auto 0;
        transform-style:preserve-3d;
        position:relative;            
    }
    .box .pic{
        width:300px;
        height:272px;
        position:absolute;
        background-color:cyan;
        left:0;
        top:0;
        transform:perspective(800px) rotateY(0deg);
        backface-visibility:hidden;
        transition:all 500ms ease;
    }
    .box .back_info{
        width:300px;
        height:272px;
        text-align:center;
        line-height:272px;
        background-color:gold;
        position:absolute;
        left:0;
        top:0;
        transform:rotateY(180deg);
        backface-visibility:hidden;
        transition:all 500ms ease;            
    }
    .box:hover .pic{
        transform:perspective(800px) rotateY(180deg);
    }
    .box:hover .back_info{
        transform:perspective(800px) rotateY(0deg);
    }

    <div class="box">        
    <div class="pic"><img src="images/location_bg.jpg"></div>
    <div class="back_info">背面文字说明</div>