框架集和動(dòng)畫

框架集

框架集和內(nèi)聯(lián)框架的作用類似，都是用于在一個(gè)頁(yè)面中引入其他的外部的頁(yè)面
框架集可以同時(shí)引入多個(gè)頁(yè)面，而內(nèi)聯(lián)框架只能引入一個(gè)
在h5標(biāo)準(zhǔn)中，推薦使用框架集，而不使用內(nèi)聯(lián)框架
使用frameset來創(chuàng)建一個(gè)框架集，注意frameset不能和body出現(xiàn)在同一個(gè)頁(yè)面中

所以要使用框架集，頁(yè)面中就不可以使用body標(biāo)簽
屬性：
rows，指定框架集中的所有的框架，一行一行的排列
cols， 指定框架集中的所有的頁(yè)面，一列一列的排列

這兩個(gè)屬性frameset必須選擇一個(gè)，并且需要在屬性中指定每一部分所占的大小
frameset中也可以再嵌套frameset
frameset和iframe一樣，它里邊的內(nèi)容都不會(huì)被搜索引擎所檢索
所以如果搜索引擎檢索到的頁(yè)面是一個(gè)框架頁(yè)的話，它是不能去判斷里邊的內(nèi)容的

使用框架集則意味著頁(yè)面中不能有自己的內(nèi)容，只能引入其他的頁(yè)面
而我們每單獨(dú)加載一個(gè)頁(yè)面，瀏覽器都需要重新發(fā)送一次請(qǐng)求，引入幾個(gè)頁(yè)面就需要發(fā)送幾次請(qǐng)求，用戶的體驗(yàn)比較差
如果非得用建議使用frameset而不使用iframe

  • 在IE6中對(duì)圖片格式png24支持度不高，如果使用的圖片格式是png24，則會(huì)導(dǎo)致透明效果無(wú)法正常顯示

解決方法：
1.可以使用png8來代替png24，即可解決問題，但是使用png8代替png24以后，圖片的清晰圖會(huì)有所下降
2.使用JavaScript來解決該問題，需要向頁(yè)面中引入一個(gè)外部的JavaScript文件，然后在寫一下簡(jiǎn)單的JS代碼，來處理該問題

CSS3圓角、陰影、rgba

CSS3圓角

設(shè)置某一個(gè)角的圓角，比如設(shè)置左上角的圓角：
border-top-left-radius:30px 60px;
同時(shí)分別設(shè)置四個(gè)角： border-radius:30px 60px 120px 150px;
設(shè)置四個(gè)圓角相同：
border-radius:50%;

CSS3陰影

box-shadow：h-shadow v-shadow blur spread color inset;
分別設(shè)置陰影：水平偏移 垂直偏移 羽化大小 擴(kuò)展大小 顏色 是否內(nèi)陰影

<style type="text/css">
    .box{
        width:200px;
        height:50px;
        background-color:gold;
        /* box-shadow:10px 10px 5px 2px pink inset; */
        box-shadow:10px 10px 5px 2px pink;
    }
</style>
......
<div class="box"></div>
<!-- 給盒子加上了粉紅色的陰影 -->

rgba（新的顏色值表示法）

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三個(gè)數(shù)值表示顏色，第四個(gè)數(shù)值表示顏色的透明度

CSS3 animation動(dòng)畫

1、@keyframes 定義關(guān)鍵幀動(dòng)畫
2、animation-name 動(dòng)畫名稱
3、animation-duration 動(dòng)畫時(shí)間
4、animation-timing-function 動(dòng)畫曲線

  • linear 勻速
  • ease 開始和結(jié)束慢速
  • ease-in 開始是慢速
  • ease-out 結(jié)束時(shí)慢速
  • ease-in-out 開始和結(jié)束時(shí)慢速
  • steps 動(dòng)畫步數(shù)

5、animation-delay 動(dòng)畫延遲
6、animation-iteration-count 動(dòng)畫播放次數(shù) n|infinite
7、animation-direction

  • normal 默認(rèn)動(dòng)畫結(jié)束不返回
  • Alternate 動(dòng)畫結(jié)束后返回

8、animation-play-state 動(dòng)畫狀態(tài)

  • paused 停止
  • running 運(yùn)動(dòng)

9、animation-fill-mode 動(dòng)畫前后的狀態(tài)

  • none 不改變默認(rèn)行為
  • forwards 當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）
  • backwards 在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）
  • both 向前和向后填充模式都被應(yīng)用

10、animation:name duration timing-function delay iteration-count direction;同時(shí)設(shè)置多個(gè)屬性

舉例：（人物走路動(dòng)畫）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路動(dòng)畫</title>
    <style type="text/css">        
        .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;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

CSS3 transition動(dòng)畫（過度動(dòng)畫）

1、transition-property 設(shè)置過渡的屬性，比如：width height background-color
2、transition-duration 設(shè)置過渡的時(shí)間，比如：1s 500ms
3、transition-timing-function 設(shè)置過渡的運(yùn)動(dòng)方式

  • linear 勻速
  • ease 開始和結(jié)束慢速
  • ease-in 開始是慢速
  • ease-out 結(jié)束時(shí)慢速
  • ease-in-out 開始和結(jié)束時(shí)慢速
  • cubic-bezier(n,n,n,n)

4、transition-delay 設(shè)置動(dòng)畫的延遲
5、transition: property duration timing-function delay 同時(shí)設(shè)置四個(gè)屬性

  • 舉例：
<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>

定義頁(yè)面內(nèi)滾動(dòng)跳轉(zhuǎn)

頁(yè)面內(nèi)定義了“id”或者“name”的元素，可以通過a標(biāo)簽鏈接到它的頁(yè)面滾動(dòng)位置，前提是頁(yè)面要足夠高，有滾動(dòng)條，且元素不能在頁(yè)面頂部，否則頁(yè)面不會(huì)滾動(dòng)。

<a href="#mao1">標(biāo)題一</a>
......
......
<h3 id="mao1">跳轉(zhuǎn)到的標(biāo)題</h3>

CSS3 transform變換

1、translate(x,y) 設(shè)置盒子位移
2、scale(x,y) 設(shè)置盒子縮放
3、rotate(deg) 設(shè)置盒子旋轉(zhuǎn)
4、skew(x-angle,y-angle) 設(shè)置盒子斜切
5、perspective 設(shè)置透視距離
6、transform-style flat | preserve-3d 設(shè)置盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設(shè)置三維移動(dòng)
8、rotateX、rotateY、rotateZ 設(shè)置三維旋轉(zhuǎn)
9、scaleX、scaleY、scaleZ 設(shè)置三維縮放
10、tranform-origin 設(shè)置變形的中心點(diǎn)
11、backface-visibility 設(shè)置盒子背面是否可見

舉例：（翻面效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .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);
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg"></div>
        <div class="back_info">背面文字說明</div>
    </div>
</body>
</html>

圖片文字遮罩，擴(kuò)展二級(jí)菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片文字遮罩</title>
    <style type="text/css">
        .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;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/location_bg.jpg" alt="花朵">
        <div class="pic_info">
            <p>圖片說明：這是一朵花圖片說明：這是一朵花圖片說明：這是一朵花圖片說明：這是一朵花</p>
        </div>
    </div>
    <div class="box">
        <img src="img/location_bg.jpg" alt="花朵">
        <div class="pic_info">
            <p>圖片說明：這是一朵花圖片說明：這是一朵花圖片說明：這是一朵花圖片說明：這是一朵花</p>
        </div>
    </div>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 框架集 框架集和內(nèi)聯(lián)框架的作用類似，都是用于在一個(gè)頁(yè)面中引入其他的外部的頁(yè)面框架集可以同時(shí)引入多個(gè)頁(yè)面，而內(nèi)聯(lián)框架...
    咻咻咻滴趙大妞閱讀 553評(píng)論 0贊 0
  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫(kù)組件 SD...
    陽(yáng)明AI閱讀 16,201評(píng)論 3贊 119
  • 一、HTML5 1.1 認(rèn)識(shí)HTML5 HTML5并不僅僅只是作為HTML標(biāo)記語(yǔ)言的一個(gè)最新版本，更重要的是它制定...
    福爾摩雞閱讀 16,525評(píng)論 14贊 51
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,430評(píng)論 0贊 11
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    wzhiq896閱讀 2,114評(píng)論 0贊 2

友情鏈接更多精彩內(nèi)容