框架集，動畫，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?。?lt;/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閱讀 230,622評論 6贊 544
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 99,716評論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
    開封第一講書人閱讀 178,746評論 0贊 383
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,991評論 1贊 318
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 72,706評論 6贊 413
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 56,036評論 1贊 329
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 44,029評論 3贊 450
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 43,203評論 0贊 290
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,725評論 1贊 336
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,451評論 3贊 361
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,677評論 1贊 374
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,161評論 5贊 365
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,857評論 3贊 351
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,266評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,606評論 1贊 295
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 52,407評論 3贊 400
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,643評論 2贊 380

推薦閱讀更多精彩內容

  • 框架集 框架集和內聯框架的作用類似，都是用于在一個頁面中引入其他的外部的頁面框架集可以同時引入多個頁面，而內聯框架...
    咻咻咻滴趙大妞閱讀 486評論 0贊 0
  • 框架集 框架集和內聯框架的作用類似，都是用于在一個頁面中引入其他的外部的頁面框架集可以同時引入多個頁面，而內聯框架...
    心軟脾氣硬01閱讀 353評論 0贊 0
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數據庫組件 SD...
    陽明AGI閱讀 16,003評論 3贊 119
  • 想感嘆，近來的“兵荒馬亂”，一個不留神，就要上演一出原地爆炸。 掐指一算，6月，是上半年的“年末”啊。過了這個月，...
    MengNN閱讀 235評論 0贊 1