html桌面卡牌效果,纯CSS3超酷文章卡片UI设计效果

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

使用方法

HTML结构

一张卡片的HTML结构如下:

1.jpg

文章标题

文章子标题

文章的描述信息

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;

}

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值