transition、transform、flex、textshadow、多背景、盒子半透明

阿新 • • 發佈：2020-09-08

文字對齊問題

文字無法與背景圖示居中對齊

使用inline-block 與vertrical-align配合使用

然後使用margin就可以進行移動了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 30px;
        border: 1px solid red 
;
        line-height: 30px;
    }
    span {
        display: inline-block;
        vertical-align: middle;
        width: 10px;
        height: 10px;
        background-color: pink;
    /*  margin-top: 10px;*/
    }

    </style>
</head>
<body>
    <div>
        <span></span>  文字
    </div>
</body>
</html>

transition(過度)

過度建議寫在本體上

若沒有寫在本體上，則部分操作可能沒有過度效果

transition-property

要過度的CSS屬性名稱

transition-duration

定義過度花費的時間，預設是0

transition-timing-function

規定過度效果的曲線，預設是ease

linear: 勻速

ease: 逐漸慢下來

ease-in: 加速

ease-out: 減速

transition-delay

規定過度效果何時開始，預設是0

案例

<!DOCTYPE html>
<html lang="en" 
>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        /*transition: width 0.5s ease 0s, height 0.3s; 多組屬性用逗號分隔*/
        transition: all 0.5s; /*  過渡寫到本身上 誰做過渡動畫，寫到誰身上*/
    }
    div:hover {
        width: 800px;
        height: 300px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

transform（2D變形CSS3）

translate(x,y)：移動

translateX(X)：僅水平方向移動

transitionY(Y)：僅垂直方向移動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*transition 過渡 */
        /*transform: translate(100px, 0);  x 100 y 是  0*/
        transition: all 0.4s;
    }
    div:hover {
        transform: translate(100px, 100px);
        /*translate 如果x -50% 跟父親沒關係，是走自己盒子寬度的一半*/
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

scale(x,y)：縮放

值>1:放大效果

值< 1:縮小效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    div:hover {
         /*transform: scale(0.8, 1); 0 0%   1  100%   寬度變為了原來的 80%  高度不變 */
        /*transform: scale(1, 0.8);  0 0%   1  100%   寬度變為了原來的 80%  高度不變 */
        transform: scale(0.8); /* 高度省略 預設  和 寬度一起縮放 都是 0.8 */
    }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

roate(deg)：旋轉

正數：順時針旋轉

負數：逆時針旋轉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 0.6s;
    }
    div:hover {
        transform: rotate(360deg); 
    }
    img {
        transition: all 0.6s;
    }

    img:hover {
        transform: rotate(360deg); 
    }
    </style>
</head>
<body>
    <div>123</div>
    <img src="images/fengche.png" height="585" width="585" alt="">
</body>
</html>

transform-origin：調整元素轉換變形的原點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 0.6s;
        transform-origin: right bottom;  /*設定 旋轉中心點為 右下角*/
    }
    div:hover {
        transform: rotate(360deg); 
    }

    </style>
</head>
<body>
    <div>123</div>
    
</body>
</html>

skew(deg,deg)：傾斜(用的較少）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: skew(30deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

animation(動畫CSS3)

動畫是CSS3中具有顛覆性的特徵之一，可通過設定多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果

語法格式：

animation:動畫名稱花費時間運動曲線何時開始播放次數是否反方向;

CSS3動畫屬性

屬性	描述
`@keyframes`	規定動畫
`animation`	所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性
`animation-name`	規定 @keyframes 動畫的名稱
`animation-duration`	規定動畫完成一個週期所花費的秒或毫秒。預設是 0
`animation-time-function`	規定動畫的速度曲線。預設是 "ease"
`animation-delay`	規定動畫何時開始。預設是 0
`animation-iteration-count`	規定動畫被播放的次數。預設是 1
`animation-direction`	規定動畫是否在下一週期逆向地播放。預設是 "normal"
`animation-play-state`	規定動畫是否正在執行或暫停。預設是 "running"

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        left: 0;
        /*呼叫動畫*/
        /*animation:動畫名稱 花費時間 運動曲線  何時開始  播放次數  是否反方向;*/
        animation: move 2s ease 0s infinite alternate;
        -webkit-animation: move 2s ease 0s infinite alternate;
    }

    /*宣告動畫  關鍵幀  @keyframes 動畫名稱 {  }  */
    @keyframes move  {
        from {
            left: 0;
            background-color: pink;
        }

        to {
            left: 1000px;
            background-color: yellow;
        }
    }
    @-webkit-keyframes move  {
        from {
            left: 0;
            background-color: pink;
        }

        to {
            left: 1000px;
            background-color: yellow;
        }
    }
    @-ms-keyframes move  {
        from {
            left: 0;
            background-color: pink;
        }

        to {
            left: 1000px;
            background-color: yellow;
        }
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

案例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    img {
        width: 400px;
        height: auto;
        /*animation:動畫名稱 花費時間 運動曲線  何時開始  播放次數  是否反方向;*/
        animation: heart 0.5s  infinite;  /*一個叫heart 的動畫  每隔0.5s 執行動畫 無限次*/
    }

    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 100px auto;
        animation: heart 0.5s  infinite;  /*一個叫heart 的動畫  每隔0.5s 執行動畫 無限次*/
    }

    @keyframes heart {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }
    </style>
</head>
<body>
    <img src="images/1.jpg" height="744" width="800" alt="">
    <div></div>
</body>
</html>

flex伸縮佈局

方向：預設主軸從左向右，側軸預設從上到下

主軸：Flex容器的主軸主要用來配置Flex專案，預設是水平方向

側軸：與主軸垂直的軸稱作側軸，預設是垂直方向的

flex-direction: 控制主軸方向

調整主軸方向（預設為水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

案例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    section {
        width: 80%;
        height: 150px;
        /**/
        margin: 100px auto;

        /*父親新增 伸縮佈局*/
        display: flex;    
    }
    section div {   
        height: 100%;
        flex: 1;   /* 孩子的份數*/

    }
    section div:nth-child(1) {
        background-color: pink;
        flex:  2;
    }
    section div:nth-child(2) {
        background-color: purple;
        margin: 0 10px;
    }
    section div:nth-child(3) {
        background-color: blue;
        flex: 3;
    }

    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>

案例二

其中一個盒子固定寬度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    section {
        width: 80%;
        height: 150px;
        /**/
        margin: 100px auto;

        /*父親新增 伸縮佈局*/
        display: flex;  
        min-width: 500px;   /*section最小的寬度就是 500*/
    }
    section div {   
        height: 100%;
        /*flex: 1;    孩子的份數*/

    }
    section div:nth-child(1) {
        background-color: pink;
        width: 200px;
    
    }
    section div:nth-child(2) {
        background-color: purple;
        margin: 0 10px;
        flex: 2;
    }
    section div:nth-child(3) {
        background-color: blue;
        flex: 1;
    
    }

    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>

text-shadow文字陰影

語法格式

text-shadow:水平位置垂直位置模糊距離陰影顏色;

值	描述
h-shadow	必需。水平陰影的位置，允許負值
v-shadow	必需。垂直陰影的位置，允許負值
blur	可選。模糊陰影的距離
color	可選。陰影的顏色

背景漸變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 100px;
        /*background:-webkit-linear-gradient(漸變的起始位置， 起始顏色， 結束顏色)；*/
        /*background: -webkit-linear-gradient(top, red, green);*/
        /*background: -webkit-linear-gradient(left, red, green);*/
        /*background: -webkit-linear-gradient(left top, red, green);*/
        
        /*background:-webkit-linear-gradient(漸變的起始位置， 顏色 位置， 顏色 位置....)*/
        background: -webkit-linear-gradient(top, red 0%, green 50%, blue 100%);
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

多背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        border: 1px solid #000;
        width: 600px;
        height: 600px;
        background: url(images/2.jpg) no-repeat top left , url(images/3.jpg) no-repeat bottom right;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

盒子半透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        /*background: rgba(255, 0, 0, .2); 盒子的背景透明*/
        opacity: 0.2;  /*盒子半透明*/
        /*filter: alpha(opacity=20); ie 6 寫法*/
    }

    </style>
</head>
<body>
<div>
    <div></div>
    <p>12312312</p>
</div>
    
</body>
</html>

transform 3D邊形(CSS3)

roateX：沿X軸立體旋轉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    img {
        transition: all 2s;
    }
    img:hover {
        transform: rotateX(360deg);
    }
    </style>
</head>
<body>
    <img src="images/x.jpg" height="226" width="300" alt="">
</body>
</html>

roateY：沿Y軸旋轉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        perspective: 500px;
    }
    img {
        transition: all 5s;
    }
    img:hover {
        transform: rotateY(360deg);
    }
    </style>
</head>
<body>
    <img src="images/1498446043198.png" alt="">
</body>
</html>

perspective

相對於眼睛的距離，越小感覺越明顯

一般給父親加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       * {
        margin: 0;
        padding: 0;
       }
       body {
        /*perspective: 500px;*/
       }
        div {
            width: 224px;
            height: 224px;
            

        }
        
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 2s; 

        }

        div:hover img {
            transform: rotateY(180deg);
        }
        div img:last-child {
            backface-visibility: hidden;    /*定義當圖片不面向螢幕時是否可見*/
        }
    </style>
</head>
<body>
    <div>
        <img src="images/hou.svg" alt="">
        <img src="images/qian.svg" alt="">
    </div>
</body>
</html>