接下来我将详细讲解如何使用纯CSS3实现鼠标经过图片显示描述的动画效果:
Step 1: HTML结构
首先我们需要建立一个基本的HTML结构,包括一个包裹图片和描述文字的div以及对应的图片和描述文字:
<div class="image-box">
<img src="image.jpg" alt="图片">
<div class="text">
<h3>图片标题</h3>
<p>图片描述</p>
</div>
</div>
Step 2: CSS样式
其次,我们需要使用CSS样式对HTML进行布局以及添加动画效果。示例如下:
设置基本样式
.image-box{
position:relative;
display:inline-block;
overflow:hidden;
}
img{
display:block;
width:100%;
}
.text{
position:absolute;
bottom:-100%;
width:100%;
background-color:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
padding:20px;
transition:bottom 0.4s ease-out;
}
设置鼠标经过时的动画效果
.image-box:hover .text{
bottom:0;
}
具体来说,我们将图片设置为display:block
,使其充满父元素,而.text
则设置为position:absolute
并将bottom:-100%
,即完全隐藏。当鼠标悬停到父元素上时,.text
元素的bottom
属性将过渡为0
,使其完全显示。
Step 3: 示例说明
接下来,我将展示两个示例,为你演示如何实现不同的动画效果。
示例1:左右滑动效果
.text{
left:-100%;
transition:left 0.2s ease-in;
}
.image-box:hover .text{
left:0;
}
在这个示例中,我们将.text
元素的left
属性从-100%
过渡到0
,实现类似左右滑动的效果。
示例2:渐变效果
.text{
opacity:0;
transition:opacity 0.3s ease-in;
}
.image-box:hover .text{
opacity:1;
}
在这个示例中,我们将.text
元素的opacity
属性从0
过渡到1
,实现类似渐变的效果。
以上就是使用纯CSS3实现鼠标经过图片显示描述的动画效果的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯css3实现鼠标经过图片显示描述的动画效果 - Python技术站