CSS卡片渐变悬停效果

痛定思痛。 2023-10-14 14:31 50阅读 0赞

HTML 代码

<div class="card">
      <div class="content">
        <p class="heading">Card Hover Effect
        </p><p class="para">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi
          laboriosam at voluptas minus culpa deserunt delectus sapiente
          inventore pariatur
        </p>
        <button class="btn">Read more</button>
      </div>
    </div>

CSS代码

.card {
        
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      width: 320px;
      -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
              box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      padding: 32px;
      overflow: hidden;
      border-radius: 10px;
      -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
      transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    }
    
    
    /* Visit https://democoding.in/ for more free css animation */
    
    .content {
        
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      gap: 20px;
      color: #e8e8e8;
      -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
      transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    }
    
    .content .heading {
        
      font-weight: 700;
      font-size: 32px;
    }
    
    .content .para {
        
      line-height: 1.5;
    }
    
    .content .btn {
        
      color: #e8e8e8;
      text-decoration: none;
      padding: 10px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
      border-radius: 5px;
      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
              box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    }
    
    .card::before {
        
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
      z-index: -1;
      -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
      transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    }
    
    .card:hover::before {
        
      height: 100%;
    }
    
    .card:hover {
        
      -webkit-box-shadow: none;
              box-shadow: none;
    }
    
    .card:hover .btn {
        
      color: #212121;
      background: #e8e8e8;
    }
    
    .content .btn:hover {
        
      outline: 2px solid #e8e8e8;
      background: transparent;
      color: #e8e8e8;
    }
    
    .content .btn:active {
        
      -webkit-box-shadow: none;
              box-shadow: none;
    }

### 感谢您的阅读❤️！ ###