欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實現(xiàn)鼠標滑過卡片上浮效果的示例

  發(fā)布時間：2020-11-02 16:53:39   作者：文淵   我要評論
這篇文章主要介紹了CSS實現(xiàn)鼠標滑過卡片上浮效果的示例，幫助大家更好的利用CSS制作網(wǎng)頁特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下

原理

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

box-shadow 表達式參見 MDN：

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

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

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

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

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

指定單個 box-shadow 的用法：

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

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

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

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

一、鼠標懸浮仿紙張折起的樣式

代碼實現(xiàn)：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠標懸浮仿紙張折起的樣式</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>描述：鼠標懸浮時，類似紙張折起的效果</p>
  </div>
  <div class="card-footer">
    <p>原理：改變 y 軸上的偏移和陰影擴散半徑（第二、三個數(shù)字）</p>
  </div>
</div>
</body>
</html>

二、鼠標懸浮仿紙張聚焦的樣式

代碼實現(xiàn)：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠標懸浮仿紙張聚焦的樣式</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>描述：鼠標懸浮時，整張紙聚焦的效果</p>
  </div>
  <div class="card-footer">
    <p>原理：改變 y 軸上的偏移和陰影擴散半徑（第二、三個數(shù)字）</p>
  </div>
</div>
</body>
</html>

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

代碼實現(xiàn)：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠標懸浮仿紙張?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>描述：鼠標懸浮時，整張紙?zhí)鸬男Ч?lt;/p>
  </div>
  <div class="card-footer">
    <p>原理：增加 transform 屬性</p>
  </div>
</div>
</body>
</html>

四、鼠標懸浮仿紙張升起的樣式（動畫實現(xiàn)）

代碼實現(xiàn)：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠標懸浮仿紙張升起的樣式</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>描述：鼠標懸浮時，整張紙升起的效果</p>
  </div>
  <div class="card-footer">
    <p>原理：使用 @keyframes 規(guī)則創(chuàng)建動畫</p>
  </div>
</div>
</body>
</html>

以上就是CSS實現(xiàn)鼠標滑過卡片上浮效果的示例的詳細內(nèi)容，更多關(guān)于CSS實現(xiàn)鼠標滑過卡片上浮效果的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論