您的位置：首页 > Web前端 > CSS

动画制作之旋转案例：平移transform;过度样式transition;透明度opacity;旋转：rotate(）

2018-03-25 10:16 756 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画制作之平移案例</title>

<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">
<img src="image/miaomiao.jpg" alt="" />
<div class="wenzi">
<h4>平移动画</h4>
<p>文字说明1</p>
</div>
</div>
<div class="box">
<img src="image/yumen.jpg" alt="" />
<div class="wenzi">
<h4>平移动画</h4>
<p>文字说明1</p>
</div>
</div>
</body>
</html>

==========================================================
@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;/*完全透明*/
}
.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;/*完全透明*/
transition: all 2s ease-in;/*过度旋转*/
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Transition transform CSS opacity

相关文章推荐

新的分享

章节导航