---
# System prepended metadata

title: CSS mobile 第一章
tags: [mobile, 第一章, CSS]

---

---
tags: CSS,mobile,第一章
---
# CSS mobile 第一章
## 字體圖標
![](https://i.imgur.com/8OA3sK5.jpg)
![](https://i.imgur.com/6czAh7r.jpg)
### 網站
https://icofont.com/icons
### 範例
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./icofont/icofont.css" />
    <style>
      span {
        font-size: 100px;
        color: red;
      }
    </style>
  </head>
  <body>
    <span class="icofont-address-book"></span>
  </body>
</html>
```
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./icofont/icofont.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
      }
      a {
        color: black;
      }
      .nav {
        width: 200px;
        margin: 50px auto;
        font-size: 24px;
      }
      .icofont-cart-alt {
        color: orange;
      }
      .icofont-check-alt {
        color: green;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <ul>
        <li>
          <a href="#">
            <span class="icofont-cart-alt"></span>
            <span>購物車</span>
            <span class="icofont-check-alt"></span>
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>
```
## 平面
### transition
https://ithelp.ithome.com.tw/articles/10200365
### 範例
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 500px;
        height: 300px;
        margin: 100px auto;
        border: 1px solid black;
      }
      .son {
        width: 200px;
        height: 100px;
        background-color: pink;
        /* 過渡屬性 */
        transition: all 0.5s;
      }
      .father:hover .son {
        /* transform: translate(向右,向下); */
        /* 負值方向相反 */
        /* ------ */
        /* transform: translate(50%,50%); */
        /* transform: translate(width的一半,height的一半); */
        /* ------ */
        /* transform: translate(50px); */
        /* 只設定水平方向x軸 */
        /* ------ */
        /* transform: translateY(50px); */
        /* 只設定垂直方向y軸 */
        transform: translate(50px, 100px);
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>
```
### 絕對定位居中
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        position: absolute;
        /* margin: 0 auto; */
        /* 左邊的邊長居中 */
        left: 50%;
        /* width的一半修正 */
        /* margin-left: -150px; */
        /* 上邊的邊長居中 */
        top: 50%;
        /* height的一半修正 */
        /* margin-top: -150px; */
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box">box</div>
  </body>
</html>
```
### 雙開門效果
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 600px;
        height: 600px;
        margin: 0 auto;
        background: url('./p013image/kmtgod.jpg');
        overflow: hidden;
      }
      .box::before,
      .box::after {
        /* 偽元素是inline */
        /* 可直接浮動就當成行內塊 */
        float: left;
        content: '';
        width: 50%;
        height: 100%;
        background-image: url(./p013image/gate.jpg);
        transition: all 0.5s;
      }
      .box::after {
        background-position: right 0;
      }
      .box:hover::before {
        transform: translate(-100%);
      }
      .box:hover::after {
        transform: translate(100%);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
```
## 旋轉
![](https://i.imgur.com/0P06eHs.jpg)
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 720px;
        transition: all 2s;
      }
      img:hover {
        transform: rotate(360deg);
      }
    </style>
  </head>
  <body>
    <img src="./p015image/rotate.jpg" alt="" />
  </body>
</html>
```
### 轉換原點
![](https://i.imgur.com/YCfxRfn.jpg)
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 720px;
        border: 1px solid black;
        transition: all 2s;
        /* 加到標籤本身，不要加到hover */
        transform-origin: right bottom;
      }
      img:hover {
        transform: rotate(360deg);
      }
    </style>
  </head>
  <body>
    <img src="./p015image/rotate.jpg" alt="" />
  </body>
</html>
```
### 多重轉換
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 1200px;
        height: 300px;
        border: 1px solid black;
      }
      img {
        width: 300px;
        transition: all 8s;
      }
      .box:hover img {
        transform: translate(900px) rotate(720deg);
        /* 順序寫反會變蝸牛螺旋效果 */
        /* transform: rotate(720deg) translate(900px); */
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./p017image/300.png" alt="" />
    </div>
  </body>
</html>
```
## 縮放
![](https://i.imgur.com/I1iCtm5.jpg)
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 1920px;
        height: 1080px;
        margin: 1000px auto;
        background-color: pink;
      }
      .box img {
        width: 100%;
        transition: all 0.5s;
      }
      .box:hover img {
        /* width: 3840px; */
        /* height: 2160px; */
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./p018image/summer.jpg" alt="" />
    </div>
  </body>
</html>
```
### 縮放案例
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      img {
        width: 100%;
      }
      .box {
        width: 1280px;
        height: 800px;
        margin: 50px auto;
        overflow: hidden;
      }
      .box p {
        font-size: 50px;
        color: black;
        text-align: center;
        padding: 10px 10px 0 10px;
      }
      .box .pic {
        position: relative;
      }
      .box .pic::after {
        /* 直接定位會使元素被當行內塊 */
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -150px;
        content: '';
        width: 300px;
        height: 300px;
        background-image: url(./p019image/play.png);
        transform: scale(15);
        opacity: 0;
        transition: all 0.5s;
      }
      .box li:hover .pic::after {
        opacity: 1;
        transform: scale(1);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          <div class="pic">
            <img src="./p019image/gura.jpg" alt="" />
            <!-- 偽元素添加播放按鈕 -->
          </div>
          <p>我是標題</p>
        </li>
      </ul>
    </div>
  </body>
</html>
```
## 漸變
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        height: 200px;
        background-color: pink;
        /* background-image: linear-gradient(pink, green, blue); */
        /* 半透明漸變 */
        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
```
### 漸變案例
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        position: relative;
        width: 1280px;
        height: 720px;
      }
      .box img {
        width: 1280px;
      }
      .box .title {
        position: absolute;
        left: 230px;
        bottom: 100px;
        z-index: 2;
        width: 800px;
        color: white;
        font-size: 200px;
        font-weight: 700;
      }
      .box .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 1280px;
        height: 720px;
        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
        opacity: 0;
        transition: all 0.5s;
      }
      .box:hover .mask {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./p022image/gura.jpg" alt="" />
      <div class="title">鯊鯊大好</div>
      <div class="mask"></div>
    </div>
  </body>
</html>
```
## 綜合案例
```html=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./p023image/p023.css" />
    <link rel="stylesheet" href="./icofont/icofont.css" />
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          <a href="#">
            <div class="pic"><img src="./p023image/city.jpg" alt="" /></div>
            <div class="txt">
              <h4>新聞</h4>
              <h5>上海封城啦上海封城啦上海封城啦</h5>
              <p><span>了解更多</span><i class="icofont-tick-boxed"></i></p>
            </div>
            <!-- 加漸變背景盒子 -->
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./p023image/xi.jpg" alt="" /></div>
            <div class="txt">
              <h4>領導人</h4>
              <h5>習近平小熊維尼習近平小熊維尼</h5>
              <p><span>了解更多</span><i class="icofont-tick-boxed"></i></p>
            </div>
            <!-- 加漸變背景盒子 -->
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./p023image/64.jpg" alt="" /></div>
            <div class="txt">
              <h4>國際大事</h4>
              <h5>六四天安門事件六四天安門事件</h5>
              <p><span>了解更多</span><i class="icofont-tick-boxed"></i></p>
            </div>
            <!-- 加漸變背景盒子 -->
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>
```
```css=
/* 全局樣式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: white;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  width: 100%;
  vertical-align: middle;
}
/* 全局樣式 */
.box {
  width: 1300px;
  height: 300px;
  margin: 20px auto;
  /* background-color: pink; */
}
.box li {
  position: relative;
  float: left;
  width: 400px;
  height: 300px;
  margin-right: 30px;
  overflow: hidden;
}
.box li:last-child {
  margin-right: 0;
}
.box .txt {
  position: absolute;
  left: 0;
  bottom: -70px;
  width: 400px;
  height: auto;
  padding: 20px 30px;
  z-index: 1;
  color: white;
  transition: transform 0.5s;
}
.box .txt h4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 2em;
  color: white;
}
.box .txt h5{
    font-size: 20px;
    line-height: 40px;
}
.box .txt p {
  color: white;
  font-size: 14px;
  line-height: 5em;
}
.box .txt p .icofont-tick-boxed {
  color: red;
  vertical-align: middle;
  font-size: 20px;
  font-weight: 700;
}
/* 漸變背景 */
.box li a::after {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  width: 400px;
  height: 300px;
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  opacity: 0;
  transition: all 0.5s;
}
.box li:hover a::after {
  opacity: 1;
}
/* 漸變背景 */
/* 圖片縮放 */
.box li .pic img {
  transition: all 0.5s;
}
.box li:hover .pic img {
  transform: scale(1.2);
}
/* 圖片縮放 */
/* 文字效果 */
.box li :hover .txt{
    transform: translateY(-50px);
}
```