純CSS3超酷文章卡片UI設計效果

這是一款使用純CSS3製作的超酷文章卡片UI設計效果。該文章卡片帶有陰影效果，當滑鼠滑過卡片時，文章的描述資訊會以滑動動畫的方式顯示在卡片中。

線上預覽    源碼下載

 使用方法

 HTML結構

一張卡片的HTML結構如下：

<div class="tile"> 
    <img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"/ alt="純CSS3超酷文章卡片UI設計效果" >
    <div class="text">
    <h1 id="文章标题">文章标题</h1>
    <h2 id="文章子标题">文章子标题</h2>
    <p class="animate-text">文章的描述信息</p>
    <div class="dots">
        <span></span>
        <span></span>
        <span></span>
    </div>
  </div>
</div>
                

 CSS樣式

整個卡片包裹容器以flex進行佈局。

.wrap{
  margin:50px auto 60px auto;
  width:100%;
  display:flex;
  align-items:space-around;
  max-width:1200px;
}  
                

每張卡片的寬度和高度都設定為380像素。並使用box-shadow屬性為卡片設定一個大陰影效果，同時為所有的動畫設定ease-out效果的過渡動畫。

.tile{
  width:380px;
  height:380px;
  margin:10px;
  background-color:#99aeff;
  display:inline-block;
  background-size:cover;
  position:relative;
  cursor:pointer;
  transition: all 0.4s ease-out;
  box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
  overflow:hidden;
  color:white;
  font-family:'Microsoft YaHei',sans-serif;
}                  
                

卡片中的圖片使用絕對定位，寬度和高度都為100%，佔據滿整個卡片。

.tile img{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  transition: all 0.4s ease-out;
}                 
                

卡片中的文字圖層頁面採用絕對定位，透過z-index屬性將文字放置在圖片之上。 h2文字和p文字透過translateX函數移動了-200%，即將它們移到卡片之外，初始不可見。

.tile .text{
  z-index:99;
  position:absolute;
  padding:30px;
  height:calc(100% - 60px);
}
.tile h1{
  font-weight:300;
  margin:0;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tile h2{
  font-weight:100;
  margin:20px 0 0 0;
  font-style:italic;
   transform: translateX(200px);
}
.tile p{
  font-weight:300;
  margin:20px 0 0 0;
  line-height: 25px;
  transform: translateX(-200px);
  transition-delay: 0.2s;
}
.animate-text{
  opacity:0;
  transition: all 0.6s ease-in-out;
}                  
                

在滑鼠滑過卡片的時候，卡片的陰影被修改，卡片被放大1.05倍。卡片中的圖片的透明度被設定為0.2，文字總共會原來的位置，透明度設定為1。

.tile:hover{
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
  transform:scale(1.05);
}
.tile:hover img{
  opacity: 0.2;
}
.tile:hover .animate-text{
  transform:translateX(0);
  opacity:1;
}                  
                

 

線上預覽    源碼下載