Day22 切版笔记- 互动图文卡片

运用到的观念:

利用vertical-align: middle;调整图片预设多余的空间
使用position:absolute;绝对定位和相对定位position:relative;来排版
opacity透明度搭配:hover伪类来产生文字互动效果
::after伪元素搭配:hover伪类来产生互动效果
使用transition产生渐变的动画效果
background-color 使用rgba的设定方式

HTML 架构

先做一个wrap区块
wrap里面会有四个item区块
每个item区块内有图片和文字
item内的文字内容用一个txt区块包起来

 <div class="wrap">
     <div class="item">
        <img src="https://picsum.photos/500/400?random=10" alt="">
        <div class="txt">
            <h2>金鱼都能懂得这个网页画面怎麽切:互动图文卡片</h2>
            <p>互动图文卡片是我们在网页中经常见到的另一种稀饭版，不会切你就逊掉罗。</p>
        </div>
     </div>
     <div class="item">
        <img src="https://picsum.photos/500/400?random=5" alt="">
        <div class="txt">
            <h2>每天都要打开VS Code刻意练习!</h2>
            <p>一旦假设某件事情是天生的，等於告诉自己对此束手无策</p>
        </div>
     </div>
     <div class="item">
        <img src="https://picsum.photos/500/400?random=20" alt="">
        <div class="txt">
            <h2>学过的观念没弄清楚，切版就切不好</h2>
            <p>你不需要很厉害才能开始，但你需要开始才会很厉害</p>
        </div>
     </div>
     <div class="item">
        <img src="https://picsum.photos/500/400?random=30" alt="">
        <div class="txt">
            <h2>比过去的自己更好，就很好了</h2>
            <p>做自己，其他人都已经有人做了</p>
        </div>
     </div>
 </div>

CSS 架构

设定css reset
将各个区块宽度设定好

*{
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap{
  width:100%; 
}

.item{
  width:25%;
}

.item img{
  width:100%; 
}

图片有预设向下2~3px的margin, 设定vertical-align: middle; 来调整
参考资料:HTML 5 strange img always adds 3px margin at bottom

调整前

.item img{
  width:100%; 
  vertical-align: middle;
}

调整後

使用绝对定位将文字内容(txt)定在父层(item)
再新增padding让文字内缩
将背景色彩设呈半透明黑色


.item{
  width:25%;
  position:relative;
}

.item .txt{
  position: absolute;  
  top:0; 
  right:0; 
  bottom:0;
  left: 0;
  padding:20px;
  background-color:rgba(0,0,0,.6); 
}

设定文字内容大小和色彩

.item h2{
  font-size: 24px;
  color:#ff0;
}
.item p{
  font-size: 18px;
  color:#fff; 
}

设定文字内容排列的方式
display: flex;
flex-direction: column;
justify-content: center;

.item .txt{
  position: absolute;  
  top:0; 
  right:0; 
  bottom:0;
  left: 0;
  padding:20px;
  background-color:rgba(0,0,0,.6); 
  display: flex;
  flex-direction: column;
  justify-content: center;
}

设定字体

插入<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500&display=swap" rel="stylesheet">到head内

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>铁人赛Day22</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles/style.css">
</head>

CSS新增字体font-family: 'Noto Sans TC', sans-serif;
新增font-weight

*{
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Noto Sans TC', sans-serif;
}

.item h2{
  font-size: 24px;
  color:#ff0;
  font-weight: 500;

}
.item p{
  font-size: 18px;
  color:#fff; 
  font-weight: 100;

}

在item父层设定display:flex;，将四个item区块设成从左到右排列

.wrap{
  width:100%; 
  display: flex; 
}

设定文字互动效果
将文字设成透明 opacity: 0;
item区块设定hover
当滑鼠滑到item区块(图片任一位置)时，文字会出现 opacity:1;
文字出现的过程是有渐渐出现的效果transition: opacity .5s;

.item .txt{
  position: absolute;  
  top:0; 
  right:0; 
  bottom:0;
  left: 0;
  padding:20px;
  background-color:rgba(0,0,0,0); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;  
  transition: opacity .5s .3s; 
}

.item:hover .txt{
  opacity:1; 
}

设定滑鼠碰到图片就会渐渐出现文字底线的效果
当滑鼠碰到图片时, 底线宽度width会从0%变成100%
伪元素的预设属性是inline-block,所以必须改成block区块元素才会产生效果
用transition设定渐渐出现的效果

.item h2::after{
  content:'';
  display: block; 
  width:0%;
  height:2px; 
  margin:10px 0; 
  background-color: #ff0;
  transition: width .5s .3s; 
}

.item:hover h2::after{
  width:100%; 
}

CSS完整结构


*{
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Noto Sans TC', sans-serif;
}

.wrap{
  width:100%; 
  display: flex; /*将item区块设成并排*/
}

.item{
  width:25%;
  position:relative; /*使用绝对定位将文字内容定在图片内*/
}

.item img{
  width:100%;
  vertical-align: middle; /*消除图片下方预设的空白区块*/
}

.item h2{
  font-size: 24px;
  color:#ff0;
  font-weight: 500;

}
.item p{
  font-size: 18px;
  color:#fff; 
  font-weight: 100;
} 

.item .txt{
  position: absolute;  /*使用绝对定位将文字内容定在图片内*/
  top:0; 
  right:0; 
  bottom:0;
  left: 0;
  padding:20px;
  background-color:rgba(0,0,0,.6); /*将背景颜色设定成带黑色的透明色*/
  display: flex; 
  flex-direction: column;
  justify-content: center;
  opacity: 0;  /* 文字设为透明*/
  transition: opacity .5s; /*设定渐变效果*/
}

.item:hover .txt{
  opacity:1; /*滑鼠碰到图片时，文字内容从透明变成不透明*/
}

.item h2::after{
  content:''; /*使用伪元素一定要搭配这句才会有效果*/
  display: block; /*伪元素预设是display:inline-block;*/
  width:0%;/*设定一开始宽度是0 */
  height:2px; 
  margin:10px 0; 
  background-color: #ff0;
  transition: width .5s .3s; /*设定渐变效果 跑0.5秒 delay0.3秒*/
}

.item:hover h2::after{
  width:100%;  /*设定碰到item区块才会出现h2底线*/
}

参考资料:金鱼都能懂的网页切版 : 互动图文卡片 NO002 | 切版教学 | HTML教学 | 网页教学 | 网页切版, CSS vertical-align 属性, RGB、HSL、Hex 网页色彩码，看完这篇全懂了

以上为个人学习笔记整理
若有错误，欢迎指正

<<: Day7 甘特图的特性与关键路径

>>: Day08-元件特性