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

七夏（UID：1） · 发表于 2024-12-30 17:48:28

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

动效1

演示：

代码：

<!DOCTYPE html>
<html>
  <head>
      <style>
          p {
              margin: 0;
              padding: 0;
          }

          .box-card {
              display: inline-block;
              position: relative;
              width: 300px;
              height: 300px;
              margin: 18px;
              overflow: hidden;
              box-sizing: border-box;
              box-shadow: 0px 0px 12px rgba(0, 0, 0, .2);
          }

          .box-card__img {
              width: 100%;
              height: 100%;
              transition: 0.5s;
          }

          .box-card__img img {
              width: 100%;
              height: 100%;
          }

          .box-card__content {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              padding: 100px 20px 10px;
              transform: translateY(100%);
              box-sizing: border-box;
              font-size: 14px;
              text-align: center;
              background-image: linear-gradient(135deg, #FFA8A8 10%, #FCFF00 100%);
              color: #000;
              opacity: 0;
              transition: 0.5s;
          }

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

          .box-card:hover .box-card__content {
              transform: translateY(0px);
              opacity: 1;
          }
      </style>
  </head>
  <body>
      <div class="box-card">
          <div class="box-card__img">
              <img src="./img/img3.jpeg" />
          </div>

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

动效2

演示：

代码：

<!DOCTYPE html>
<html>
  <head>
      <style>
          .box-card {
              display: inline-block;
              position: relative;
              width: 300px;
              height: 300px;
              margin: 18px;
              overflow: hidden;
              box-sizing: border-box;
              box-shadow: 0px 0px 12px rgba(0, 0, 0, .2);
          }

          .box-card::before,
          .box-card::after {
              content: '';
              position: absolute;
              width: 50%;
              height: 50%;
              transform: scale(0.05);
              background: #f40;
              opacity: 0;
              transition: all 0.5s ease;
          }

          .box-card::before {
              top: 0;
              right: 0;
          }

          .box-card::after {
              bottom: 0;
              left: 0;
          }

          .box-card__img {
              width: 100%;
              height: 100%;
              transition: 0.5s;
          }

          .box-card__img img {
              width: 100%;
              height: 100%;
          }

          .box-card__content {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              z-index: 1;
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              padding: 30px;
              text-align: center;
              color: #000;
              opacity: 0;
              transition: all 0.5s ease;
          }

          .box-card__content::before,
          .box-card__content::after {
              content: '';
              position: absolute;
              width: 50%;
              height: 50%;
              z-index: -1;
              opacity: 0;
              transform: scale(0.05);
              background: #f40;
              transition: all 0.5s ease;
          }

          .box-card__content::before {
              top: 0;
              left: 0;
          }

          .box-card__content::after {
              bottom: 0;
              right: 0;
          }

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

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

          .box-card:hover .box-card__content::before,
          .box-card:hover .box-card__content::after {
              transform: translate(0, 0) scale(1);
              opacity: 1;
          }
      </style>
  </head>
  <body>
      <div class="box-card">
          <div class="box-card__img">
              <img src="./img/img3.jpeg" />
          </div>

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

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

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

快速回帖

分享帝

龙年限定

蛇年限定

关于楼主

商务推广