今天来说下一个很拉风同时也很实用的css效果,B站同款哦!
下面两张是在小破站截取的效果图:
这个效果称为淡入淡出效果,可以从上下左右淡入淡出,今天直讲一种,其余三种自己可以动手做,效果图:
实现思路:
- 设置一个div包含一个img图片和一个子div。
- 子div包含一个文本div。
- 设置图片上的文字隐藏且居中,overflow为hidden。
- 在子div设置一个hover效果即可
- 最后加上一些动画效果修饰即可
最后附上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>从下至上</title>
<style>
body {
text-align: center;
}
.container {
position: relative;
width: 17%;
margin: auto;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
/* 隐藏文本 */
overflow: hidden;
width: 100%;
height: 0;
/* 设置一个淡入淡出的效果 */
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
/* 设置文本不换行 */
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
/* 设置文字居中 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>淡入效果 - 从下至上</h2>
<p>鼠标移动到图片上查看效果</p>
<div class="container">
<img src="img/1.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
剩余三个方向的淡入淡出效果的代码基本类似