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

最新推荐文章于 2025-05-14 16:00:00 发布

￥诸葛村夫￥

最新推荐文章于 2025-05-14 16:00:00 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签： Transition transform CSS opacity

本文链接：https://blog.csdn.net/qq_33322074/article/details/79684254

前端学习笔记专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个使用CSS实现的动画案例，包括平移和旋转动画效果。通过伪类、transform、transition及opacity等样式属性，实现了图片及其说明文字的动态展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;/*过度旋转*/
}