图片/图形

纯CSS3超酷文章卡片UI设计效果

也想出现在这里?联系我们
创客主机

纯CSS3超酷文章卡片UI设计效果-创客云
这是一款使用纯 CSS3 制作的超酷文章卡片 UI 设计效果。该文章卡片带有阴影效果,当鼠标滑过卡片时,文章的描述信息会以滑动动画的方式显示在卡片中。

HTML 结构

一张卡片的 HTML 结构如下:

  1. <div class="tile"> 
  2.     <img src="img/1.jpg"/>
  3.     <div class="text">
  4.     <h1>文章标题</h1>
  5.     <h2 class="animate-text">文章子标题</h2>
  6.     <p class="animate-text">文章的描述信息</p>
  7.     <div class="dots">
  8.         <span></span>
  9.         <span></span>
  10.         <span></span>
  11.     </div>
  12.   </div>
  13. </div>

CSS 样式

整个卡片包裹容器以 flex 进行布局。

  1. .wrap{
  2.   margin:50px auto 60px auto;
  3.   width:100%;
  4.   display:flex;
  5.   align-items:space-around;
  6.   max-width:1200px;
  7. }

每张卡片的宽度和高度都设置为 380 像素。并使用 box-shadow 属性为卡片设置一个大阴影效果,同时为所有的动画设置 ease-out 效果的过渡动画。

  1. .tile{
  2.   width:380px;
  3.   height:380px;
  4.   margin:10px;
  5.   background-color:#99aeff;
  6.   display:inline-block;
  7.   background-size:cover;
  8.   position:relative;
  9.   cursor:pointer;
  10.   transition: all 0.4s ease-out;
  11.   box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
  12.   overflow:hidden;
  13.   color:white;
  14.   font-family:'Microsoft YaHei',sans-serif;
  15. }

卡片中的图片使用绝对定位,宽度和高度都为 100%,占据满整个卡片。

  1. .tile img{
  2.   height:100%;
  3.   width:100%;
  4.   position:absolute;
  5.   top:0;
  6.   left:0;
  7.   z-index:0;
  8.   transition: all 0.4s ease-out;
  9. }

卡片中的文本层页采用绝对定位,通过 z-index 属性将文字放置在图片之上。h2 文本和 p 文本通过 translateX 函数移动了-200%,即将它们移动到卡片之外,初始不可见。

  1. .tile .text{
  2.   z-index:99;
  3.   position:absolute;
  4.   padding:30px;
  5.   height:calc(100% - 60px);
  6. }
  7. .tile h1{
  8.   font-weight:300;
  9.   margin:0;
  10.   text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  11. }
  12. .tile h2{
  13.   font-weight:100;
  14.   margin:20px 0 0 0;
  15.   font-style:italic;
  16.    transform: translateX(200px);
  17. }
  18. .tile p{
  19.   font-weight:300;
  20.   margin:20px 0 0 0;
  21.   line-height: 25px;
  22.   transform: translateX(-200px);
  23.   transition-delay: 0.2s;
  24. }
  25. .animate-text{
  26.   opacity:0;
  27.   transition: all 0.6s ease-in-out;
  28. }

在鼠标滑过卡片的时候,卡片的阴影被修改,卡片被放大 1.05 倍。卡片中的图片的透明度被设置为 0.2,文字一共会原来的位置,透明度设置为 1。

  1. .tile:hover{
  2. box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
  3.   transform:scale(1.05);
  4. }
  5. .tile:hover img{
  6.   opacity: 0.2;
  7. }
  8. .tile:hover .animate-text{
  9.   transform:translateX(0);
  10.   opacity:1;
  11. }
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!