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

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

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

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

×

卡片动效，作为一种视觉表现形式，广泛应用于网页设计、APP界面、广告展示以及演示文稿等多个领域。它通过动画效果增强卡片的互动性和吸引力，使用户体验更加丰富和生动。其作用主要体现在以下几个方面：

***吸引用户注意力：***卡片动效通过动态的元素和变化，能够迅速吸引用户的注意力，使重要信息或功能更加突出。
***增强用户体验：***动效能够为用户提供更加流畅和自然的交互体验，使界面的操作更加直观和易懂。例如，当用户点击或悬停在一个卡片上时，通过动效反馈，用户可以清晰地感知到自己的操作已被系统识别。
***提升界面美观度：***卡片动效可以使界面更加生动和有趣，提升整体的美观度和视觉吸引力。通过精心设计的动效，可以使界面元素之间的过渡更加平滑，增强界面的整体感。
***强化品牌形象：***独特的卡片动效可以成为品牌的一部分，帮助品牌在用户心中建立独特的形象和认知。通过动效的巧妙运用，可以传达品牌的理念和价值观。
***增加互动性和趣味性：***卡片动效可以增加界面的互动性和趣味性，使用户更加愿意与界面进行交互。这对于提升用户留存率和活跃度非常有帮助。

动效1

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

          .box-card:hover .box-card__img {
              transform: rotate(45deg) scale(5);
          }

          .box-card:hover .box-card__content {
              opacity: 1;
              transform: rotate(0deg) scale(1);
              transition-delay: 0.175s;
          }

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

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

          .box-card .box-card__content {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              width: 300px;
              height: 300px;
              padding: 18px;
              box-sizing: border-box;
              transform: rotate(-45deg) scale(5);
              opacity: 0;
              text-align: center;
              color: #333;
              background-image: linear-gradient(135deg, #FFA8A8 10%, #FCFF00 100%);
              transition: all 0.5s ease;
          }
      </style>
  </head>
  <body>
      <div class="box-card">
          <div class="box-card__img">
              <img src="./img/img2.jpeg" />
          </div>
          <div class="box-card__content">
              <h3>简介</h3>
              <p>
                  欢迎来到前端技术营！这是一个致力于分享Vue2，Vue3，React，JavaScript，CSS，HTML5，小程序，UI组件库等前端编程知识干货的优质资源公众号。
              </p>
          </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-shadow: 0px 0px 12px rgba(0, 0, 0, .2);
          }

          .box-card::before,
          .box-card::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
              width: 26%;
              height: 100%;
              transform: scaleY(0);
              opacity: 0;
              transition: all 0.35s ease;
              background-color: #fff;
          }

          .box-card::before {
              transition-delay: 0s;
          }

          .box-card::after {
              left: 25%;
              transition-delay: 0.105s;
          }

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

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

          .box-card .box-card__content {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              width: 300px;
              height: 300px;
              padding: 30px;
              box-sizing: border-box;
              perspective: 50em;
              text-align: center;
              color: #000;
              transition: 0.5s;
              opacity: 0;
              z-index: 2;
              box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
          }

          .box-card .box-card__content::before,
          .box-card .box-card__content::after {
              content: '';
              position: absolute;
              top: 0;
              width: 26%;
              height: 100%;
              transform: scaleY(0);
              transition: all 0.35s ease;
              opacity: 0;
              background-color: #fff;
              z-index: -1;
          }

          .box-card .box-card__content::before {
              left: 50%;
              transition-delay: 0.21s;
          }

          .box-card .box-card__content::after {
              left: 75%;
              transition-delay: 0.35s;
          }

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

          .box-card:hover .box-card__img {}

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

          .box-card:hover .box-card__content::before,
          .box-card:hover .box-card__content::after {
              transform: scale(1);
              opacity: 1;
          }
      </style>
  </head>
  <body>
      <div class="box-card">
          <div class="box-card__img">
              <img src="./img/img2.jpeg" />
          </div>
          <div class="box-card__content">
              <h3>简介</h3>
              <p>
                  欢迎来到前端技术营！这是一个致力于分享Vue2，Vue3，React，JavaScript，CSS，HTML5，小程序，UI组件库等前端编程知识干货的优质资源公众号。
              </p>
          </div>
      </div>
      <div class="box-card">
          <div class="box-card__img">
              <img src="./img/img3.jpeg" />
          </div>
          <div class="box-card__content">
              <h3>简介</h3>
              <p>
                  欢迎来到前端技术营！这是一个致力于分享Vue2，Vue3，React，JavaScript，CSS，HTML5，小程序，UI组件库等前端编程知识干货的优质资源公众号。
              </p>
          </div>
      </div>
  </body>
</html>

卡片动效在用户界面设计中具有多重作用，能够吸引用户注意力、增强用户体验、提升界面美观度、引导用户操作、强化品牌形象以及增加互动性和趣味性。因此，在界面设计中合理运用卡片动效是非常重要的。

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

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

相关帖子

快速回帖

分享帝

龙年限定

蛇年限定

关于楼主

商务推广