⊙﹏⊙CSS完成电脑鼠标滑过卡牌上浮实际效果的

日期：2021-01-21 类型：科技新闻我要分享

关键词：ps网页版在线制作，静态网页制作方法，微云网页版，怎么制作一个网页，django网页模板

基本原理

hover 的情况下对原素设定黑影：box-shadow，使其款式与常态化不一样。

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);

/* 插页(黑影向内) | x偏位量 | y偏位量 | 黑影色调 */
box-shadow: inset 5em 1em gold;

/* 随意总数的黑影，以分号隔开 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

特定单独 box-shadow 的使用方法：

得出2个、三个或四数量字值的状况。

假如只得出2个值，这2个值将被访问器表述为 x 轴上的偏位量和 y 轴上的偏位量。
假如得出了第三个值，这第三个值将被表述为模糊不清半径的尺寸。
假如得出了第四个值，这第四个值将被表述为拓展半径的尺寸。

可选择，插页(黑影向内) inset。
可选择，色调值。

下边例举几类款式，也是在本blog系统软件中有次采用的。

一、电脑鼠标飘浮仿纸型折起的款式

编码完成：

在 hover 情况提升了 transition 特性，进而造成渐变色的实际效果。

<!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 轴上的偏位和黑影外扩散半径（第二、三数量字）</p>
  </div>
</div>
</body>
</html>

二、电脑鼠标飘浮仿纸型聚焦点的款式

编码完成：

与上边的差别是调节了 box-shadow 特性的实际标值（ y 轴上的偏位和黑影外扩散半径，即第二、三数量字）。

<!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 轴上的偏位和黑影外扩散半径（第二、三数量字）</p>
  </div>
</div>
</body>
</html>

三、电脑鼠标飘浮仿纸型抬起的款式

编码完成：

根据 box-shadow 特性和 transform 特性紧密结合。

<!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 {
    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>叙述：电脑鼠标飘浮时，整张纸抬起的实际效果</p>
  </div>
  <div class="card-footer">
    <p>基本原理：提升 transform 特性</p>
  </div>
</div>
</body>
</html>

四、电脑鼠标飘浮仿纸型升起的款式（动漫完成）

编码完成：

应用 @keyframes 标准建立动漫，将一套 CSS 款式慢慢转变为另外一套款式。
在飘浮情况下实行动漫。

<!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 标准建立动漫</p>
  </div>
</div>
</body>
</html>

之上便是CSS完成电脑鼠标滑过卡牌上浮实际效果的实例的详尽內容，大量有关CSS完成电脑鼠标滑过卡牌上浮实际效果的材料请关心脚本制作之家其他有关文章内容！

上一篇：CSS⊙＾⊙线形渐变色的凹面矩形框衔接动画特效返回下一篇：没有了