幾個CSS3妙用嘗試【基於"追夢子"博文】

在網上發現某位大神的博客，講解了幾個CSS妙用，以下逐一嘗試

原文鏈接：CSS3妙用-追夢子

------------------------------------------------------------------------------------------------------

1.

HTML:

<a href="javascript:;">我有下劃線噢</a>

CSS:

a{
    text-decoration:none;
    position:relative;
    padding-bottom:5px;
}
a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background-color:red;
    transform:scaleX(0);
    transition:all .5s;
}
a:hover::after{
    transform:scaleX(1);
}

效果敘述：鼠標移到鏈接上之後，會從文字底部中點向兩邊展開一條下劃線

1）代碼中給標籤添加了relative定位值，但是我不知道這句的作用...

2）內聯元素（如a）可以直接加padding以及margin,但似乎只在橫向有作用...

    內聯元素特點：

                2).1 和其他元素都在一行上；

        2).2 元素的高度、寬度及頂部和底部邊距不可設置；

             2).3 元素的寬度就是它包含的文字或圖片的寬度，不可改變。

3)僞類：：after

:after 選擇器在被選元素的內容後面插入內容。

請使用 content 屬性來指定要插入的內容。也可加圖片，但不知能否加入div之類的元素

又發現詳細介紹:after和:before的文章以及許多妙用...

    >::before和::after僞元素的用法

    >Pure CSS GUI icons

    >multiple-backgrounds-and-borders-with-css2

    （好大的世界...一篇一篇解決...）

此處的紅色下劃線其實是空標籤的背景，如果沒有top和bottom定位，紅色會出現在其後上方位置（因爲沒有高度）

4)scalex橫向變化 其值爲0時可以隱形

5)複習transition

----------------------------------------------------------------------------------------------------------

2.

效果：

HTML：

<a href="#a" id="a">我有下劃線噢</a>
<a href="#b" id="b">我有下劃線噢</a>
<a href="#c" id="c">我有下劃線噢</a>

CSS:

a{
    text-decoration:none;
    position:relative;
    padding:10px;
    border:1px solid #ccc;
}
a::after{
    content:'';
    position:absolute;
    left:10px;
    bottom:3px;
    width:calc(100% - 20px);
    height:1px;
    background-color:red;
    transform:scaleX(0);
    transition:all .5s;
}
a:target::after{
    transform:scaleX(1);
}

和案例1差不多，只不過發現了一個新的表達方式calc()。不過貌似兼容性不太好。

--------------------------------------------------------------------------------------------

3.

scaleY的妙用

案例1、配合animation製作loading

效果：

HTML：

<div id="box">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
</div>

CSS:

#box{
    position:relative;
}
#box>i{
    position:absolute;
    top:0;
    width:4px;
    height:35px;
    background-color:#0bac84;
    border-radius:5px;
}
#box>i:nth-of-type(1){
    left:0px;
    animation:loading 1s ease-in .1s infinite;
}
#box>i:nth-of-type(2){
    left:8px;
    animation:loading 1s ease-in .3s infinite;
}
#box>i:nth-of-type(3){
    left:16px;
    animation:loading 1s ease-in .6s infinite;
}
#box>i:nth-of-type(4){
    left:24px;
    animation:loading 1s ease-in .3s infinite;
}
@keyframes loading{
    0%{
        transform:scaleY(1);
    }
    50%{
        transform:scaleY(0.5);
    }
    100%{
        transform:scaleY(1);
    }
}

這個效果太酷了。重點在於這一句

animation:loading 1s ease-in .3s infinite;名字 持續時間 動畫方式 延遲時間 次數

以及後代選擇器，我在看源代碼前嘗試着自己寫，使用的是:nth-child後又換成odd even均不起作用。

----------------------------------------------------------------------------------------------------------------------------------------------

4.

效果：

HTML：

<div id="box">
    translate
</div>

CSS:

#box{
    position:absolute;
    left:50%;
    top:50%;
    width:100px;
    height:100px;
    /*margin-left:-50px;
    margin-top:-50px;*/
    transform:translate(-50%,-50%);
    background-color:red;
}

我認爲translate是根據元素的寬度和高度來計算的。也就是說如果寫100%的話，實際上就是100px而我寫了-50%就是它的一半所以和margin-left:-50px;效果是一樣的。

    transform:translate(-50%,-50%);