溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS怎么實(shí)現(xiàn)鼠標(biāo)滑過卡片上浮效果

發(fā)布時(shí)間：2021-03-17 09:33:29 來源：億速云 閱讀：1030 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)CSS怎么實(shí)現(xiàn)鼠標(biāo)滑過卡片上浮效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

原理

hover 的時(shí)候?qū)υ卦O(shè)置陰影：box-shadow，使其樣式與常態(tài)不同。

box-shadow 表達(dá)式參見 MDN：

/* x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴(kuò)散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插頁(陰影向內(nèi)) | x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: inset 5em 1em gold;

/* 任意數(shù)量的陰影，以逗號(hào)分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

指定單個(gè) box-shadow 的用法：

  • 給出兩個(gè)、三個(gè)或四個(gè)數(shù)字值的情況。

如果只給出兩個(gè)值，這兩個(gè)值將被瀏覽器解釋為 x 軸上的偏移量 和 y 軸上的偏移量 。
如果給出了第三個(gè)值，這第三個(gè)值將被解釋為模糊半徑的大小 。
如果給出了第四個(gè)值，這第四個(gè)值將被解釋為擴(kuò)展半徑的大小 。

  • 可選，插頁(陰影向內(nèi)) inset。

  • 可選，顏色值 。

下面列舉幾種樣式，也是在本博客系統(tǒng)中多次用到的。

一、鼠標(biāo)懸浮仿紙張折起的樣式

CSS怎么實(shí)現(xiàn)鼠標(biāo)滑過卡片上浮效果

代碼實(shí)現(xiàn)：

在 hover 狀態(tài)增加了 transition 屬性，從而產(chǎn)生漸變的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠標(biāo)懸浮仿紙張折起的樣式</title>
</head>
<style type="text/css">
  /* 核心樣式 */
  .card {
    width: 300px;
    height: 180px;
    border: 10px solid #FFF;
    border-bottom: 0 none;
    background-color: #FFF;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15)
  }

  .card:hover {
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .25);
    transition: all .2s ease-in-out;
  }

  /* 非核心樣式 */
  .card-header {
    text-align: center;
  }

  .card-body, .card-footer {
    text-align: left;
  }
</style>
<body style="background: #e3e3e3;">
<div class="card">
  <div class="card-header">
    <p>這是一張卡片</p>
  </div>
  <div class="card-body">
    <p>描述：鼠標(biāo)懸浮時(shí)，類似紙張折起的效果</p>
  </div>
  <div class="card-footer">
    <p>原理：改變 y 軸上的偏移和陰影擴(kuò)散半徑（第二、三個(gè)數(shù)字）</p>
  </div>
</div>
</body>
</html>

二、鼠標(biāo)懸浮仿紙張聚焦的樣式

CSS怎么實(shí)現(xiàn)鼠標(biāo)滑過卡片上浮效果

代碼實(shí)現(xiàn)：

與上面的區(qū)別是調(diào)整了 box-shadow 屬性的具體數(shù)值（ y 軸上的偏移和陰影擴(kuò)散半徑，即第二、三個(gè)數(shù)字）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠標(biāo)懸浮仿紙張聚焦的樣式</title>
</head>
<style type="text/css">
  /* 核心樣式 */
  .card {
    padding: 10px;
    width: 300px;
    height: 180px;
    background-color: #FFF;
    box-shadow: none;
  }

  .card:hover {
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .2);
    border-color: #eee;
    transition: all .2s ease-in-out;
  }

  /* 非核心樣式 */
  .card-header {
    text-align: center;
  }

  .card-body, .card-footer {
    text-align: left;
  }
</style>
<body style="background: #e3e3e3;">
<div class="card">
  <div class="card-header">
    <p>這是一張卡片</p>
  </div>
  <div class="card-body">
    <p>描述：鼠標(biāo)懸浮時(shí)，整張紙聚焦的效果</p>
  </div>
  <div class="card-footer">
    <p>原理：改變 y 軸上的偏移和陰影擴(kuò)散半徑（第二、三個(gè)數(shù)字）</p>
  </div>
</div>
</body>
</html>

三、鼠標(biāo)懸浮仿紙張?zhí)鸬臉邮?/strong>

CSS怎么實(shí)現(xiàn)鼠標(biāo)滑過卡片上浮效果

代碼實(shí)現(xiàn)：

通過 box-shadow 屬性和 transform 屬性相結(jié)合。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠標(biāo)懸浮仿紙張?zhí)鸬臉邮?lt;/title>
</head>
<style type="text/css">
  /* 核心樣式 */
  .card {
    padding: 10px;
    width: 300px;
    height: 180px;
    background-color: #FFF;
    border: none;
    border-radius: 6px;
    -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 250ms cubic-bezier(.02, .01, .47, 1);
  }

  .card:hover {
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
    transform: translate(0,-5px);
    transition-delay: 0s !important;
  }

  .box-shadow {
    -webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
    box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15);
  }

  /* 非核心樣式 */
  .card-header {
    text-align: center;
  }

  .card-body, .card-footer {
    text-align: left;
  }
</style>
<body style="background: #e3e3e3;">
<div class="card box-shadow">
  <div class="card-header">
    <p>這是一張卡片</p>
  </div>
  <div class="card-body">
    <p>描述：鼠標(biāo)懸浮時(shí)，整張紙?zhí)鸬男Ч?lt;/p>
  </div>
  <div class="card-footer">
    <p>原理：增加 transform 屬性</p>
  </div>
</div>
</body>
</html>

四、鼠標(biāo)懸浮仿紙張升起的樣式（動(dòng)畫實(shí)現(xiàn)）

CSS怎么實(shí)現(xiàn)鼠標(biāo)滑過卡片上浮效果

代碼實(shí)現(xiàn)：

使用 @keyframes 規(guī)則創(chuàng)建動(dòng)畫，將一套 CSS 樣式逐漸變化為另一套樣式。
在懸浮狀態(tài)下執(zhí)行動(dòng)畫。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠標(biāo)懸浮仿紙張升起的樣式</title>
</head>
<style type="text/css">
  /* 核心樣式 */
  .card {
    padding: 10px;
    width: 300px;
    height: 180px;
    background-color: #FFF;
    border: none;
    border-radius: 6px;
    -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 250ms cubic-bezier(.02, .01, .47, 1);
  }

  .card:hover {
    animation: fly 0.0001s linear;
    animation-fill-mode: both;
  }

  @keyframes fly {
    0% {
      box-shadow: 2px 2px 2px #e2dede, -2px 2px 2px #e2dede;
    }
    100% {
      box-shadow: 6px 8px 12px #e2dede, -6px 8px 12px #e2dede;
    }
  }

  /* 非核心樣式 */
  .card-header {
    text-align: center;
  }

  .card-body, .card-footer {
    text-align: left;
  }
</style>
<body style="background: #e3e3e3;">
<div class="card box-shadow">
  <div class="card-header">
    <p>這是一張卡片</p>
  </div>
  <div class="card-body">
    <p>描述：鼠標(biāo)懸浮時(shí)，整張紙升起的效果</p>
  </div>
  <div class="card-footer">
    <p>原理：使用 @keyframes 規(guī)則創(chuàng)建動(dòng)畫</p>
  </div>
</div>
</body>
</html>

關(guān)于“CSS怎么實(shí)現(xiàn)鼠標(biāo)滑過卡片上浮效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手