设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › 分享两个CSS酷炫的卡片动画效果（二）
返回列表 发新帖
查看: 16|回复: 0

分享两个CSS酷炫的卡片动画效果（二）

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 昨天 21:47 | 显示全部楼层 |阅读模式
效果1演示：
640.gif

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.       <style>
  5.           p {
  6.               margin: 0;
  7.               padding: 0;
  8.           }

  10.           .box-card {
  11.               display: inline-block;
  12.               position: relative;
  13.               width: 300px;
  14.               height: 300px;
  15.               margin: 18px;
  16.               overflow: hidden;
  17.               box-sizing: border-box;
  18.               box-shadow: 0px 0px 12px rgba(0, 0, 0, .2);
  19.           }

  21.           .box-card__img {
  22.               width: 100%;
  23.               height: 100%;
  24.               transition: 0.5s;
  25.           }

  27.           .box-card__img img {
  28.               width: 100%;
  29.               height: 100%;
  30.           }

  32.           .box-card__content {
  33.               position: absolute;
  34.               left: 0;
  35.               top: 0;
  36.               width: 100%;
  37.               height: 100%;
  38.               padding: 100px 20px 10px;
  39.               transform: translateY(100%);
  40.               box-sizing: border-box;
  41.               font-size: 14px;
  42.               text-align: center;
  43.               background-image: linear-gradient(135deg, #FFA8A8 10%, #FCFF00 100%);
  44.               color: #000;
  45.               opacity: 0;
  46.               transition: 0.5s;
  47.           }

  49.           .box-card:hover .box-card__img {
  50.               position: relative;
  51.               transform: scale(0.3) translateY(-110%);
  52.               border: 6px solid rgba(255, 255, 255, 0.9);
  53.               z-index: 9;
  54.           }

  56.           .box-card:hover .box-card__content {
  57.               transform: translateY(0px);
  58.               opacity: 1;
  59.           }
  60.       </style>
  61.   </head>
  62.   <body>
  63.       <div class="box-card">
  64.           <div class="box-card__img">
  65.               <img src="./img/img3.jpeg" />
  66.           </div>

  68.           <div class="box-card__content">
  69.               <h3>简介</h3>
  70.               <div>
  71.                   <p>姓名：前端技术营；年龄：永远18岁（在二进制世界里）；联系方式：10101010（请自行转换为十进制）；技能亮点：精通Java（能写出让编译器都颤抖的代码）、JavaScript（能让浏览器怀疑人生）、Python（让代码像蛇一样灵活，但绝不咬人）
  72.                   </p>
  73.               </div>
  74.           </div>
  75.       </div>
  76.   </body>
  77. </html>
复制代码
效果2演示：

640.gif
代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.       <style>
  5.           .box-card {
  6.               display: inline-block;
  7.               position: relative;
  8.               width: 300px;
  9.               height: 300px;
  10.               margin: 18px;
  11.               overflow: hidden;
  12.               box-sizing: border-box;
  13.               box-shadow: 0px 0px 12px rgba(0, 0, 0, .2);
  14.           }

  16.           .box-card::before,
  17.           .box-card::after {
  18.               content: '';
  19.               position: absolute;
  20.               width: 50%;
  21.               height: 50%;
  22.               transform: scale(0.05);
  23.               background: #f40;
  24.               opacity: 0;
  25.               transition: all 0.5s ease;
  26.           }

  28.           .box-card::before {
  29.               top: 0;
  30.               right: 0;
  31.           }

  33.           .box-card::after {
  34.               bottom: 0;
  35.               left: 0;
  36.           }

  38.           .box-card__img {
  39.               width: 100%;
  40.               height: 100%;
  41.               transition: 0.5s;
  42.           }

  44.           .box-card__img img {
  45.               width: 100%;
  46.               height: 100%;
  47.           }

  49.           .box-card__content {
  50.               position: absolute;
  51.               top: 0;
  52.               bottom: 0;
  53.               left: 0;
  54.               right: 0;
  55.               z-index: 1;
  56.               width: 100%;
  57.               height: 100%;
  58.               box-sizing: border-box;
  59.               padding: 30px;
  60.               text-align: center;
  61.               color: #000;
  62.               opacity: 0;
  63.               transition: all 0.5s ease;
  64.           }

  66.           .box-card__content::before,
  67.           .box-card__content::after {
  68.               content: '';
  69.               position: absolute;
  70.               width: 50%;
  71.               height: 50%;
  72.               z-index: -1;
  73.               opacity: 0;
  74.               transform: scale(0.05);
  75.               background: #f40;
  76.               transition: all 0.5s ease;
  77.           }

  79.           .box-card__content::before {
  80.               top: 0;
  81.               left: 0;
  82.           }

  84.           .box-card__content::after {
  85.               bottom: 0;
  86.               right: 0;
  87.           }

  89.           .box-card:hover::before,
  90.           .box-card:hover::after {
  91.               transform: translate(0, 0) scale(1);
  92.               opacity: 1;
  93.           }

  95.           .box-card:hover .box-card__content {
  96.               opacity: 1;
  97.           }

  99.           .box-card:hover .box-card__content::before,
  100.           .box-card:hover .box-card__content::after {
  101.               transform: translate(0, 0) scale(1);
  102.               opacity: 1;
  103.           }
  104.       </style>
  105.   </head>
  106.   <body>
  107.       <div class="box-card">
  108.           <div class="box-card__img">
  109.               <img src="./img/img3.jpeg" />
  110.           </div>

  112.           <div class="box-card__content">
  113.               <h3>简介</h3>
  114.               <div>
  115.                   姓名：前端技术营；年龄：永远18岁（在二进制世界里）；联系方式：10101010（请自行转换为十进制）；技能亮点：精通Java（能写出让编译器都颤抖的代码）、JavaScript（能让浏览器怀疑人生）、Python（让代码像蛇一样灵活，但绝不咬人
  116.               </div>
  117.           </div>
  118.       </div>
  119.   </body>
  120. </html>
复制代码

回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表