CSS3 基礎入門03
線性漸變
在
css3當中，通過漸變屬性實現之前只能通過圖片實現的漸變效果。漸變分為線性漸變和徑向漸變以及重復漸變三種。線性漸變的模式主要是顏色從一個方向過渡到另外一個方向，而徑向漸變則是以一個點為基點(圓心)，以點向四周進行漸變。漸變形狀為一個圓，重復漸變則分為重復線性漸變和重復徑向漸變，是對於前面兩種漸變的一種重復模式。
語法：
linear-gradient:point| angle color percentage
point表示方向，angle表示角度。color表示顏色，一般分為起始顏色、過渡顏色和結束顏色。percentage表示百分比，一般表示顏色漸變過程中的百分比。
下面是一個簡單的漸變效果的實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>線性漸變</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-image: linear-gradient(red,yellow);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
通過上面的代碼，我們可以實現顏色從red到yellow的一個漸變效果。但是需要注意的是，通過漸變設置顏色其實相當於設置了background-image也就是背景圖片。當然也可以采用background簡寫屬性來設置漸變。
在上面的代碼中，顏色默認的漸變方向是
從上到下，這一點需要注意。
多個顏色的線性漸變:
我們也可以設置多個顏色的漸變，例如從紅色到藍色再到黃色，可以直接在linear-gradient屬性值當中設置red blue 和yellow.
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>線性漸變</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-image: linear-gradient(red,blue,yellow);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
改變線性漸變方向:
我們可以通過在顏色值的前面添加方向關鍵詞來調整顏色漸變的起始方向。
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>線性漸變</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-image: linear-gradient(to left,red,blue,yellow);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在上面的案例當中，我們在顏色的前面添加了表示方向的關鍵詞to left，表示線性漸變從右到左。
當然我們也可以直接設置為left，但是因為兼容性的問題，我們就必須設置瀏覽器前綴。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>線性漸變</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-image: -webkit-linear-gradient(left,red,blue,yellow);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
當我們將漸變方向關鍵詞變為left，則正好與上面的demo漸變方向相反，表示從左向右。
並不推薦使用這種方式，因為我們還要考慮到兼容性的問題。
其他的方向關鍵詞設置:
我們可以將常用的方向關鍵詞進行組合使用。
to left 從右向左
to right 從左向右
to bottom 從上向下
to top 從下到上
to left top 從右下到左上
to right top 從左下到右上
to left bottom 從右上到左下
to right bottom 從左上到右下
通過角度angle來設置方向：
我們除了通過關鍵詞來設置漸變方向以外，還可以通過具體的角度值來設置漸變方向。
在
css當中，deg表示角度。
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>線性漸變</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-image: linear-gradient(0deg,red,blue);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在上面的例子中，我們將方向值變成了角度值，同樣也可以實現漸變方向的改變。
需要注意的是，角度值為正則方向為順時針的變化,角度值為負則方向為逆時針的變化，下面的demo中，通過JavaScript來查看角度分別為正和負時漸變顏色的變化。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>線性漸變</title>
<style>
#box {
width: 400px;
height: 400px;
background-image: linear-gradient(0deg,red,blue);
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn1">正角度</button>
<button id="btn2">負角度</button>
</body>
<script>
let oBox = document.querySelector("#box");
let oBtn1 = document.querySelector("#btn1");
let oBtn2 = document.querySelector("#btn2");
let num = 0;
oBtn1.onclick = function () {
setInterval(function(){
num = num +1;
box.style.backgroundImage = `linear-gradient(${num}deg,red,blue)`;
},30)
}
oBtn2.onclick = function () {
setInterval(function(){
num = num - 1;
box.style.backgroundImage = `linear-gradient(${num}deg,red,blue)`;
},30)
}
</script>
</html>
在上面的示例代碼中，我們點擊正角度按鈕就可以讓元素按照角度值為正進行變換。點擊負角度按鈕可以讓元素按照角度值為負進行變換。從而證實我們上面所說的問題。
線性漸變百分比的設置：
我們可以給每個顏色后面加上一個百分比，從而讓漸變的過程受到我們的把控。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>線性漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: linear-gradient(red 30%,blue 60%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
我們在上面的代碼中，我們在每個顏色的后面加入了百分比。
上面的代碼的含義是，從0%到30%為純紅色，從30%到60%為紅色到藍色的漸變，而60%到100%則表示純藍色。
根據上面的解釋，如果我們想要在一個盒子形成一半為純紅色，一半為純藍色的背景，該怎么實現呢？
其實非常簡單，只需要讓中間漸變的過程為0即可。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>線性漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: linear-gradient(red 50%,blue 50%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
例如上面的例子，我們將從0%到50%設置為純紅色，從50%到50%設置為紅色到藍色的漸變，從50%到100%設置為純藍色，即可實現我們上面的需求。
盒子當中實現四個顏色平均分配：
我們可以根據上面所學來完成一下小練習，例如，我們希望在一個盒子中存在紅綠藍黃四個顏色，並且並不存在漸變的效果，四個顏色皆為純色並且平均分配，該怎么做呢？
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>線性漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: linear-gradient(red 25%, green 25%,green 50%,blue 50%, blue 75%,yellow 75%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在
漸變中我們不僅僅可以設置百分比來表示顏色變換的過程，也可以設置length具體值。
關於IE的線性漸變:
在IE瀏覽器中，我們可以實現兩個顏色之間的漸變效果，語法格式如下：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
startColorstr表示起始顏色
endColorstr表示結束顏色
GradientType值為1表示從左向右 值為0表示從上向下
徑向漸變
不同於上面我們說的線性漸變，徑向漸變有些類似於放射性的，從點放射到四周。
語法：
background: radial-gradient(center, shape size, start-color, ..., last-color);
雖然上面的語法看上去有些復雜，但是用法上起始與線性漸變很是類似，下面我們來看下具體的使用。
最簡單的徑向漸變:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>徑向漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: radial-gradient(red,yellow);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
上面的代碼將會在box這個元素中形成一個漸變效果，呈現的形狀為一個正圓。圓心開始為紅色，從圓心開始逐漸的向四周過渡。
設置形狀：
徑向漸變的形狀是一個圓，在徑向漸變中，可以設置正圓circle和橢圓ellipse。默認情況下為正圓。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>徑向漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: radial-gradient(ellipse,red,blue);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
設置多個顏色：
在徑向漸變中同樣可以設置多個顏色。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>徑向漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: radial-gradient(red,blue,pink);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
設置徑向漸變的方向:
在徑向漸變中設置漸變方向，需要注意，不能采用to + 方向 這種形式，而是應該直接設置方向關鍵詞，並且添加瀏覽器前綴。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>徑向漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: -webkit-radial-gradient(left,red,blue,pink);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
設置徑向漸變的起始位置:
在徑向漸變中，我們沒有辦法設置具體的角度值，我們可以通過length設置圓心的位置，從而改變徑向漸變的起始位置。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>徑向漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: -webkit-radial-gradient(140px 300px,red,blue,pink);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
設置顏色漸變百分比:
徑向漸變中同樣可以設置顏色漸變的百分比，用以把控漸變的過程。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>徑向漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: -webkit-radial-gradient(red 20%, blue 30%, lightblue 50%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
徑向漸變中顏色百分比的原理和線性漸變相同。
設置徑向漸變的橫向半徑和縱向半徑：
徑向漸變中我們可以設置圓形的坐標，從而實現更改漸變的位置。我們在上面說到，徑向漸變還可以更改徑向漸變的形狀，可以設置為正圓和橢圓。當我們設置圓的形狀時，除了通過關鍵詞，還可以通過具體的length來進行設置。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>徑向漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: -webkit-radial-gradient(100px 100px,200px 300px,red,lightblue);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
100px 100px 表示圓心坐標，200px 300px表示橫半徑和縱半徑。
通過關鍵詞來設置徑向漸變圓的大小：
在徑向漸變中存在幾個關鍵詞，通過這些關鍵詞可以設置徑向漸變圓的大小。
關鍵詞如下:
closest-side：最近邊；
farthest-side：最遠邊；
closest-corner：最近角；
farthest-corner：最遠角
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>徑向漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: -webkit-radial-gradient(100px 100px ,closest-side,blue,lightblue);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
重復漸變
當我們在一個元素中需要將漸變進行重復時，可以使用重復漸變。重復漸變又分為重復線性漸變和重復徑向漸變，用法很簡單，只是在漸變屬性的前面添加repeating即可。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>徑向漸變</title>
<style>
.box {
width: 400px;
height: 400px;
background: -webkit-repeating-radial-gradient(100px 100px ,closest-side,blue,lightblue);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS3 過渡
在css3中，通過過渡，可以讓元素的動畫變化放緩，從而具有更好的觀感效果。
語法：
transition: property duration timing-function delay;
transition為過渡效果的簡寫屬性，這個屬性具體可以拆分為下面幾個屬性：
transition-property 規定應用過度的css屬性名稱
transition-duration 定義過渡效果需要時間
transition-timing-function 規定過渡效果的時間曲線，默認是“ease”
transition-delay 延遲
參與過渡的屬性：
想要具體設置參與過渡的具體屬性，可以通過transition-property,具體的值如下：
transition-property:none | all | property(css屬性名稱，用逗號進行分隔)
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>過渡</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
transition-property: width,height;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
設置過渡時間：
通過transition-duration可以設置過渡所需的時間。單位是 s|ms。
我們可以把上面的代碼繼續完善一下。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>過渡</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
transition-property: width,height;
transition-duration: 2s;
}
.box:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
設置過渡的速度時間曲線：
通過transition-timing-function可以設置過渡效果的時間曲線：
cubic-bezier (n,n,n,n) 貝塞爾曲線
linear 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）
ease 規定慢速開始，然后變快，然后慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))
ease-in 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）
ease-out 慢速結束過渡效果 等於 cubic-bezier(0,0,0.58,1)
ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）
關於`貝塞爾曲線，可以參考下面的網址：http://cubic-bezier.com/#.17,.67,.94,.18
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>過渡</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
transition-property: width,height;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.box:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
設置延遲時間:
在x秒或者x毫秒后執行效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>過渡</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
transition-property: width,height;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
}
.box:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
我們在開發的時候，推薦盡可能的使用簡寫屬性。
給不同的樣式設置不同的執行時間和延遲時間:
我們可以單獨的給不同的樣式分別設置執行時間和延遲時間。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>過渡</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
transition: width 2s 1s,height 2s 2s,background-color 3s 1s;
}
.box:hover {
width: 300px;
height: 300px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS Banner點擊切換
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>banner廣告css代碼實現</title>
<style>
body, figure {
margin: 0;
}
img {
width:100%;
height: 700px;
}
figcaption {
display: block;
font-weight: bold;
padding: 1em 0;
}
.gallery {
position: relative;
}
.gallery > .item {
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.gallery > .item:first-of-type {
position: static;
opacity: 1;
}
.gallery > .controls {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.gallery > .control-operator {
display: none;
}
.gallery .control-button {
display: inline-block;
margin: 0 .02em;
font-size: 3em;
text-align: center;
text-decoration: none;
-webkit-transition: color .1s;
-o-transition: color .1s;
transition: color .1s;
}
.gallery > .control-operator:target ~ .item {
opacity: 0;
}
.gallery > .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
opacity: 1;
}
.gallery > .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
opacity: 1;
}
.gallery > .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
opacity: 1;
}
/* a 按鈕的樣式 */
.gallery .control-button {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
.gallery .control-button:first-of-type {
color: white;
color: rgba(255, 255, 255, 0.8);
}
.gallery .control-button:hover {
color: white;
color: rgba(255, 255, 255, 0.8);
}
.gallery .control-operator:target ~ .controls .control-button {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
.gallery .control-operator:target ~ .controls .control-button:hover {
color: white;
color: rgba(255, 255, 255, .8);
}
/* 被選中時 設置<a>.</a>顏色為 rgba(255,255,255,.8) */
.gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3) {
color: white;
color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<div class="gallery">
<!--control-operator 用來控制，不顯示-->
<div id="gallery-1" class="control-operator"></div>
<div id="gallery-2" class="control-operator"></div>
<div id="gallery-3" class="control-operator"></div>
<figure class="item">
<figcaption>壁紙1</figcaption>
<img src="./images/b1.jpg" alt="">
</figure>
<figure class="item">
<figcaption>壁紙2</figcaption>
<img src="./images/b2.jpg" alt="">
</figure>
<figure class="item">
<figcaption>壁紙3</figcaption>
<img src="./images/b3.jpg" alt="">
</figure>
<div class="controls">
<a href="#gallery-1" class="control-button">○</a>
<a href="#gallery-2" class="control-button">○</a>
<a href="#gallery-3" class="control-button">○</a>
</div>
</div>
</body>
</html>
CSS3 2D
css3中新增加了2D效果和3D效果，我們可以通過相關的屬性設置從而實現很多之前只能通過JavaScript實現的效果。
相關屬性:
transform 2D /3D 轉換屬性
transform-origin 更改元素旋轉基點
2D變換方法:
translate(x,y) 沿着x y 移動元素/ translateX(n) translateY(n)
scale(x,y) 縮放 更改元素的寬度和高度 ,將寬度改為原來的x倍，高度改為原來的y倍 / scaleX(n) 更改寬度 scaleY(n) 更改高度
rotate(angle) 旋轉
skew(x-angle,y-angle) 定義2D 傾斜轉換 沿着x軸和y軸 / skewX(angle) 沿着x軸轉換 skewY(angle) 沿着y軸
2D效果主要針對的是頁面當中的x軸和y軸進行的一系列的元素變化。
位移：
通過translate屬性可以讓元素沿着x軸和y軸進行位移。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2d</title>
<style>
.box {
width: 500px;
height: 500px;
border:1px solid red;
margin:200px auto;
}
.test {
width: 100px;
height: 100px;
background-color: lightblue;
transition: 1s;
}
.box:hover .test {
transform: translate(300px,100px);
}
</style>
</head>
<body>
<div class="box">
<div class="test"></div>
</div>
</body>
</html>
縮放：
通過scale屬性可以對元素進行縮放操作。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2d</title>
<style>
.box {
width: 500px;
height: 500px;
border:1px solid red;
margin:200px auto;
}
.test {
width: 100px;
height: 100px;
background-color: lightblue;
transition: 1s;
}
.box:hover .test {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box">
<div class="test"></div>
</div>
</body>
</html>
需要注意的是，縮放的值為寬度或者高度的倍數。
旋轉:
通過rotate屬性可以讓元素進行旋轉。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2d</title>
<style>
.box {
width: 500px;
height: 500px;
border:1px solid red;
margin:200px auto;
}
.test {
width: 100px;
height: 100px;
background-color: lightblue;
transition: 1s;
}
.box:hover .test {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="test"></div>
</div>
</body>
</html>
如果更改元素的旋轉基點，元素的旋轉位置將會發生變化。
傾斜:
通過skew可以讓元素沿着x軸或者y軸進行傾斜。
skew語法有些特殊：
transform:skew(<angle> [,<angle>]);
包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜。
skewX(<angle>);表示只在X軸(水平方向)傾斜。
skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main {
width: 500px;
height: 500px;
border:3px solid red;
margin:100px auto;
padding:30px;
}
.box,.son {
width: 300px;
height: 300px;
}
.box {
border:1px solid blue;
}
.son {
border:1px solid lightblue;
transform: skew(30deg);
}
</style>
</head>
<body>
<div class="main">
<div class="box">
<div class="son"></div>
</div>
</div>
</body>
</html>
形成效果如下：
下面是傾斜Y軸：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main {
width: 500px;
height: 500px;
border:3px solid red;
margin:100px auto;
padding:30px;
}
.box,.son {
width: 300px;
height: 300px;
}
.box {
border:1px solid blue;
}
.son {
border:1px solid lightblue;
transform: skewY(30deg);
}
</style>
</head>
<body>
<div class="main">
<div class="box">
<div class="son"></div>
</div>
</div>
</body>
</html>
基點的改變對於元素變幻的影響：
通過transform-origin可以更改元素的基點，元素的基點一旦發生更改之后，就會產生不一樣的效果。
例如，旋轉roate，默認基點是元素的正中心，但是一旦改變基點之后旋轉就會發生改變。
demo:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 500px;
height: 500px;
border:1px solid red;
margin:100px auto;
}
.test {
width: 100px;
height: 100px;
background-color: lightblue;
transition: 1s;
transform-origin: left top;
}
.box:hover .test {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="test"></div>
</div>
</body>
</html>
圖片切換:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
width: 300px;
height: 300px;
}
.t_image {
transition: all 1s ease-in-out;
cursor: pointer;
}
.t_image_top {
position: absolute;
transform: scale(0,0);
}
.img_box:hover .t_image_top {
transform: scale(1,1);
transform-origin: top right;
}
.img_box:hover .t_image_bottom {
transform: scale(0,0);
transform-origin:bottom left;
}
</style>
</head>
<body>
<div class="img_box">
<img src="photo3.jpg" alt="" class="t_image t_image_top">
<img src="photo4.jpg" alt="" class="t_image t_image_bottom">
</div>
</body>
</html>
Banner圖切換:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>banner</title>
<style>
#content {
width: 800px;
margin:30px auto;
position: relative;
}
input[type="radio"]{
display: none;
}
input[type="radio"]~img {
width: 800px;
height: 500px;
position: absolute;
top:0;
left:0;
opacity: 0;
transform: scale(1.1);
transition: all 1s ;
}
input:checked + label + img {
opacity: 1;
transform: scale(1.0);
}
input:checked + label img {
border: 8px solid lightblue;
opacity: 1.0;
transition: all 1s;
}
label {
display: inline-block;
width: 134px;
margin:5px 8px;
}
label img {
opacity: 0.5;
width:134px;
height: 75px;
margin-top:500px;
border:8px solid #ccc;
}
</style>
</head>
<body>
<div id="content">
<input type="radio" name="carousel" id="list1" checked>
<label for="list1">
<img src="./images/photo1.jpg" alt="">
</label>
<img src="./images/photo1.jpg" alt="">
<input type="radio" name="carousel" id="list2" >
<label for="list2">
<!--小圖片-->
<img src="./images/photo2.jpg" alt="">
</label>
<!--大圖片-->
<img src="./images/photo2.jpg" alt="">
<input type="radio" name="carousel" id="list3" >
<label for="list3">
<img src="./images/photo3.jpg" alt="">
</label>
<img src="./images/photo3.jpg" alt="">
<input type="radio" name="carousel" id="list4" >
<label for="list4">
<img src="./images/photo4.jpg" alt="">
</label>
<img src="./images/photo4.jpg" alt="">
<input type="radio" name="carousel" id="list5" >
<label for="list5">
<img src="./images/photo5.jpg" alt="">
</label>
<img src="./images/photo5.jpg" alt="">
</div>
</body>
</html>
CSS3 3D
相關屬性:
transform 2d/3d轉換
transform-origin 更改基點
transform-style 開啟3D空間
perspective 視距
perspective-origin 景深基點
backface-visibibility 背面隱藏
3D變換方法:
translate3d(x,y,z) / translateX translateY translateZ
scale3d(x,y,z) / scaleX scaleY scaleZ
rotate3d(x,y,angle) / rotateX(angle) rotateY(angle) rotateZ(angle)
關於Z軸：
在2D中，我們說，網頁的變換主要圍繞x軸和y軸，而到了CSS3 3D,則相對於之前，多了一個Z軸。
Z軸表示垂直於網頁的一個坐標軸，通過Z軸，能夠構建網頁當中的3D效果。
視距:
觀察者沿着平行於Z軸的視線與屏幕之間的距離即為視距的距離，簡稱視距。
視距要設置在父元素的身上，才會有效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section {
width: 400px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
/*一定要設置在父元素的身上*/
perspective: 300px;
}
div {
width: 100px;
height: 100px;
background-color: lightblue;
transition: 1s;
}
section:hover div {
transform: rotateX(45deg);
}
</style>
</head>
<body>
<section>
<div></div>
</section>
</body>
</html>
開啟3D空間:
正常情況下，我們是沒有辦法創建3D空間的，我們需要通過屬性transform-style屬性來開啟3D空間。
transform-style: flat|preserve-3d;
當屬性等於preserve-3d時，即可開啟3D空間 。
例如下面的案例，在開啟3D空間和不開啟3D空間完全是兩個效果。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section {
width: 600px;
height: 400px;
border: 2px solid lightcoral;
margin: 200px auto;
background-color: lightblue;
/*關閉3d空間*/
/*transform-style: preserve-3d;*/
perspective: 400px;
transition: 2s;
}
section div {
width: 100px;
height: 100px;
background-color: lightgreen;
transition: 2s;
}
section:hover {
transform:rotateY(85deg);
}
section:hover div {
transform: translateZ(100px);
}
</style>
</head>
<body>
<section>
<div></div>
</section>
</body>
</html>
效果如下:
而如果開啟了3d空間，效果如下:
關於Z軸的操作:
在上面的案例中，我們使用了一個屬性，translateZ()表示元素在Z軸上的距離。而除了translateZ以外，還有rotateZ() ，用來表示元素在Z軸上的旋轉。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section {
width: 600px;
height: 400px;
border: 2px solid lightcoral;
margin: 200px auto;
background-color: lightblue;
/*關閉3d空間*/
transform-style: preserve-3d;
perspective: 400px;
transition: 5s;
}
section div {
width: 100px;
height: 100px;
background-color: lightgreen;
transition: 2s;
}
section:hover {
transform:rotateY(85deg);
}
section:hover div {
transform: translateZ(100px) rotateZ(1800deg);
}
</style>
</head>
<body>
<section>
<div></div>
</section>
</body>
</html>
scaleZ()表示元素在Z軸上的放大比例。需要注意的是單獨使用可能沒有效果，需要搭配其他屬性一起使用。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.stage {
width: 300px;
height: 300px;
float: left;
margin:15px;
position: relative;
background: url("./img/bg.jpg") repeat center center;
perspective: 1200px;
}
.container {
position: absolute;
top:20%;
left:50%;
transform-style: preserve-3d;
}
.container img {
position: absolute;
margin-left:-70px;
margin-right:-100px;
}
.container img:nth-child(1) {
z-index:1;
opacity: .6;
}
.s1 img:nth-child(2) {
z-index: 2;
transform: scaleZ(5) rotateX(45deg);
}
.s2 img:nth-child(2) {
z-index: 2;
transform: scaleZ(0.25) rotateX(45deg);
}
</style>
</head>
<body>
<div class="stage s1">
<div class="container">
<img src="./img/k2.png" alt="" width="140" height="200">
<img src="./img/k2.png" alt="" width="140" height="200">
</div>
</div>
<div class="stage s2">
<div class="container">
<img src="./img/k2.png" alt="" width="140" height="200">
<img src="./img/k2.png" alt="" width="140" height="200">
</div>
</div>
</body>
</html>
translate3d、roate3d、scale3d
1、rotate3d
rotate3d(x,y,z,a)
x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉。
2、scale3d()
CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數，當scale3d()中X軸和Y軸同時為1，即scale3d(1,1,sz)，其效果等同於scaleZ(sz)。通過使用3D縮放函數，可以讓元素在Z軸上按比例縮放。默認值為１，當值大於１時，元素放大，反之小於１大於0.01時，元素縮小。
scale3d(sx,sy,sz)
sx：橫向縮放比例；
sy：縱向縮放比例；
sz：Z軸縮放比例；
注：scaleZ()和scale3d()函數單獨使用時沒有任何效果，需要配合其他的變形函數一起使用才會有效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section {
width: 400px;
height: 400px;
border: 2px solid lightseagreen;
perspective: 300px;
transform-style: preserve-3d;
}
div {
width: 100px;
height: 100px;
background-color: lime;
transition: 8s;
}
section:hover div {
transform:rotateX(720deg) scale3d(1.2,2.1,3);
}
</style>
</head>
<body>
<section>
<div></div>
</section>
</body>
</html>
3、translate3d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.stage {
width: 300px;
height: 300px;
float: left;
margin:15px;
position: relative;
background: url("./img/bg.jpg") repeat center center;
perspective: 1200px;
}
.container {
position: absolute;
top:20%;
left:50%;
transform-style: preserve-3d;
}
.container img {
position: absolute;
margin-left:-70px;
margin-right:-100px;
}
.container img:nth-child(1) {
z-index:1;
opacity: .6;
}
.s1 img:nth-child(2) {
z-index:2;
transform:translate3d(30px,30px,200px);
}
.s2 img:nth-child(2) {
z-index: 2;
transform: translate3d(30px,30px,-200px);
}
</style>
</head>
<body>
<div class="stage s1">
<div class="container">
<img src="./img/k2.png" alt="" width="70" height="100">
<img src="./img/k2.png" alt="" width="70" height="100">
</div>
</div>
<div class="stage s2">
<div class="container">
<img src="./img/k2.png" alt="" width="70" height="100">
<img src="./img/k2.png" alt="" width="70" height="100">
</div>
</div>
</body>
</html>
正方體:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>正方體</title>
<style>
* {
margin:0;
padding:0;
}
ul,li{list-style: none;}
ul {
width: 200px;
height: 200px;
margin:100px auto;
position: relative;
transition: 6s;
transform-style: preserve-3d;
}
ul li {
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
color:white;
font-size:40px;
position: absolute;
}
ul li:nth-child(1) {
transform:rotateX(0deg) translateZ(100px);
background: rgba(255,0,0,.6);
}
ul li:nth-child(2) {
transform:rotateX(-90deg) translateZ(100px);
background: rgba(0,255,0,.6);
}
ul li:nth-child(3) {
transform:rotateX(-180deg) translateZ(100px);
background: rgba(0,0,255,.6);
}
ul li:nth-child(4) {
transform:rotateX(-270deg) translateZ(100px);
background: rgba(0,255,255,.6);
}
ul li:nth-child(5) {
transform:rotateY(90deg) translateZ(100px);
background: rgba(255,0,255,.6);
}
ul li:nth-child(6) {
transform:rotateY(-90deg) translateZ(100px);
background: rgba(23,0,23,.6);
}
ul:hover {
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<ul>
<li>第一個盒子</li>
<li>第二個盒子</li>
<li>第三個盒子</li>
<li>第四個盒子</li>
<li>第五個盒子</li>
<li>第六個盒子</li>
</ul>
</body>
</html>
CSS3 動畫
通過animation動畫屬性，css可以實現非常實用的動畫效果。
相關屬性:
Animation是一個簡寫屬性，包含以下內容：
1、Animation-name 調用關鍵幀
2、Animation-duration 設置完成時間
3、Animation-timing-function 動畫的速度曲線
4、Animation –delay 延遲
5、Animation-iteration-count 動畫應該播放的次數
N 設置播放次數 infinite 無限次播放
6、Animation-direction 規定是否該輪流反向播放動畫
Normal alternate 動畫應該輪流反向播放
7、Animation-play-state 暫停/運行
Paused 暫停
Running 運行
8、Animation-fill-mode 規定動畫在播放之前或者之后，其動畫效果是否可見
None 不改變默認
Forwards 當動畫完成后保持最后一個屬性值
Backwards 在Animation –delay指定的一段時間之內，在動畫顯示之前，應用開始屬性值。
Both 向前和向后填充模式都被應用。
簡寫語法:
Animation: name duration timing-function delay iteration -count direction
關鍵幀:
@keyframes name {
0% {code ...}
10% {code ...}
20% {code ...}
}
也可以通過from和to來設置:
@keyframes name {
from {}
to {}
}
心跳:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Red Heart</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #ffa5a5;
background: linear-gradient(to bottom, #ffa5a5 0%,#ffd3d3 100%);
}
.chest {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}
.heart {
position: absolute;
z-index: 2;
background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
animation: beat 0.7s ease 0s infinite normal;
}
.heart.center {
background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%);
}
.heart.top {
z-index: 3;
}
.side {
top: 100px;
width: 220px;
height: 220px;
border-radius: 220px;
}
.center {
width: 210px;
height: 210px;
bottom: 100px;
left: 145px;
font-size: 0;
text-indent: -9999px;
}
.left {
left: 62px;
}
.right {
right: 62px;
}
@keyframes beat {
0% {
transform: scale(1) rotate(225deg);
box-shadow:0 0 40px #d5093c;
}
50% {
transform: scale(1.1) rotate(225deg);
box-shadow:0 0 70px #d5093c;
}
100% {
transform: scale(1) rotate(225deg);
box-shadow:0 0 40px #d5093c;
}
}
</style>
</head>
<body>
<div class="chest">
<div class="heart left side top"></div>
<div class="heart center">♥</div>
<div class="heart right side"></div>
</div>
</body>
</html>
animate 動畫庫
通過animate動畫庫可以實現一些動畫效果。
網址:https://daneden.github.io/animate.css/
使用方法:
在代碼中引入animate.css，並且將相應的類名設置給不同的元素。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>執行</title>
<link rel="stylesheet" href="animate.css">
<style>
.box {
width: 500px;
margin:200px auto;
}
</style>
</head>
<body>
<div class="animated jello box">
昨天我碰到一個帥哥，長相驚人，貌比潘安，憑顏值可以征服全世界的那種
<br>，我們兩個默默對視了很長時間，終於，我離開了他的視線，放下了鏡子。
</div>
</body>
</html>
可以通過下面的代碼來查看不同的效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫</title>
<link rel="stylesheet" href="animate.css">
<style>
* {
margin:0;
padding:0;
}
.box {
width: 400px;
height: 400px;
border:1px solid lightcyan;
background-color: lightblue;
margin:120px auto;
font-size: 50px;
line-height: 400px;
text-align: center;
}
p {
width: 440px;
height: 100px;
position: absolute;
top: 0;
left: 500px;
font-size:30px;
}
label {
display: block;
}
input {
width: 98%;
height: 50px;
font-size:30px;
}
button {
width: 200px;
height: 50px;
font-weight: bold;
position: fixed;
bottom:120px;
left: 620px;
}
</style>
</head>
<body>
<div class="box">
<div class="animated test">hello,world!</div>
</div>
<p>
<label for="list">
請輸入動畫效果名稱:
</label>
<input type="text" placeholder="動畫名稱" id="list" >
</p>
<button onclick="fn1()">執行動畫</button>
</body>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script>
let fn1 = ()=> {
let oInput = $('#list').val();
$(".test").addClass(oInput).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend',function(){
$('.test').removeClass(oInput);
});
}
</script>
</html>