---
tags: CSS,mobile,第一章
---
# CSS mobile 第一章
## 字體圖標
### 網站
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>
```
## 旋轉
```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>
```
### 轉換原點
```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>
```
## 縮放
```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);
}
```
Sign in with Wallet
Connect another wallet