框架集，动画，HACK

框架集

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面
框架集可以同时引入多个页面，而内联框架只能引入一个
在h5标准中，推荐使用框架集，而不使用内联框架

使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中
所以要使用框架集，页面中就不可以使用body标签

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

这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小
frameset中也可以再嵌套frameset

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架集</title>
</head>

<frameset cols="30%, *, 30%">
<!-- 
在frameset中使用frame子标签来指定要引入的页面
引入几个页面就写几个frame
 -->
<frame src="demo069_表格.html" />
<frame src="demo070_给表格添加样式.html" />
<!-- 嵌套一个frameset -->
<frameset rows="30%, 50%, *">
    <frame src="demo072_表格的布局.html" />
    <frame src="demo073_完善clearfix.html" />
    <frame src="demo074_表单.html" />
</frameset>
</frameset>
</html>

ie6png的修复

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

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

在body标签的最后引入外部的JS文件
再创建一个新的script标签，并且编写一些js代码

以下代码只会在IE6中执行，其他浏览器中无效

<!--[if IE 6]>
    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix("div,img");
    </script>
<![endif]-->

条件Hack

有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，这时就可以使用CSS Hack来解决该问题
CSS Hack实际上指的是一种特殊的代码，这段代码只在某些浏览器中可以识别，而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码

  • 条件Hack
    它只对IE浏览器有效，其它的浏览器都会将它识别为注释

  • IE10及以上的浏览器已经不支持这种方式
    以下内容只会出现在IE6中

    <!--[if IE 6]>
  <p>为了您和家人的健康，请远离IE6！！</p>
<![endif]-->

例：

 <!--[if IE 8]>
<p>当前浏览器是IE8！！</p>
<![endif]-->

<!--[if lt IE 9]>
    <p>该标签会在IE9以下的浏览器中显示</p>
<![endif]-->

<!--[if gte IE 9]>
    <p>该标签会在IE9及以上的浏览器中显示</p>
<![endif]-->

<!--[if lte IE 9]>
    <p>该标签会在IE9及以下的浏览器中显示</p>
<![endif]-->

<!--[if ! IE 6]>
    <p>你的浏览器不是IE6</p>
<![endif]-->

属性Hack

假设在IE6中需要将背景颜色设置为黄色才能达到和其它浏览器相同的效果

  • 希望黄色背景只在IE6中生效
    在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别

      _background-color: yellow;

  • 添加了*的样式只有IE7及以下的浏览器认识

    *background-color: yellow;

  • 在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别

    background-color: yellow\0;

    CSS Hack不到万不得已的情况尽量不要使用

CSS3过渡动画

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)

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3过渡动画</title>
<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        background-color: gold;
        /*在哪产生动画、动画的时间、运动曲线、延迟*/
    /*  transition: border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s; */
         transition: all 500ms ease; 
    }
    .box:hover{
        width: 500px;
        height: 300px;
        background-color: red;
        border-radius: 50px;
    }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS3圆角、阴影、rgba

CSS3圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：
border-radius:50%;

        .box{
        width: 200px;
        height: 200px;
        border: 2px solid #000;
        background-color: gold;
        margin: 50px auto 0;
        /*border-top-left-radius: 100px 50px;左上角为椭圆圆角*/
        /*border-top-left-radius: 100px;
        border-top-right-radius: 100px;左、右上角为正圆圆角*/
        /*border-radius: 40px;曲率半径为40的圆角矩形*/
        /*border-radius: 20%;最大200px，20%即40px*/
        border-radius: 50%;/*正圆*/
    }

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

 .box2{
        width: 200px;
        height: 40px;
        background-color: gold;
        margin: 100px auto 0;
        /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影*/
        box-shadow: 0px 0px 20px 2px red inset;
  }

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

        .box3{
        width: 200px;
        height: 200px;
        /*background: url(images/location_bg.jpg);*/
        background-color: gold;
        margin: 50px auto 0;
        border: 2px solid #000;
        border-radius: 50%;
        /*透明度30%，文字也透明了*/
        opacity: 0.3;
        filter: alpha(opacity=30);/*兼容IE*/
        text-align: center;
        line-height: 200px;
    }
    .box4{
        width: 200px;
        height: 200px;
        /*背景色变透明，但文字不会透明*/
        background-color: rgba(255,215,0,0.3);
        margin: 50px auto 0;
        /*边框透明*/
        border: 2px solid rgba(0,0,0,0.3);
        border-radius: 50%;
        text-align: center;
        line-height: 200px;
    }

运动曲线

cubic-bezier(n,n,n,n)

<style type="text/css">
    div{
        width: 50px;
        height: 50px;
        background-color: gold;
        margin-bottom: 20px;
    }
    div:nth-child(1){
        /*匀速*/
        transition: all 1s linear;
    }
    div:nth-child(2){
        /*开始和结束慢速，中间加速*/
        transition: all 1s ease;
    }
    div:nth-child(3){
        /*开始慢速，结尾突然停止*/
        transition: all 1s ease-in;
    }
    div:nth-child(4){
        /*突然开始，结束时慢速*/
        transition: all 1s ease-out;
    }
    div:nth-child(5){
        /*开始和结束时慢速*/
        transition: all 1s ease-in-out;
    }
    div:nth-child(6){
        /*贝塞尔（贝兹）曲线*/
        /*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/
        /*超出再缩回的弹性效果*/
        transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);
    }
    div:hover{
        width: 1000px;
    }
</style>

文字遮罩-扩展二级菜单

文字遮罩

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片文字遮罩</title>
<style type="text/css">
    .box{
        width: 200px;
        height: 300px;
        margin: 50px 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: rgba(0,0,0,0.5);
        color: #fff;

        /*定位使色块在图片正下方*/
        position: absolute;
        left: 0;
        top: 300px;

        transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);
    }
    .box:hover .pic_info{
        /*色块上移*/
        top:150px;
    }
    /*间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小*/
    .box .pic_info p{
        margin: 20px;
        line-height: 30px;
    }
</style>
</head>
<body>
<div class="box">
    <img src="img/location_bg.jpg" alt="玫瑰花">
    <div class="pic_info">
        <p>图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花</p>
    </div>
</div>
</body>
</html>

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 设置盒子背面是否可见

 .box,.box2,.box3,.box4{
        width: 200px;
        height: 200px;
        background-color: gold;
        margin: 50px auto 0;
        transition: all 1s ease;
    }
    .box:hover{
        /*box的动画不会影响到box2*/
        /*位移*/
        transform: translate(50px,50px);
    }
    .box2:hover{
        /*沿Z轴旋转360度*/
        transform: rotate(360deg);
    }
    .box3:hover{
        /*缩放*/
        transform: scale(0.5,0.2);
    }
    .box4:hover{
        /*斜切*/
        /*transform: skew(45deg,0);*/
        transform: skew(0,45deg);
    }

元素旋转

旋转方向判断
1、X轴向右、Y轴向下、Z轴向屏幕外
2、让轴向对着自己，顺时针方向就是该轴向的旋转方向

    .box{
        width: 300px;
        height: 300px;
        background-color: gold;
        margin: 50px auto 0;
        transition: all 500ms ease;
        /*设置盒子按3D空间显示*/
        transform-style: preserve-3d;
        /*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
        transform: perspective(800px) rotateY(0deg);
    }

变形中心点

     div:nth-child(1){
        /*设置变形的中心点*/
        transform-origin: left center;
    }
    div:nth-child(2){
        transform-origin: left top;
    }
    div:nth-child(3){
        transform-origin: 50px 50px;
    }

背面可见

默认背景是可见的，是反过来的！
设置背面不可见

  backface-visibility: hidden;

图片翻面

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;同时设置多个属性

动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态
infinite不限制次数
alternate动画结束后返回，返回也算次数
animation-fill-mode 动画前后的状态
forwards动画完成保持在最后一帧
backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）
both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）

        .box{
        width: 100px;
        height: 100px;
        background-color: gold;
        animation: moving 1s ease 1s 5 alternate both;
        /*动画暂停*/
        /*animation-play-state: paused;*/
    }
    .box:hover{
        /*动画运行*/
        /*animation-play-state: running;*/
    }
    /*定义一个动画，名称为moving*/
    @keyframes moving{
        /*初始状态*/
        from{
            width: 200px;
        }
        /*结束状态*/
        to{
            width: 500px;
        }
    }

多帧动画

    .box{
        width: 100px;
        height: 100px;
        background-color: gold;
        margin: 50px auto 0;
        animation: moving 1s ease 1s both;
    }
    @keyframes moving{
        0%{
            /*位移动画*/
            transform: translateY(0px);
            background-color: cyan;
        }
        50%{
            transform: translateY(400px);
            background-color: gold;
            border-radius: 0px;
        }
        100%{
            transform: translateY(0px);
            background-color: red;
            border-radius: 50px;
        }
    }

浏览器样式前缀

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

自动添加浏览器前缀

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容

  • 框架集，动画，HACK
    框架集 框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面框架集可以同时引入多个页面，而内联框架...
    幸而0407阅读 210评论 0赞 0
  • 框架集、动画、Hack
    框架集 框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面框架集可以同时引入多个页面，而内联框架...
    咻咻咻滴赵大妞阅读 469评论 0赞 0
  • 框架集和动画
    框架集 框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面框架集可以同时引入多个页面，而内联框架...
    心软脾气硬01阅读 337评论 0赞 0
  • HTML css3 新特性
    框架集 框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面框架集可以同时引入多个页面，而内联框架...
    changzj阅读 155评论 0赞 0
  • 柴米油盐酱醋茶
    今天上午没有课 就和室友去了菜市场买菜 一进菜市场就感受到人间烟火扑面而来 看着一堆人为生活而努力 有再多的矫情和...
    小行星3号阅读 205评论 0赞 1