修改首页文章摘要 hover 效果

# 前言

想法来自于 HEO 大佬首页文章效果,实现首页文章摘要的 hover 显示效果

# 实现

# 修改 Stylus

  1. 找到 themes\shoka\source\css\_common\components\pages\home.styl ;

  2. 大概 260 行左右,找到 &:hover 代码部分,修改如下:

  3. 修改鼠标悬浮后图片变暗效果,增加 brightness 属性:

    &:hover {
    	box-shadow: 0 0 2rem var(--box-bg-shadow);
    	.cover {    // 新增
    		filter: brightness(.3);
    	}
    	.cover img {
  4. 修改鼠标悬浮后旋转效果

    .cover {
    	filter: brightness(.3);
    }
    .cover img {   // 修改
    	transform: scale(1.25) rotate(2deg);
    }
    .info {

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

    &:hover {
      .cover img {
        transform: scale(1.25) rotate(-2deg);
      }
    }
  5. 修改鼠标悬浮后内容宽度、标题位置,摘要显示

    .info {
    	width: 75%;
    	+mobile(){
    		width: 100%;
    	}
    }
    .info h3{
    	margin: .625rem 0;
    	color: var(--color-blue);
    }
    .excerpt {
    	opacity: 1;
    }
  6. 修改鼠标悬浮前标题位置 (340 行左右 .info h3 处)

    h3 {
    	text-overflow: ellipsis;
    	overflow: hidden;
    	white-space: nowrap;
    	margin: .625rem 0;
    	color: var(--primary-color);
    }

    修改为

    h3 {
    	text-overflow: ellipsis;
    	overflow: hidden;
    	white-space: nowrap;
    	margin: 3.525rem 0 0 0;
    	color: var(--primary-color);
    	the-transition-margin();  // 平滑过渡
    }
  7. 修改悬浮前摘要内容显示,在紧接着 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;
    }

    修改为(新增)

    .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();  // 平滑过渡
    }
  8. 平滑过渡(290 行左右 .cover ,315 行左右 .info ,340 行左右 h3 ,350 行 .excerpt 中加入平滑动画代码

    the-transition();

    h3 中我加入的平滑是

    the-transition-margin();
  9. 适配移动端(270 行左右, .info 中加入 width 的 100% 属性保证移动端不会出现错位)

    .info { 
        width: 75%;
        +mobile(){
          width: 100%;
        }

}
```

# 总结

  • 最后把所有代码贴入(以上所有改后的 home.styl 代码)

    $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;
        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;
        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);
          border-radius: 5rem;
          left: .5rem;
          top: .8rem;
          box-shadow: 0 0 .6rem .6rem var(--color-pink-a3);
          background-color: var(--color-pink-a3);
          z-index: -1;
        }
        &:hover {
          transform: translateZ(2.5rem);
        }
        &:hover::before {
          transform: translateZ(-2.5rem);
        }
      }
      .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: 0rem;
            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 0rem .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-blue);
          }
          .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%;
        }
      }
      .info {
        position: relative;
        width: 50%;
        padding: 1rem 1.5rem 3rem 0;
        perspective: 62.5rem;
        the-transition();
        +mobile() {
          width: 100%;
          height: 14rem;
          padding: 0rem 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: 0rem .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: 0rem 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);
          }
        }
      }
    }

完成!

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

Lavender 微信支付

微信支付

Lavender 支付宝

支付宝