网站建设
 
    收藏本站 
用户ID/邮箱: 密 码:
客户中心 Customer service 您目前的位置:首 页 > 客户中心 > DIV+CSS 



DIV+CSS,网站建设DIV+CSS:纯CSS3制作的超酷文章卡片UI设计效果

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

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

 使用方法

 HTML结构

一张卡片的HTML结构如下:

<div class="tile">   
    <img src="img/1.jpg"/>  
    <div class="text">  
    <h1>文章标题</h1>  
    <h2 class="animate-text">文章子标题</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;  
}                    
                
 

上一条: 内链是什么?怎样做内链?
下一条: DIV中css和@import区别用法
相关文章
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
推广经验分享
其它
网站建设资源
常见问题
网站知识
首页关于我们业务范围新闻资讯成功案例客服中心联系我们深圳网站建设网站优化付款帐户
COPYRIGHT(C) 2005-2019 亚网互联·中国 版权所有 ALL RIGHTS RESERVED (粤ICP备15005241号)
深圳网站建设公司地址:深圳市宝安区龙华民治大道东明大厦15楼 1529-1531 室   E-Mail:web@yanet.cn  
公司电话:0755-89812581(8线)  
深圳市亚网科技有限公司 深圳网站建设常年法律顾问:朱运德律师