一个收入展开框

最新推荐文章于 2024-11-04 14:35:19 发布

写代码要喊出来

最新推荐文章于 2024-11-04 14:35:19 发布

阅读量251

点赞数 1

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/m0_49194578/article/details/136687605

版权

这篇文章介绍了如何使用HTML和CSS创建一个具有动态效果的内容社区界面，包括旋转、淡入淡出和悬停交互，以增强用户体验和吸引用户参与。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <div class="t-container">
    <div class="a-box">
      <div class="b-box">
        <div class="color" style="background-color: #13d37c;right: 0"></div>
        <div class="color" style="background-color: #0d92cc;left: 0"></div>
        <div class="card">
          <h2>Join our comunity</h2>
          <div class="content">
            <p>Lorem ipsum dolor sit amet consectetur. Integer aliquet suspendisse amet amet lacus accumsan consectetur
              arcu mi. Sit morbi nisi et et ac interdum. Fermentum sed sem velit feugiat.</p>
            <button>buttonbutton</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
</script>

<style lang="scss" scoped>
.t-container {
  background-color: #8d8d8d;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .a-box {
    height: 600px;
    width: 1000px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;

    .b-box {
      width: 500px;
      position: relative;

      @keyframes showColor {
        from {
          transform: rotate3d(1,0,0,60deg);
        }
        to {
          transform: rotate3d(1,0,0,0);
        }
      }
      @keyframes hideColor {
        from {
          transform: rotate3d(1,0,0,0);
        }
        to {
        transform: rotate3d(1,0,0,60deg);
        }
      }

      .color {
        top: calc(50% - 60px);
        position: absolute;
        height: 120px;
        width: 320px;
        border-radius: 50%;
        filter: blur(80px);
        animation: hideColor .2s ease-in-out forwards;
      }


      &:hover {
        .color {
          animation: showColor .2s ease-in-out forwards;
        }

        .card {
          .content {
            animation: show .2s ease-in-out forwards;
          }
        }
      }

      .card {
        position: relative;
        @keyframes hide {
          from {
            height: 150px;
          }
          to {
            height: 0;
          }
        }
        @keyframes show {
          from {
            height: 0;
          }
          to {
            height: 150px;
          }
        }

        .content {
          overflow: hidden;
          animation: hide .2s ease-in-out forwards;
        }

        &::before, &::after {
          background: linear-gradient(276.74deg, #73EC71 20%, #0029FF 80%);
          content: '';
          position: absolute;
          height: 1px;
          width: 100%;
          left: 0;
        }

        &::after {
          top: 0;
        }

        &::before {
          bottom: 0;
        }

        padding: 20px 50px;
        text-align: center;
        color: white;
        backdrop-filter: blur(5px);
        mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);

        button {
          margin-top: 20px;
          border: none;
          background-color: rgb(72, 120, 192);
          color: white;
        }
      }
    }
  }
}
</style>