当前位置:Gxlcms > css > 纯CSS3超酷文章卡片UI设计效果

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

时间:2021-07-01 10:21:17 帮助过:69人阅读

简要教程

这是一款使用纯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. }

以上就是CSS3,文章卡片,UI设计的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

人气教程排行