05 - CSS3新增屬性匯總

本文是針對剛學編程的小白,都是一些基礎(chǔ)知識,如果想了解更多深層一點的東西,歡迎移步本人博客!!

博客地址點擊跳轉(zhuǎn)

本篇內(nèi)容只要主要講解CSS3新增屬性,主要有偽類,動畫,背景,邊框,陰影等效果.CSS3學的好,不用js也一樣能做好動畫,C3很強大,逼格很高.我們是面向Google,面向Github,面向stackoverflow開發(fā),所以得掌握新技術(shù).現(xiàn)在很多國內(nèi)的大牛公司都在使用CSS3做動效,像百度,騰訊這類似的公司岩喷！So,廢話不多說旱爆，直接上干貨

偽類選擇器

偽類選擇器就是專門用于修改a標簽不同狀態(tài)樣式的

a標簽有哪些狀態(tài)

默認狀態(tài), 從未被點擊過 :link
被訪問過狀態(tài) :visited
長按狀態(tài) :active
鼠標懸浮狀態(tài) :hover

注意點

眾多偽類選擇器可以單獨的存在, 也可以一起存在
如果多個偽類選擇器一起出現(xiàn), 那么有嚴格的順序要求
編寫的順序要嚴格的按照愛恨原則 love hate

超鏈接美化

注意點

由于鼠標懸浮是從默認狀態(tài)過度過來的, 所以不用再次設置刪除下劃線
由于長按式從鼠標懸浮過度過來的, 所以在長按仲不用再次設置背景顏色

編碼規(guī)范

設置a標簽盒子相關(guān)的屬性寫在標簽選擇器中(顯示模式/尺寸), 設置a標簽內(nèi)容樣式/背景寫在偽類選擇器中
如果默認狀態(tài)和點擊之后狀態(tài)的樣式一樣, 可以簡寫到a標簽選擇器中

示例代碼 :

<ul>
    <li><a href="#">我是導航</a></li>
    <li><a href="#">我是導航</a></li>
    <li><a href="#">我是導航</a></li>
    <li><a href="#">我是導航</a></li>
    <li><a href="#">我是導航</a></li>
    <li><a href="#">我是導航</a></li>
    <li><a href="#">我是導航</a></li>
    <li><a href="#">我是導航</a></li>
</ul>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 960px;
        height: 30px;
        background-color: red;
        margin: 50px auto;
    }
    ul li{
        list-style: none;
        float: left;
        background-color: pink;
        width: 120px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    ul li a{
        display: inline-block;
        width: 120px;
        height: 30px;

        color: white;
        text-decoration: none;
    }
    /*
    ul li a:link{
        color: white;
        text-decoration: none;
    }
    ul li a:visited{
        color: white;
        text-decoration: none;
    }
    */
    ul li a:hover{
        color: red;
        background-color: #ccc;
    }
    ul li a:active{
        color: yellow;
    }
</style>

效果展示

**超鏈接美化**

過度模塊

過渡三要素

有屬性發(fā)生改變
必須告訴系統(tǒng)哪個屬性需要添加過渡
必須告訴系統(tǒng)過渡效果持續(xù)時間

如何給多個屬性添加過渡效果

通過逗號將多個屬性和多個過渡時間隔開即可
transition-property: width,background-color;
transition-duration: 3s, 3s;

過渡屬性連寫格式

transition: property duration timing-function delay;
transition: 過渡屬性過渡時間過渡運動曲線延遲時間
其中運動曲線和延遲時間是可以省略的

瀏覽器的私有前綴

每個版本的標準發(fā)布之前都會有一個草案, 瀏覽器廠商為了能夠不影響正式版所以會給草案中的屬性添加私有前綴, 當正式版發(fā)布之后如果新增的屬性可以使用, 那么瀏覽器廠商會逐步去掉私有前綴, 如果正式版發(fā)布之后屬性不可以使用, 但是由于過去添加了私有前綴所以對正式版也沒有影響

私有前綴

-webkit-transition: 谷歌/蘋果
-moz-transition: 火狐
-ms-transition: 微軟
-o-transition: 歐朋

示例代碼 :

<div>
    <span>讓</span>
    <span>我</span>
    <span>掉</span>
    <span>下</span>
    <span>眼</span>
    <span>淚</span>
    <span>的</span>
    <span>不</span>
    <span>止</span>
    <span>昨</span>
    <span>夜</span>
    <span>的</span>
    <span>酒</span>
</div>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        height: 150px;
        background-color: red;
        text-align: center;
        line-height: 150px;
        margin-top: 100px;

    }
    span{
        font-size: 50px;
        transition: margin 1s;
    }
    div:hover span{
        margin:0 20px;
    }
</style>

效果展示

**過度效果**

附小Demo一個以前這種效果都得用Js來實現(xiàn) 現(xiàn)在用C3輕松實現(xiàn)

< ! ---------- HTML ----------- >

<ul>
    <li>![](../素材/ad1.jpg)</li>
   <li>![](../素材/ad2.jpg)</li>
   <li>![](../素材/ad3.jpg)</li>
   <li>![](../素材/ad4.jpg)</li>
   <li>![](../素材/ad5.jpg)</li>
   <li>![](../素材/ad6.jpg)</li>
</ul>

< ! --------- Style --------------- >

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 960px;
        height: 300px;
        border: 1px solid #000;
        margin: 100px auto;
    }
    ul li{
        list-style: none;
        float: left;
        width: 160px;
        height: 300px;
        background-color: blue;
        /*box-sizing: border-box;*/
        /*border: 1px solid #000;*/
        overflow: hidden;
        transition: width 0.2s;
    }
    ul:hover li{
        width: 100px;
    }
    ul li:hover{
        width: 460px;
    }
</style>

< ! --------- 效果展示 ---------- >

**手風琴效果**

2D維度模塊

2D維度模塊可以讓元素旋轉(zhuǎn)/縮放/平移等操作

transform: scale(縮放值) rotate(旋轉(zhuǎn)度) translate(水平平移, 垂直平移);

2D維度模塊 - 形變中心點

默認情況下形變重點點是50% 50%, 寬度的一半和高度的一半
我們可以通過transform-origin屬性修改形變中心點
格式: transform-origin: 水平方向垂直方向;
注意點:

水平方向和垂直方向的取值有三種
特殊關(guān)鍵字 left right center bottom top
具體的像素點 0px
百分比

形變中心點會影響旋轉(zhuǎn)和縮放, 但是不會影響平移以及傾斜, 但是不會影響平移

/*transform-origin:50px 50px;*/
/*transform-origin:0px 0px;*/
/*transform-origin:100px 0px;*/
/*transform-origin:right top;*/
transform-origin:100% 0%;

2D維度模塊 - 透視

透視就是近大遠小
添加透視效果 : perspective: 0px;
注意點
透視屬性需要添加到父元素上
滅點
滅點就是近大遠小延伸線的相交點, 默認是父元素寬度高度的一半, 可以通過perspective-origin: 0px 0px;指定

附小Demo一個,可視化近大遠小效果

< ! ---------- HTML ----------- >

<div class="box">
    ![](../素材/pk1.png)
</div>

< ! --------- Style --------------- >

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width:310px;
            height: 438px;
            border: 1px solid #000;
            margin: 100px auto;
            background-color: skyblue;
            perspective: 500px;
        }
        .box img{
            /*推薦寫法*/
            transform-origin: center bottom;
            transition: all 1s;
        }
        .box:hover img{
            /*不推薦*/
            /*transform-origin: center bottom;*/
            transform: rotateX(70deg);
        }
    </style>

< ! --------- 效果展示 ---------- >

**近大遠小效果**

內(nèi)附Demo一個照片墻旋轉(zhuǎn) 點擊跳轉(zhuǎn)到案例頁面

動畫模塊

動畫三要素

指定動畫名稱
創(chuàng)建自定義動畫
指定動畫時長

示例代碼 :

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100px;
        height: 50px;
        background-color: red;
        /*告訴系統(tǒng)當前元素需要執(zhí)行動畫, 動畫的名稱叫做nj*/
        animation-name: nj;
        /*告訴系統(tǒng)當前元素執(zhí)行動畫的時長*/
        animation-duration: 5s;

        position: absolute;
        left: 0;
        top: 0;

    }
    /*告訴系統(tǒng)我們需要自己創(chuàng)建一個叫做nj的動畫*/
    @keyframes nj {
        /*
        from{
            margin-left: 0;
        }
        to{
            margin-left: 500px;
        }
        */
        /*
        0%{
            left: 0;
            top: 0;
        }
        25%{
            left: 300px;
            top: 0;
        }
        50%{
            left: 300px;
            top: 300px;
        }
        75%{
            left: 0;
            top: 300px;
        }
        100%{
            left: 0;
            top: 0;
        }
        */
        0%{
            left: 0;
            top: 0;
        }
        30%{
            left: 300px;
            top: 0;
        }
        60%{
            left: 300px;
            top: 300px;
        }
        100%{
            left: 0;
            top: 300px;
        }
    }
</style>

動畫模塊其它屬性

示例代碼 :

<style>
    <div class="box1"></div>
    <div class="box2"></div>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        width: 100px;
        height: 50px;
        background-color: red;
        animation-name: sport;
        animation-duration: 2s;
        /*動畫延遲時間*/
        /*animation-delay: 2s;*/
        /*動畫運動曲線*/
        animation-timing-function: linear;
        /*指定動畫重復次數(shù)*/
        animation-iteration-count: 3;
        /*指定動畫時候需要往返, alternate往返 normal默認*/
        animation-direction: alternate;
    }
    .box1:hover{
        /*默認值是running, 如果設置為paused那么動畫會暫停*/
        animation-play-state: paused;
    }
    @keyframes sport {
        from{
            margin-left: 0;
        }
        to{
            margin-left: 400px;
        }
    }

    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
        margin: 100px auto;
        animation-name: xxoo;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-delay: 2s;
        /*
        動畫其實有三種狀態(tài), 分別是等待狀態(tài)/運動狀態(tài)/結(jié)束狀態(tài)
        none:默認值，　不做任何操作
        backwards: 設置動畫等待狀態(tài)的樣式為動畫的第一個
        forwards: 設置動畫結(jié)束狀態(tài)的樣式為動畫的最后一個
        both:是backwards和forwards的結(jié)合
        */
        animation-fill-mode: both;
    }
    @keyframes xxoo {
        0%{
            transform: rotate(10deg);
        }
        50%{
            transform: rotate(30deg);
        }
        100%{
            transform: rotate(80deg);
        }
    }
</style>

連寫格式

animation: 動畫名稱動畫時間運動曲線延遲時間動畫次數(shù) 往返動畫;
連寫格式簡寫 : animation: 動畫名稱動畫時間;

附Demo1一個云層特效點擊跳轉(zhuǎn)到案例頁面

附Demo2一個無限輪播點擊跳轉(zhuǎn)到案例頁面

3D維度模塊

示例代碼 :

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            border: 1px solid #000;

            perspective: 300px;
            /*
            1.2D和3D
            默認情況下一個元素的transform-style等于flat, 也就是2D
            如果將transform-style設置為preserve-3d, 那么這個元素所有的子元素都會變成3D的
            2.注意點:
            和透視一樣, 如果想看到某個元素的3D效果, 那么就給這個元素的父元素設置 transform-style: preserve-3d;
            */
            transform-style: preserve-3d;
            transform: rotateY(0deg);
        }
        .father .son{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 0 auto;
            margin-top: 50px;
            transform: rotateY(45deg);
        }
    </style>

附Demo一個 3D立方體效果點擊跳轉(zhuǎn)到案例頁面

背景新增屬性

背景尺寸屬性

在CSS3以前背景圖片是不支持設置大小的, 從CSS3開始我們可以通過background-size的屬性來修改背景圖片的大小
background-size取值:
固定像素: 指定多少就是多少, 例如:background-size:100px 100px;
百分比: 指定多少就是多少, 例如:background-size:50% 20%;
auto: 如果寬度是auto, 那么就等比拉伸寬度. 如果高度是auto,那么久等比拉伸高度
conver: 等比拉伸圖片, 保證圖片的寬度"和"高度都填滿盒子
contain: 等比拉伸圖片, 保證圖片的寬度"或"高度填滿盒子

背景繪制位置屬性

background-origin 屬性
可以用于指定"背景圖片"從什么地方開始繪制
取值:
border-box: 背景圖片從border開始繪制
padding-box: 背景圖片從padding開始繪制, 默認
content-box: 背景圖片從content開始繪制
注意點:
background-origin只對背景圖片有效, 對背景顏色無效的
圖解

**背景繪制**

背景裁剪屬性

background-clip
background-clip 可以設置背景哪些部分需要顯示
取值
border-box: 盒子的所有背景都需要顯示
padding-box: 盒子padding和content的部分背景需要顯示
content-box: 盒子content部分的背景需要顯示
background-origin和background-clip
background-origin是用于指定背景圖片從什么地方開始繪制
background-clip是用于指定顯示哪些區(qū)域的背景需要
圖解

**背景裁剪**

多重背景

只需要在連寫格式后面通過逗號隔開即可

background: url("../素材/animal1.png") left top no-repeat,
url("../地址") right top no-repeat;

注意點
除了連寫可以設置多重背景以外, 分開寫也可以設置多重背景
background-image: url("../圖片地址2"),url("../圖片地址2");
background-repeat:no-repeat, no-repeat;
background-position: left top, right top;
圖解

**多重背景**

多重背景動畫
示例代碼 :

<div class="box"></div>
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 190px;
            border: 1px solid #000;
            margin: 100px auto;
            /*添加背景*/
            background-image: url("../素材/bg-plane.png"), url("../素材/bg-sun.png"),url("../素材/bg-clouds.png");
            background-repeat:no-repeat, no-repeat,no-repeat;
            background-position: 50px 150px,300px 50px ,left top;
            background-size:50px 50px, 50px 50px,auto auto;

            /*添加動畫*/
            animation: sport 10s linear 0s infinite normal;
        }
        @keyframes sport {
            from{
                background-position: 50px 150px,300px 50px ,left top;
            }
            to{
                background-position: 450px -100px,300px 50px ,-1123px top;
            }
        }
    </style>

圖解

**CSS3- 多重背景動畫**

邊框圓角

邊框圓角可以將邊框從直角轉(zhuǎn)換為圓角

格式:

border-radius: 左上右上右下左下;
當省略某個取值之后, 被省略的取值是它對角的取值, 如果只有一個取值代表四個角都是這個值

參數(shù)

/*第一個參數(shù)是水平方向, 第二個參數(shù)是垂直方向*/
border-top-left-radius: 100px 50px;
border-top-right-radius: 100px 50px;
border-bottom-left-radius: 100px 50px;
border-bottom-right-radius: 100px 50px;

/*斜杠前面的是設置四個角水平方向的, 斜杠后面的是設置四個角垂直方向的*/
border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;
border-radius: 100px/50px;

如果border-radius的取值大于邊框的寬度, 那么內(nèi)邊框就會有圓角效果, 如果border-radius的取值小魚邊框的寬度, 那么內(nèi)邊框不會有圓角的效果

附Demo1一個邊框圓角之太極八卦點擊跳轉(zhuǎn)到案例頁面

附Demo2一個邊框圓角之跳動的心點擊跳轉(zhuǎn)到案例頁面

附Demo3一個邊框圓角之安卓機器貓點擊跳轉(zhuǎn)到案例頁面

附Demo4一個邊框圓角之鐘表點擊跳轉(zhuǎn)到案例頁面

邊框圖片

示例代碼 :

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 300px;
        height: 300px;
        margin: 100px auto;
        border: 10px solid #000;
        /*指定邊框圖片*/
        border-image-source: url("../素材/border.jpg");
        /*slice告訴系統(tǒng), 如果將邊框圖片切割為九宮格*/
        border-image-slice: 70 70 70 70;
        /*指定邊框圖片的寬度, 注意點: 優(yōu)先級比直接給border添加要大*/
        border-image-width: 70px;
        /*指定除邊框四個角以外的圖片如何顯示*/
        /*border-image-repeat: repeat;*/
        /*border-image-repeat: stretch;*/
        border-image-repeat: round;

        /*讓邊框圖片向外移動多少*/
        border-image-outset: 10px 30px 60px 100px;

        box-sizing: border-box;
        background-color: red;
    }
</style>

vertical-align屬性

元素默認情況下是和文字的基線對其的

/* 默認值 */
vertical-align: baseline;
/* 讓元素和父元素的底部對齊 */
vertical-align: bottom;
/* 讓元素和文字的底部對齊 */
vertical-align: text-bottom;
/* 讓元素和文字的頂部對齊 */
vertical-align: text-top;
/* 讓元素和父元素的頂部對齊 */
vertical-align: top;
/* 讓元素和文字的中線對齊  */
vertical-align: middle;

線性漸變

background: linear-gradient(red, blue);
background: linear-gradient(to right,red, blue);
background: linear-gradient(to top right,red, blue);
background: linear-gradient(0deg, red, blue);
/*默認情況下系統(tǒng)會等分寬度給漸變的顏色, 如果不想等分, 可以直接在顏色后面添加百分比*/
background: linear-gradient(red, blue);
background: linear-gradient(red 50%, blue 60%);
/*注意: 這里指定的百分之多少是用于計算過渡的距離
例如 red 30%, blue 40%, 那么40-30=10, 所有顯示完紅色之后會有10%的距離用于從紅色過渡到藍色
*/
background: linear-gradient(red 30%, blue 40%, green 60%);

徑向漸變

/*background-image: radial-gradient(red, blue);*/
/*
第一個參數(shù): 指定擴散范圍
第二個參數(shù): 指定從什么地方開始擴散
*/
/*background-image: radial-gradient(150px at center center, red, blue);*/
background-image: radial-gradient(150px at 50px 50px, red, blue);
/*background-image: radial-gradient(150px at 50px 50px, red 50%, blue 50%);*/

重復漸變

<div class="box1"></div>
<div class="box2"></div>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        width: 300px;
        height: 100px;
        border: 1px solid #000;
        margin: 100px auto;
        background: repeating-linear-gradient(to right,red, blue);
        background-size:100px 100px;
    }
    .box2{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 0px auto;
        /*background: repeating-radial-gradient(red, blue, yellow);*/
        background: repeating-radial-gradient(red 10%, blue 20%, yellow 30%);
        /*background-size:100px 100px;*/
    }
</style>

綜合案例叮當貓點擊跳轉(zhuǎn)

CSS3新增一些重要的屬性差不多就這么內(nèi)容,把這些東西學會你就可以在前端玩轉(zhuǎn)任意動畫特效咯! 持續(xù)更新中,希望大家多多支持 !

最后編輯于：2017.12.06 02:07:13

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末紊遵，一起剝皮案震驚了整個濱河市匙姜，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌腹缩，老刑警劉巖抄瑟，帶你破解...
沈念sama閱讀 211,496評論 6贊 491
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異浅缸，居然都是意外死亡轨帜，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,187評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門衩椒，熙熙樓的掌柜王于貴愁眉苦臉地迎上來蚌父，“玉大人，你說我怎么就攤上這事毛萌∩沂玻” “怎么了？”我有些...
開封第一講書人閱讀 157,091評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵朝聋，是天一觀的道長。經(jīng)常有香客問我囤躁，道長冀痕，這世上最難降的妖魔是什么荔睹？我笑而不...
開封第一講書人閱讀 56,458評論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮言蛇，結(jié)果婚禮上僻他，老公的妹妹穿的比我還像新娘。我一直安慰自己腊尚，他們只是感情好吨拗，可當我...
茶點故事閱讀 65,542評論 6贊 385
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著婿斥，像睡著了一般劝篷。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上民宿，一...
開封第一講書人閱讀 49,802評論 1贊 290
城市分裂傳說
那天娇妓，我揣著相機與錄音，去河邊找鬼活鹰。笑死哈恰，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的志群。我是一名探鬼主播着绷，決...
沈念sama閱讀 38,945評論 3贊 407
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼锌云！你這毒婦竟也來了荠医？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 37,709評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤宾抓，失蹤者是張志新（化名）和其女友劉穎子漩，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體石洗，經(jīng)...
沈念sama閱讀 44,158評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡幢泼，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,502評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了讲衫。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缕棵。...
茶點故事閱讀 38,637評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖涉兽，靈堂內(nèi)的尸體忽然破棺而出招驴，到底是詐尸還是另有隱情，我是刑警寧澤枷畏，帶...
沈念sama閱讀 34,300評論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布别厘，位于F島的核電站，受9級特大地震影響拥诡，放射性物質(zhì)發(fā)生泄漏触趴。R本人自食惡果不足惜氮发，卻給世界環(huán)境...
茶點故事閱讀 39,911評論 3贊 313
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望冗懦。院中可真熱鬧爽冕，春花似錦、人聲如沸披蕉。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,744評論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽没讲。三九已至眯娱，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間食零，已是汗流浹背困乒。一陣腳步聲響...
開封第一講書人閱讀 31,982評論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留贰谣，地道東北人娜搂。一個月前我還...
沈念sama閱讀 46,344評論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長得像吱抚，于是被迫代替她去往敵國和親百宇。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 43,500評論 2贊 348

05 - CSS3新增屬性匯總

本文是針對剛學編程的小白,都是一些基礎(chǔ)知識,如果想了解更多深層一點的東西,歡迎移步本人博客!!

偽類選擇器

偽類選擇器就是專門用于修改a標簽不同狀態(tài)樣式的

a標簽有哪些狀態(tài)

注意點

超鏈接美化

注意點

編碼規(guī)范

示例代碼 :

效果展示

過度模塊

過渡三要素

如何給多個屬性添加過渡效果

過渡屬性連寫格式

瀏覽器的私有前綴

私有前綴

示例代碼 :

效果展示

< ! ---------- HTML ----------- >

< ! --------- Style --------------- >

< ! --------- 效果展示 ---------- >

2D維度模塊

2D維度模塊可以讓元素旋轉(zhuǎn)/縮放/平移等操作

2D維度模塊 - 形變中心點

2D維度模塊 - 透視

附小Demo一個,可視化近大遠小效果

< ! ---------- HTML ----------- >

< ! --------- Style --------------- >

< ! --------- 效果展示 ---------- >

動畫模塊

動畫三要素

示例代碼 :

動畫模塊其它屬性

示例代碼 :

連寫格式

3D維度模塊

示例代碼 :

背景新增屬性

背景尺寸屬性

背景繪制位置屬性

背景裁剪屬性

多重背景

邊框圓角

格式:

參數(shù)

邊框圖片

vertical-align屬性

元素默認情況下是和文字的基線對其的

線性漸變

徑向漸變

重復漸變

CSS3新增一些重要的屬性差不多就這么內(nèi)容,把這些東西學會你就可以在前端玩轉(zhuǎn)任意動畫特效咯! 持續(xù)更新中,希望大家多多支持 !

推薦閱讀更多精彩內(nèi)容