CSS3 新特性
過渡transition
transition: 過渡的屬性 過渡的時間 過渡的型別 延遲時間;
如：
transition：all 2s linear 2s;
transition：width 2s ease-in-out 2s,height .2s ease 3s;
變形transform
transform:
平移: translate(X軸,Y軸)
縮放: scale(2,-2) --- 正數：預設是1 負數：先翻轉，再縮放相應倍數
傾斜（扭曲）: skew(45deg,45deg) 單位deg（度）
旋轉: rotate(360deg)
縮放設定基準：transform-origin：left |center| right | % | px top | middle | bottom | % | px;
動畫animation
animation: 動畫規則的名稱 動畫執行的時間 動畫的型別 延遲時間 動畫執行的次數 執行動畫結束後是否停止在結束的位置 動畫反向執行;
如：
animation: mymove(動畫規則的名稱) 4s linear 2s 2(執行次數|infinite) forwards(在動畫結束位置停止) alternate(反向執行);
自定義規則如下2種方式：
方式1：
@Keyframes mymove{
from{
}
to{
}
}
方式2:
@Keyframes mymove{
10%{
}
40%,60%{
}
100%{
}
}
過渡的練習案例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3的過渡</title>
<style type="text/css">
.box-main{
width: 400px;
height: 400px;
background-color: #CCCCCC;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*display: none;*/
/*在我們的過渡效果中儘量避免使用display
*/
visibility: hidden;
opacity: 0;
}
.box-main:hover .box{
/*過渡效果:
* 過渡屬性 過渡的時間 過渡效果的型別 延遲時間s
*/
transition: opacity 3s ease-in-out 1s,width 3s ease-in-out 1s;
/*display: block;*/
visibility: visible;
opacity: 1;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box-main">
<div class="box">
</div>
</div>
</body>
</html>
變形的練習案例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>變形</title>
<style type="text/css">
div{
margin: 5px auto;
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 28px;
color: white;
font-weight: bold;
transition: all 2s linear;
}
.box-one{
background-color: blue;
}
.box-one:hover{
/*變形：transform()
*X軸偏移量
*Y軸偏移量
*/
transform: translate(40px,0px);
}
.box-two{
background-color: yellow;
}
.box-two:hover{
/*縮放
*負數：先翻轉，再進行縮放。
*/
transform: scale(-2,1);
/*設定基準*/
transform-origin: left top;
}
.box-three{
background-color: pink;
}
.box-three:hover{
/*傾斜*/
transform: skew(45deg,180deg);
transform-origin: 100px 100px;
}
.box-four{
/*border-radius: 50%;*/
background-color: orangered;
}
.box-four:hover{
/*旋轉*/
transform: rotate(720deg);
}
.box-total{
background-color: gold;
}
.box-total:hover{
transform: skew(45deg,180deg) translate(40px,0px) scale(-2,1) rotate(720deg);
}
</style>
</head>
<body>
<!-- 平移 -->
<div class="box-one">
平移
</div>
<!-- 縮放 -->
<div class="box-two">
縮放
</div>
<!-- 傾斜 -->
<div class="box-three">
傾斜
</div>
<!-- 旋轉 -->
<div class="box-four">
旋轉
</div>
<!--整合-->
<div class="box-total">
整合
</div>
</body>
</html>
動畫的練習案例程式碼（輪播效果）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
section{
height: 273px;
/*background-color: #efefef;*/
}
.container{
width: 570px;
height: 273px;
margin: 0 auto;
/*超出隱藏*/
overflow: hidden;
/*定位*/
position: relative;
}
.scroll{
width: 2280px;
height: 273px;
font-size: 0;
/*position: relative;*/
/*加動畫*/
animation: my-scroll 10s linear infinite;
}
.scroll:hover{
animation-play-state: paused;
cursor: pointer;
}
/*切換輪播圖的規則*/
@-webkit-keyframes my-scroll{
0%,20%{
margin-left: 0px;
}
25%,45%{
margin-left: -570px;
}
50%,75%{
margin-left: -1140px;
}
80%,100%{
margin-left: -1710px;
}
}
span:nth-child(1){
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid yellow;
display: inline-block;
border-radius: 50%;
text-align: center;
color: white;
font-weight: bold;
background-color: gold;
position: absolute;
left: 280px;
top: 230px;
}
span:nth-child(1):hover{
background-color: green;
border: 1px solid green;
cursor: pointer;
animation-play-state: running;
}
span:nth-child(1):hover ~.scroll{
/*定義動畫*/
animation: one 2s linear;
}
/*切換第一章的規則*/
@-webkit-keyframes one{
0%,10%{
margin-left: 0px;
}
90%,100%{
margin-left: 0px;
}
}
span:nth-child(2){
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid yellow;
display: inline-block;
border-radius: 50%;
text-align: center;
color: white;
font-weight: bold;
background-color: gold;
position: absolute;
left: 320px;
top: 230px;
}
span:nth-child(2):hover{
background-color: green;
border: 1px solid green;
cursor: pointer;
animation-play-state: running;
}
span:nth-child(2):hover ~.scroll{
/*定義動畫*/
animation: two 2s linear;
}
/*切換第一章的規則*/
@-webkit-keyframes two{
0%,10%{
margin-left: -570px;
}
90%,100%{
margin-left: -570px;
}
}
span:nth-child(3){
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid yellow;
display: inline-block;
border-radius: 50%;
text-align: center;
color: white;
font-weight: bold;
background-color: gold;
position: absolute;
left: 360px;
top: 230px;
}
span:nth-child(3):hover{
background-color: green;
border: 1px solid green;
cursor: pointer;
animation-play-state: running;
}
span:nth-child(3):hover ~.scroll{
/*定義動畫*/
animation: three 2s linear;
}
/*切換第一章的規則*/
@-webkit-keyframes three{
0%,10%{
margin-left: -1140px;
}
90%,100%{
margin-left: -1140px;
}
}
span:nth-child(4){
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid yellow;
display: inline-block;
border-radius: 50%;
text-align: center;
color: white;
font-weight: bold;
background-color: gold;
position: absolute;
left: 400px;
top: 230px;
}
span:nth-child(4):hover{
background-color: green;
border: 1px solid green;
cursor: pointer;
}
span:nth-child(4):hover ~.scroll{
/*定義動畫*/
animation: four 2s linear;
}
/*切換第一章的規則*/
@-webkit-keyframes four{
0%,10%{
margin-left: -1710px;
}
90%,100%{
margin-left: -1710px;
}
}
</style>
</head>
<body>
<section>
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<!--設定放4張圖片的div(width | height)-->
<div class="scroll">
<img src="img/one.jpg" alt="" />
<img src="img/two.jpg" alt="" />
<img src="img/three.jpg" alt="" />
<img src="img/four.jpg" alt="" />
</div>
</div>
</section>
</body>
</html>