更新第45个小实例
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
9dcc3ef095
commit
e82e0405b8
|
|
@ -48,4 +48,5 @@
|
|||
41. HTML5+CSS3小实例之发光文字悬停特效
|
||||
42. HTML5+CSS3小实例之背景不停渐变效果
|
||||
43. HTML5+CSS3小实例之3D轮播卡片
|
||||
44. HTML5+CSS3小实例之炫彩流光圆环加载动画
|
||||
44. HTML5+CSS3小实例之炫彩流光圆环加载动画
|
||||
45. HTML5+CSS3小实例之响应式卡片悬停效果
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(200deg,#80d0c7,#13547a);
|
||||
}
|
||||
.container{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 弹性布局 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 允许换行 */
|
||||
flex-wrap: wrap;
|
||||
padding: 30px;
|
||||
}
|
||||
.container .card{
|
||||
position: relative;
|
||||
max-width: 300px;
|
||||
height: 215px;
|
||||
background-color: #fff;
|
||||
margin: 30px 15px;
|
||||
padding: 20px 15px;
|
||||
border-radius: 5px;
|
||||
/* 阴影 */
|
||||
box-shadow: 0 5px 200px rgba(0,0,0,0.5);
|
||||
/* 动画过渡 */
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
.container .card:hover{
|
||||
height: 420px;
|
||||
}
|
||||
.container .card .img-box{
|
||||
position: relative;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 5px;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
top: -60px;
|
||||
left: 20px;
|
||||
/* 阴影 */
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
.container .card .img-box img{
|
||||
width: 100%;
|
||||
}
|
||||
.container .card .text-box{
|
||||
position: relative;
|
||||
margin-top: -140px;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
color: #111;
|
||||
/* 设置元素不可见 */
|
||||
visibility: hidden;
|
||||
/* 不透明度 */
|
||||
opacity: 0;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
.container .card .text-box p{
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
}
|
||||
.container .card:hover .text-box{
|
||||
/* 鼠标移入，设置元素可见 */
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
margin-top: -40px;
|
||||
/* 动画延迟0.2秒 */
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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="../css/45.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="img-box">
|
||||
<img src="../images/op/1.jpg" alt="">
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<h2>卡片一</h2>
|
||||
<p>我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="img-box">
|
||||
<img src="../images/op/2.jpg" alt="">
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<h2>卡片二</h2>
|
||||
<p>我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="img-box">
|
||||
<img src="../images/op/3.jpg" alt="">
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<h2>卡片三</h2>
|
||||
<p>我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue