Loading...
首页ShokaX

    我是基于CHatGPT实现的AI助手，在此网站上负责整理和概括文章

    文章介绍了如何修改ShokaX主题的首页文章hover效果，主要包括修改Stylus文件中的代码，实现鼠标悬浮在文章摘要上时图片变暗、放大旋转，标题位置和摘要内容显示效果的调整。同时提到是在看了[Lavender's Blog](https://lavender816.github.io/posts/1168994136/)的博客后受到启发进行修改的。整个过程详细描述了如何在ShokaX主题上实现这一效果。

    # 在开始之前

    修改首页文章摘要 hover 效果。

    # 实现

    以下代码均已本站为例。

    # 修改 Stylus 文件

    1. 首先进入 node_modules\hexo-theme-shokax\source\css\_common\components\pages\ 目录，找到 home.styl ，修改内容。

    2. 找到 .segments { 下的 &:hover 部分。

      &:hover {
            box-shadow: 0 0 2rem var(--box-bg-shadow);
            .cover {    
              filter: brightness(.3);// 新增鼠标悬浮后图片变暗效果
            }
            .cover img {
              transform: scale(1.25) rotate(2deg); // 修改
            }
      	 
      	// 一下修改鼠标悬浮后内容宽度、标题位置，摘要显示
            .info {
              width: 75%;
              +mobile(){
                width: 100%;
              }
            }
            .info h3{
              margin: .625rem 0;
              color: var(--color-green); // 自定义显示高亮颜色
            }
            .excerpt {
              opacity: 1;
            }
          }
      3. 

    3. 

      修改另一个方向的旋转效果 410 行左右，即最后部分。
      

      &:hover {
        .cover img {
          transform: scale(1.25) rotate(-2deg);
        }
      }
      4. 

    4. 

      修改鼠标悬浮前标题位置 340 行左右，在 .segments {  的  .info {  中的 .info h3  处。
      

      h3 {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              margin: 3.525rem 0 0 0;
              color: var(--primary-color);
              the-transition-margin();  // 平滑过渡
          }
      5. 

    5. 

      修改悬浮前摘要内容显示，在 .info h3  下的 .excerpt  修改。
      

      .excerpt {
            overflow: hidden;
            font-size: $font-size-small;
            max-height: 5rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-overflow: ellipsis;
            opacity: 0;   // 不显示
            pointer-events: none;
            the-transition();  // 平滑过渡
      }
      6. 

    6. 

      分别在 .segments { 下的 .cover, .info, .h3, .excerpt  插入平滑代码。
      

      the-transition();
      7. 

    

    # まとめ：
    

    

    在看了 Lavender's Blog 的博客，大佬对 shoka 主题做出的修改后，自己也想在 ShokaX 主题上修改。
    

    

    附上完整的代码：
    

    $item {
      position: relative;
      color: inherit;
      width: calc(50% - 2rem);
      min-width: calc(50% - 2rem);
      height: 14rem;
      margin: 1rem;
      opacity: 0;
      &.show {
        @extend .slide-up-big-in;
        // content-visibility: auto;
        // contain-intrinsic-size: 250px;
        opacity: 1;
      }
      +mobile() {
        width: calc(100% - 1rem) !important;
        min-width: calc(100% - 1rem) !important;
        margin: 1rem .5rem !important;
      }
    }
    .index.wrap {
      .btn {
        position: absolute;
        bottom: 0;
        right: 0;
        transform-style: preserve-3d;
        transform: translateZ(2rem);
        backface-visibility: hidden;
        padding: .3rem 1rem;
        border-radius: 1rem 0;
        color: var(--grey-0);
        background-image: linear-gradient(to right, var(--color-pink) 0, var(--color-orange) 100%);
        &::before {
          position: absolute;
          display: block;
          content: '';
          height: calc(100% - 1rem);
          width: calc(100% - 1rem);
          transform-style: preserve-3d;
          transform: translateZ(-2rem);
          backface-visibility: hidden;
          border-radius: 5rem;
          left: .5rem;
          top: .8rem;
          box-shadow: 0 0 .6rem .6rem var(--color-pink-a3);
          background-color: var(--color-pink-a3);
        }
        &:hover {
          transform: translateZ(2.5rem);
        }
        &:hover::before {
          transform: translateZ(-2.5rem);
        }
      }
      /*.active .btn {
        transform-style: preserve-3d;
        transform: translateZ(2rem);
        backface-visibility: hidden;
        &::before {
          transform-style: preserve-3d;
          transform: translateZ(-2rem);
          backface-visibility: hidden;
        }
      }*/
      .meta {
        font-size: $font-size-smaller;
        color: var(--grey-5);
        .ic {
          margin-right: .0625rem;
        }
        .item + .item {
          margin-left: .625rem;
        }
        &.footer {
          position: absolute;
          bottom: .5rem;
          max-width: calc(100% - 7rem);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          justify-content: flex-start;
          span {
            margin-right: .5rem;
          }
        }
      }
    }
    .cards {
      display: flex;
      margin: 0 auto;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
      &.hide .item {
        display: none;
      }
      .item {
        @extend $item;
        perspective: 62.5rem;
        &.show {
          display: block !important;
        }
        .cover,
        .info {
          position: absolute;
          the-flex();
          border-radius: .375rem;
          height: 100%;
          width: 100%;
          backface-visibility: hidden;
          transform-style: preserve-3d;
          transition: ease-in-out 600ms;
        }
        .cover {
          background-position: center;
          background-size: cover;
          padding: .5rem 1rem;
          font-size: $font-size-medium;
          color: var(--header-text-color);
          overflow: hidden;
          transform: rotateY(0deg);
          background-image: unquote(hexo-config('index.cover'));
          .title {
            margin: 0;
            white-space: normal;
            text-align: center;
          }
          &::before {
            position: absolute;
            display: block;
            content: '';
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: linear-gradient(135deg, #434343 0%, black 100%);
            opacity: .25;
            z-index: $zindex-0;
          }
          span {
            font-size: $font-size-smallest;
            position: absolute;
            right: .9375rem;
            top: .625rem;
            padding: 0 .3125rem;
            border-radius: .3125rem;
            box-shadow: 0 0 .3125rem .0625rem rgba(0,0,0,.6);
            background: rgba(0,0,0,.5);
          }
        }
        .info {
          background-color: var(--grey-0);
          transform: rotateY(-180deg);
          padding: 1rem 1.5rem 4rem;
          justify-content: space-between;
          +mobile() {
            padding: 1rem 1rem 4rem;
          }
          .ribbon {
            left: -2.5rem;
            margin-bottom: .8rem;
            max-width: calc(100% + 2rem);
            +mobile() {
              left: -2rem;
            }
          }
        }
        &:nth-child(even) .info {
          transform: rotateY(180deg);
        }
        &.active {
          .cover {
            transform: rotateY(180deg);
          }
          .info {
            transform: rotateY(0deg);
            box-shadow: 0 0 2rem var(--box-bg-shadow);
          }
        }
        &:nth-child(even).active {
          .cover {
            transform: rotateY(-180deg);
          }
        }
        .title {
          .ic {
            font-size: 80%;
          }
        }
        ul.posts {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-content: baseline;
          min-height: 5rem;
          overflow: hidden;
          li {
            width: 45%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: var(--primary-color);
          }
        }
      }
    }
    .segments {
      the-flex();
      > .item {
        @extend $item;
        display: flex;
        border-radius: .625rem;
        width: calc(100% - 2rem);
        min-width: calc(100% - 2rem);
        shadow-box(false);
        the-transition();
        +mobile() {
          flex-direction: column;
          height: fit-content;
          max-height: fit-content;
        }
        &:hover {
          box-shadow: 0 0 2rem var(--box-bg-shadow);
          .cover {    // 新增
            filter: brightness(.3);
          }
          .cover img {
            transform: scale(1.25) rotate(2deg);
          }
          .info {
            width: 75%;
            +mobile(){
              width: 100%;
            }
          }
          .info h3{
            margin: .625rem 0;
            color: var(--color-green);
          }
          .excerpt {
            opacity: 1;
          }
        }
      }
      .cover {
        width: 50%;
        margin-right: 1.5rem;
        clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
        border-radius: .625rem 0 0 .625rem;
        overflow: hidden;
        the-transition();
        +mobile() {
          width: 100%;
          height: 14rem;
          margin: auto;
          clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
          border-radius: .625rem .625rem 0 0;
        }
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          the-transition();
        }
      }
      .info {
        position: relative;
        width: 50%;
        padding: 1rem 1.5rem 3rem 0;
        perspective: 62.5rem;
        the-transition();
        +mobile() {
          width: 100%;
          height: 14rem;
          padding: 0 1rem 3rem;
        }
        .meta {
          display: flex;
          justify-content: flex-end;
          margin: 0;
          +mobile() {
            .item:not(:first-child) {
              display: none;
            }
          }
        }
        h3 {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin: 3.525rem 0 0 0;
            color: var(--primary-color);
            the-transition-margin();  // 平滑过渡
        }
        .excerpt {
              overflow: hidden;
              font-size: $font-size-small;
              max-height: 5rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              text-overflow: ellipsis;
              opacity: 0;   // 不显示
              pointer-events: none;
              the-transition();  // 平滑过渡
        }
      }
      > .item:nth-child(even) {
        flex-direction: row-reverse;
        +mobile() {
          flex-direction: column;
        }
        .cover {
          margin-right: auto;
          margin-left: 1.5rem;
          clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
          border-radius: 0 .625rem .625rem 0;
          
          +mobile() {
            width: 100%;
            margin: auto;
            clip-path: polygon(0 0,100% 0,100% 100%,0 92%);
            border-radius: .625rem .625rem 0 0;
          }
        }
        .info {
          padding: 1rem 0 3rem 1.5rem;
          +mobile() {
            padding: 0 1rem 3rem;
          }
          .meta {
            justify-content: flex-start;
          }
        }
        .btn {
          left: 0;
          right: auto;
          border-radius: 0 1rem;
          background-image: linear-gradient(to right, var(--color-orange) 0, var(--color-pink) 100%);
        }
        .meta.footer {
          right: .5rem;
          justify-content: flex-start;
        }
        &:hover {
          .cover img {
            transform: scale(1.25) rotate(-2deg);
          }
        }
      }
    }