動畫製作案例：斜切和縮放用到斜切Skew() 和縮放scale()兩個CSS元素
阿新 • • 發佈：2019-02-08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動畫製作之平移案例</title>
<!--學習四個樣式
1、偽類：nth-of-type(n)
2、transform的四種樣式使用
3、transition樣式的使用
4、opacity樣式（設定透明度）
-->
<link rel="stylesheet" href="CSS/style2.css" />
</head>
<body>
<div class="box pingyi">
<img src="image/meiren.jpg" alt="" />
<div class="wenzi">
<h4>平移動畫</h4>
<p>文字說明1</p>
<p>文字說明2</p>
<p>文字說明3</p>
</div>
</div>
<!--------------------------旋轉動畫盒子------------------------>
<div class="box xuanzhuan">
<img src="image/meiren2.jpg" alt="" />
<div class="wenzi">
<h4>旋轉動畫</h4>
<p>文字說明1</p>
<div class="kuang"></div>
</div>
</div>
<!--------------------------斜切動畫盒子------------------------>
<div class="box xieqie">
<img src="image/miaomiao.jpg" alt="" />
<div class="wenzi">
<h4>斜切動畫</h4>
<p>文字說明1</p>
</div>
</div>
<div class="box suofang">
<img src="image/yumen.jpg" alt="" />
<div class="wenzi">
<h4>縮放動畫</h4>
<p>文字說明1</p>
<div class="kuang"></div>
</div>
</div>
</body>
</html>
====================================CSS程式碼==================
@charset "utf-8";
/*初始化樣式*/
*{
padding: 0;
margin: 0;
}
/**號包含div,body等所有公共樣式*/
.box{
width: 33%;
height: 300px;
overflow: hidden;/*溢位隱藏*/
position: relative;
float: left;
}
.wenzi{
position: absolute;
top: 0;
left: 0;
}
.pingyi{
background-color: #130700;
}
.pingyi .wenzi{
padding: 20px;
color: #fff;
}
.pingyi .wenzi p{
color: #666;
background-color: #fff;
margin-top: 5px;/*外邊距5px*/
transform: translate(-300px);/*向左平移300px*/
}
.box:hover img{
opacity: 0.7;/*設定透明度*/
transition: all 2s ease-in;/*過度動畫2s ease-in儘快出來*/
}
.pingyi:hover .wenzi p{
transform: translate(0);/*取消平移*/
transition: all 2s ease-in;/*過度2s出來*/
}
/*延時出來這個是三個p標籤的出場順序上面那個是過度2s,即出來的過程*/
.pingyi:hover .wenzi p:nth-of-type(1){
transition-delay: 0.1s;/*延時0.1s*/
}
.pingyi:hover .wenzi p:nth-of-type(2){
transition-delay: 0.2s;/*第二個延時0.2s出來*/
}
.pingyi:hover .wenzi p:nth-of-type(3){
transition-delay: 0.3s;
}
.xuanzhuan{
background-color: #0f0000;
}
.xuanzhuan .wenzi{
width: 100%;
height: 100%;
color: #fff;
}
.xuanzhuan .wenzi h4{
margin-top: 15%;
margin-left: 15%;
}
.xuanzhuan .wenzi p{
margin-top: 5px;
margin-left: 15%;/*向右平移15%*/
transform: translate(0,100px);/*x軸不動，y軸向下平移100px*/
opacity: 0;/*完全透明*/
}
.xuanzhuan .wenzi .kuang{
width: 80%;
height: 80%;
border: 2px solid #fff;/*邊框2px 實線 白色*/
position: absolute;
top: 10%;
left: 10%;
transform: translate(0,-300px) rotate(0deg);/*x軸不動，y軸向上平移300px 不旋轉*/
}
.xuanzhuan:hover .kuang{
transform:translate(0,0) rotate(360deg);/*360度旋轉返回*/
transition: all 2s ease-in;/*過度樣式*/
}
.xuanzhuan:hover .wenzi p{
transform: translate(0,0);
opacity: 1;/*1表示能看的見，0表示看不見*/
transition: all 2s ease-in;/*過度旋轉*/
}
.xieqie{
background-color: #000515;
}
.xieqie .wenzi {
top:30%;
left: 15%;
color: #fff;
}
.xieqie .wenzi p{
margin-top: 5px;
transform: skew(90deg);
}
.xieqie .wenzi h4{
transform: skew(90deg);/*斜切90度*/
}
.xieqie:hover .wenzi h4,.xieqie:hover .wenzi p{
transform: skew(0deg); /*skew()斜切樣式*/