时间:2021-07-01 10:21:17 帮助过:69人阅读
这是一款使用纯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;
- }
以上就是CSS3,文章卡片,UI设计的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!