新增第179个小实例：悬停放大图片的旅游画廊
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
fc8eb3463b
commit
f585641c09
|
|
@ -185,4 +185,5 @@
|
|||
175. HTML5+CSS3小实例：带功能区的图片悬停特效
|
||||
176. HTML5+CSS3+Vue小实例：输入框打字放大特效
|
||||
177. HTML5+CSS3小实例：悬停带提示的导航栏
|
||||
178. HTML5+CSS3小实例：炫酷的流边按钮
|
||||
178. HTML5+CSS3小实例：炫酷的流边按钮
|
||||
179. HTML5+CSS3小实例：悬停放大图片的旅游画廊
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
height: 100vh;
|
||||
background-color: #1f1f1f;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 弹性布局 */
|
||||
display: flex;
|
||||
}
|
||||
.slide{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 自动放大占满剩余空间 */
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* 过渡效果 */
|
||||
transition: 1s;
|
||||
}
|
||||
.slide .image{
|
||||
width: 140%;
|
||||
height: 140%;
|
||||
/* 绝对定位，默认图片往左移出可视范围 */
|
||||
position: absolute;
|
||||
left: -140%;
|
||||
top: -20%;
|
||||
/* 保持原有尺寸比例，裁切长边 */
|
||||
background-size: cover;
|
||||
/* 定位背景图像为正中间 */
|
||||
background-position: center;
|
||||
/* 过渡 */
|
||||
transition: 1s;
|
||||
/* 执行动画：图片进入动画 时长 线性的 停留在最后一帧 */
|
||||
animation: imgIn 1.2s linear forwards;
|
||||
}
|
||||
/* 遮罩层 */
|
||||
.slide .overlay{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(to bottom,rgba(20,20,20,0.7),transparent);
|
||||
background-size: 100% 200%;
|
||||
background-position: 0 0;
|
||||
opacity: 1;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.slide .content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
/* 黑色标题 */
|
||||
.slide .content h1{
|
||||
color: #3f3f3f;
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 2px #2f2f2f;
|
||||
letter-spacing: 5px;
|
||||
text-indent: 5px;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
/* 默认隐藏 */
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
/* 黄色标题 */
|
||||
.slide .content h1::after{
|
||||
/* 通过attr函数获取元素的data-title属性值 */
|
||||
content: attr(data-title);
|
||||
width: 100%;
|
||||
/* 默认高度为零，隐藏 */
|
||||
height: 0%;
|
||||
color: #fff59d;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
transition: 0.85s;
|
||||
}
|
||||
/* 接下来是鼠标悬停的样式改变 */
|
||||
.slide:hover .image{
|
||||
/* 图片变大 */
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.slide:hover .overlay{
|
||||
/* 降低遮罩层的不透明度 */
|
||||
opacity: 0.4;
|
||||
}
|
||||
.slide:hover .content h1{
|
||||
/* 黑色标题显现并下移 */
|
||||
opacity: 1;
|
||||
transform: translateY(60px);
|
||||
}
|
||||
.slide:hover .content h1::after{
|
||||
/* 黄色标题显现 */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
@keyframes imgIn {
|
||||
to{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>悬停放大图片的旅游画廊</title>
|
||||
<link rel="stylesheet" href="179.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="slide">
|
||||
<div class="image" style="background-image: url(/images/179/1.jpg);"></div>
|
||||
<div class="overlay"></div>
|
||||
<div class="content">
|
||||
<h1 data-title="龙脊梯田">龙脊梯田</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<div class="image" style="background-image: url(/images/179/2.jpg);"></div>
|
||||
<div class="overlay"></div>
|
||||
<div class="content">
|
||||
<h1 data-title="洱海">洱海</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<div class="image" style="background-image: url(/images/179/3.jpg);"></div>
|
||||
<div class="overlay"></div>
|
||||
<div class="content">
|
||||
<h1 data-title="青海湖">青海湖</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<div class="image" style="background-image: url(/images/179/4.jpg);"></div>
|
||||
<div class="overlay"></div>
|
||||
<div class="content">
|
||||
<h1 data-title="呼伦贝尔">呼伦贝尔</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Loading…
Reference in New Issue