寫在前面
今天我們練習的這個小項目，在很多産品網站或者個人部落格上都會用到，它主要的場景，就是在做一個産品說明或者個人文字介紹說明，這是一個非常實用的小項目。
因為在很早之前，我們如果要實作這樣的效果，基本都是要通過PS把它處理成6邊形的圖檔，而且每次如果要修改産品的話，都需要再處理一次圖檔，還是非常麻煩的。
但是今天我們學會了這個CSS技巧，我們完全不需要麻煩設計了，而且現在各大浏覽器都是相容支援的，是以，不用擔心，我們寫出來的效果不适用，其實，除了最新的一些屬性，或者淘汰的屬性，浏覽器不支援外，現在很多屬性，各大浏覽器都是支援的，請放心使用。
好了，說了這麼多，我們一起來看一下，今天練習的小項目的最終效果：
以上圖檔就是頁面加載完的預設效果，而下面的圖檔是滑鼠移上去的hover效果。
具體實作代碼在後面，大家可以自行取閱學習，練習的圖檔素材，我放在這裡了，請自行下載下傳擷取。
圖檔素材下載下傳位址：
百度網盤：https://pan.baidu.com/s/1-hKOAs6UfYvE67-70HK9UA?pwd=tg8u 提取碼: tg8u
HTML代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>【每日一練】07—CSS實作響應式産品介紹的Hover效果</title>
</head>
<body>
<div class="container">
<!-- 01 hexagon begin-->
<div class="hexagon">
<div class="shape">
<img src="img1.png">
<div class="content">
<div>
<h2>主動的人</h2>
<p>主動的人，往往也是更加努力的人，他們的創造力也會更強，因為他們懂得自己的命運在自己手中，不想供手讓别人操控自己的命運</p>
</div>
</div>
</div>
</div>
<!--01 hexagon end-->
<div class="hexagon">
<div class="shape">
<img src="img2.png">
<div class="content">
<div>
<h2>主動的人</h2>
<p>往往運氣也會越來越好，因為他們清楚的知道自己想要什麼，他們關注自己的目标而努力，是以會朝着目标前進，自然就會運氣好，運氣越好越努力，越努力運氣越好</p>
</div>
</div>
</div>
</div>
<!--02 hexagon end-->
<div class="hexagon">
<div class="shape">
<img src="img3.png">
<div class="content">
<div>
<h2>主動的人</h2>
<p>他們會擁有更多的機會，因為他們知道機會從來都不會從天而降，隻有抓住機會才會擁有成功的可能，這個世界有很多機會，就是看機會來臨時，你能把握住</p>
</div>
</div>
</div>
</div>
<!--03hexagon end-->
<div class="hexagon">
<div class="shape">
<img src="img4.png">
<div class="content">
<div>
<h2>主動的人</h2>
<p>他們也會更容易成功，因為他們做事情不拖延，沒有懶癌症，心态也會更加積極主動，對自己做的事情負責，能夠做到今日事今日畢，甚至是提前完成工作與自己的任務</p>
</div>
</div>
</div>
</div>
<!--04 hexagon end-->
</div>
</body>
</html> CSS代碼：
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container
{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.hexagon
{
position: relative;
width: 350px;
height: 400px;
margin: 50px 20px 70px;
}
.hexagon:before
{
content: '';
position: absolute;
bottom: -70px;
width: 100%;
height: 60px;
background: radial-gradient(rgba(0,0,0,0.15),transparent,transparent);
border-radius: 50%;
transition: 0.5s;
}
.hexagon:hover:before
{
opacity: 0.8;
transform: scale(0.8);
}
.hexagon .shape
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
transition: 0.5s;
}
.hexagon:hover .shape
{
transform: translateY(-30px);
}
.hexagon .shape img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hexagon .shape .content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #727373, rgba(99, 104, 107, 0.5));
opacity: 0;
transition: 0.5s;
padding: 20px;
text-align: center;
color: #fff;
}
.hexagon:hover .shape .content
{
opacity: 1;
} 寫在最後
以上就是每日一練的全部内容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。