CSS 樣式介紹（五）

1. css 精靈技術（sprite）

css 精靈技術（sprite）：將多個小背景圖片合成一個大的背景圖片(精靈圖)返回回來，利用background-position去定位自己需要的圖片，精靈技術是爲了減少服務器的請求次數，減少服務器壓力。

2. 滑動門核心技術

核心技術：就是利用css精靈（主要要背景位置）和盒子padding撐開寬度，以便能適用不同的字數的導航欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*滑動門技術*/
        a {
            display: inline-block;
            height: 33px;
            /*千萬不能給寬度，寫死寬度不對的，我們要推拉門*/
            background: url(ao.png) no-repeat;
            padding-left: 15px;
            margin-left: 100px;
            color: #fff;
            text-decoration: none;
            line-height: 33px;
        }

        a span {
            height: 33px;
            display: inline-block;
            background: url(ao.png) no-repeat right;
            /*span 不能給高度 利用padding擠開 要span 右邊的圓角，所以背景位置要右對齊*/
            padding-right: 15px;
        }

        a:hover span {
            color: red;
        }

        
    </style>
</head>
<body>
    <a href="#">
            <span>首sdds頁</span>
    </a>

    <a href="#">
            <span>公司簡介</span>
    </a>
    <!-- 總結：1. a設置背景左側，padding撐開合適寬度. -->
    <!-- 2. span 設置背景右側，padding 撐開合適寬度 剩下由文字撐開寬度 -->
    <!-- 3. 之所以a 包含 span 就是因爲整個導航都是可以點擊的。 -->
</body>
</html>

4. 僞元素選擇器

僞類選擇器就是選取對象。而僞元素選擇器本質上就是插入一個元素（標籤盒子）只不過是行內元素 span a，所以要通過display: inline-block轉換。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .demo::before { /*僞元素選擇器*/
            content: "小狗";
            background-color: pink;
            border: 1px solid red;
            width: 100px;  /*默認設置寬高無效，要轉爲行內塊或者塊級元素*/
            height: 100px; 
            display: inline-block;
            /*僞類選擇器 就是選取對象。而僞元素選擇器本質上就是插入一個元素（標籤 盒子）只不過是行內元素 span a，所以要通過display: inline-block轉換*/
        }

        .demo::after { /*僞元素選擇器*/
            content: "時代大廈狗";
            background-color: pink;
            border: 1px solid red;
            width: 100px;  
            height: 100px; 
            display: inline-block;
        }

        .demo1 {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: blue;
            position: relative;
            margin: 100px auto;
        }

        .demo1:hover::before { /*鼠標經過之後 前面插入一個僞元素*/
            content: "";
            width:100%;
            height: 100%;
            display: block;
            border: 2px solid red;
            left: 0;
            top: 0;
            position: absolute;  /*要僞元素不佔位就要用絕對定位*/
            box-sizing: border-box; /*把padding 和 border 都放width裏面了*/
        }
        
    </style>
</head>
<body>
    <div class="demo">
        是sdds
    </div>

    <span class="demo1">
        時代大廈
    </span>
</body>
</html>

4. css3過渡屬性

transition:(transition-property)要過度的屬性 (transition-duration)花費時間 (transition-timing-function)運行曲線何時開始;
transition-timing-function:linear 均速， ease 漸漸慢下來, ease-in 加速. ease-out 減速,ease-in-out 先加速後減速

.transitionDemo {
    width: 100px;
    height: 100px;
    display: block;
    background-color: pink;
    transition: width 0.5s linear 0s,
    height 0.5s linear 0.5s;
    transition: all 0.5s; /*所有屬性都要變化用all就行*/
    /*transition 寫在div 裏面 ，不要寫在hover裏面*/
    margin-bottom: 500px;

} 

.transitionDemo:hover {
    width: 200px;
    height: 200px;
}

5. 位置移動及旋轉屬性

.div1 {
    width: 200px;
    height: 200px;
    background-color: pink;
    transform: translateX(100px); /*水平移動100像素*/
    /*translate移動距離 如果是% ，不是以父親寬度爲準，以自己的寬度爲準*/
    transform: translateX(50%);/* 走div盒子自己寬度 200px的一半 就是100px*/
    position: absolute; 
    left: 50%;
    /*top: 50%;*/
    transform: translateX(-50%); /*水平居中*/
    /*transform: translateY();*/
    /*transform: translate(-50%, -50%); /*水平垂直居中*/
}


img.demo1 {
    margin: 200px;
    transition: all 0.6s;
    transform-origin: center center; /*默認中心點旋轉*/
    transform-origin: left top;
    /*transform-origin: 20px 10px;*/
        }

img.demo1:hover {
    transform: rotate(180deg); /*旋轉180度*/
}

img.demo2 {
    margin:  0 auto;
    display: block;
    transition: all 2s;
    transform-origin: center center; /*默認中心點旋轉*/

}

img.demo2:hover {
    transform: rotateX(180deg);

}


h2 {
    /*transform: translated3d(x,y,z)；x 和 y 可以是px 可以是%， z 只能是px*/
    margin: 100px;
    transform: translate3d(0, 50px, 0);
    transition: all 0.8s;
}

h2:hover {
    transform: translate3d(0, 0, 0);
}

6. css3動畫animation屬性

**animation: 動畫名稱動畫時間運動曲線何時開始播放次數(infinite無線循環) 是否反方向;(normal reverse alternate) **

.animation1 {
    width: 100px;
    height: 100px;
    margin: 50px;
    background-color: blue;
    animation: go 5s ease 0s infinite;
}

/*@keyframes 動畫名稱 {}  定義動畫*/
@keyframes go {

 /*from {
    transform: translateX(0);
 }
 */
 0% { /*等價於from*/
    transform: translate3d(0, 0, 0);
 }

 25% {
    transform: translate3d(800px, 0, 0);
 }

 50% {
    transform: translate3d(800px, 400px, 0);
 }

 75% {
    transform: translate3d(0, 400px, 0);
 }

 100% { /*等價於 to*/
    transform: translate3d(0, 0, 0);
 }

 /*to { 
    transform: translateX(600px)
 }*/
}

.animation1:hover {
    animation-play-state: paused; /*鼠標經過暫停動畫 ，離開繼續開始*/
}

CSS 樣式介紹（五）

1. css 精靈技術（sprite）

2. 滑動門核心技術

4. 僞元素選擇器

4. css3過渡屬性

5. 位置移動及旋轉屬性

6. css3動畫animation屬性

CSS 樣式介紹（六）

CSS 樣式介紹（五）

CSS 樣式介紹（四）

CSS 樣式介紹（三）

CSS 樣式介紹（二）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結