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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了纯CSS3超酷文章卡片UI设计效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1944字，纯文字阅读大概需要3分钟。

内容图文

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

在线预览 源码下载

使用方法

HTML结构

一张卡片的HTML结构如下：

 
    
    

    
文章标题
    
文章子标题
    
文章的描述信息
    

        
        
        
    
  

                

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;
}                  
                

在线预览 源码下载

内容总结

以上是互联网集市为您收集整理的纯CSS3超酷文章卡片UI设计效果全部内容，希望文章能够帮你解决纯CSS3超酷文章卡片UI设计效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---