金魚都能懂的網頁切版:1、2
背景部分
高度可以自由選擇,100vh為螢幕滿版
利用linear-gradient,設定斜角115deg,色彩和透明各佔50%
.banner{
width: 100%;
height: 100vh;
background-color: #ccc;
background: linear-gradient(115deg, #7bf 50%, transparent 50%) center center /100% 100%
, url('https://picsum.photos/1200/600?random=22') right center / auto 100%;
}
設定固定寬度,並置中
.container{
width: 1200px;
margin: auto;
height: 100%;
}
文字區塊使用flex置中
.banner-text{
padding: 10px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
.banner-text h1{
font-size: 80px;
border-bottom: 1px solid #333;
padding-bottom: 20px;
}
.banner-text small{
display: block;
font-size: 53px;
margin-top: 10px;
}
.banner-text h2{
font-size: 50px;
padding-top: 20px;
padding-bottom: 10px;
}
.banner-text p{
font-size: 30px;
}
Css設置外圍寬度100%,img也是
vertical-align: middle;為了改掉img標籤的小缺陷
.wrap{
width: 100%;
display: flex;
}
.box{
width: 25%;
position: relative;
}
.box img{
width: 100%;
vertical-align: middle;
}
文字內容使用position把文字綁在圖片上,用flex做置中,因為是要觸碰到照片才會觸發效果,因此用 opacity: 0;隱藏起來,並設定.6秒速度
.box .txt{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 20px;
background-color: rgba(0, 0, 0, .6);
display: flex;
justify-content: center;
flex-direction: column;
opacity: 0;
transition: opacity .6s;
}
.box:hover .txt{
opacity: 1;
}
在h2後方使用偽元素做出一個小動畫,用transition特性做出效果
.box h2{
font-size: 30px;
color: sandybrown;
margin-bottom: 10px;
font-weight: 500;
}
.box h2::after{
content: '';
display: block;
width: 0;
height: 2px;
margin: 10px 0;
background-color: #ff0;
transition: width .5s .5s;
}
.box:hover h2::after{
width: 100%;
}