用纯CSS3打造立体提示模块的效果实现(图) 附源码

我来详细讲解一下“用纯CSS3打造立体提示模块的效果实现(图) 附源码”的完整攻略。

1. 网页布局

首先，我们需要创建网页的基本布局。在这个例子中，我们需要用到一个按钮和一个含有提示信息的盒子。

<div class="container">
  <button class="btn">触发提示</button>
  <div class="tooltip">这里是提示信息</div>
</div>

2. CSS3样式

接下来，我们需要添加CSS3样式来创建立体效果。

2.1. 渐变背景

首先，我们来给提示盒子一个渐变的背景色。我们可以使用linear-gradient属性来做到这一点，具体的实现方法如下：

.tooltip {
  background: linear-gradient(rgb(230, 230, 230), rgb(204, 204, 204));
}

2.2. 阴影效果

接下来，我们需要添加阴影效果来模拟立体效果。我们可以使用box-shadow属性来实现，具体的代码如下：

.tooltip {
  box-shadow: -3px -3px 3px rgba(255,255,255,0.7), 3px 3px 3px rgba(0,0,0,0.3);
}

2.3. 旋转

我们还需要将提示盒子进行适当的旋转，这样才能更好地模拟立体效果。我们需要对提示盒子使用transform属性进行旋转，具体的实现如下：

.tooltip {
  transform: rotateY(45deg) rotateX(-45deg);
}

3. JS代码

最后，我们需要一些JavaScript代码来控制提示框的显示和隐藏。我们可以使用mouseover和mouseout事件来实现这一点，具体的代码如下：

const container = document.querySelector('.container');
const btn = document.querySelector('.btn');
const tooltip = document.querySelector('.tooltip');

btn.addEventListener('mouseover', () => {
  container.classList.add('show');
});

btn.addEventListener('mouseout', () => {
  container.classList.remove('show');
});

在这段代码中，我们将鼠标在按钮上移动和移开时的事件都绑定到了btn元素上。当鼠标移入按钮时，我们会添加一个名为show的CSS类到container元素上，并显示出提示框。当鼠标移开按钮时，我们会移除show类并隐藏提示框。

示例说明

为了更好地理解这个效果是如何实现的，这里为大家提供两个示例。

示例1：基本效果

这个示例会展示最基本的效果，就是当鼠标移入按钮时，提示框会以立体效果出现，并当鼠标移开时重新隐藏。

<!-- 示例1：基本效果 -->
<div class="container">
  <button class="btn">触发提示</button>
  <div class="tooltip">这里是提示信息</div>
</div>

<style>
  .container {
    position: relative;
    display: inline-block;
  }

  .btn {
    padding: 10px 20px;
    background: #43a047;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .tooltip {
    position: absolute;
    top: 110%;
    left: 50%;
    transform-origin: bottom center;
    padding: 10px;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease-out;
  }

  .show .tooltip {
    opacity: 1;
    transform: rotateY(0) rotateX(0);
  }

  .tooltip {
    background: linear-gradient(rgb(230, 230, 230), rgb(204, 204, 204));
    box-shadow: -3px -3px 3px rgba(255,255,255,0.7), 3px 3px 3px rgba(0,0,0,0.3);
    transform: rotateY(45deg) rotateX(-45deg);
    width: 100px;
    height: 80px;
    margin-left: -50px;
  }
</style>

<script>
  const container = document.querySelector('.container');
  const btn = document.querySelector('.btn');
  const tooltip = document.querySelector('.tooltip');

  btn.addEventListener('mouseover', () => {
    container.classList.add('show');
  });

  btn.addEventListener('mouseout', () => {
    container.classList.remove('show');
  });
</script>

示例2：嵌套效果

这个示例会展示如何将提示框嵌套到其他元素中，并且保留立体效果。

<!-- 示例2：嵌套效果 -->
<div class="container">
  <div class="wrapper">
    <div class="border"></div>
    <div class="content">
      <button class="btn">触发提示</button>
      <div class="tooltip">这里是提示信息</div>
    </div>
  </div>
</div>

<style>
  .container {
    position: relative;
    display: inline-block;
    margin: 50px;
  }

  .wrapper {
    position: relative;
    display: inline-block;
  }

  .btn {
    padding: 10px 20px;
    background: #43a047;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .tooltip {
    position: absolute;
    top: 110%;
    left: 50%;
    transform-origin: bottom center;
    padding: 10px;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease-out;
  }

  .show .tooltip {
    opacity: 1;
    transform: rotateY(0) rotateX(0);
  }

  .tooltip {
    background: linear-gradient(rgb(230, 230, 230), rgb(204, 204, 204));
    box-shadow: -3px -3px 3px rgba(255,255,255,0.7), 3px 3px 3px rgba(0,0,0,0.3);
    transform: rotateY(45deg) rotateX(-45deg);
    width: 100px;
    height: 80px;
    margin-left: -50px;
  }

  .border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid #43a047;
    border-radius: 4px;
  }

  .content {
    position: relative;
    display: inline-block;
    z-index: 1;
  }
</style>

<script>
  const container = document.querySelector('.container');
  const btn = document.querySelector('.btn');
  const tooltip = document.querySelector('.tooltip');

  btn.addEventListener('mouseover', () => {
    container.classList.add('show');
  });

  btn.addEventListener('mouseout', () => {
    container.classList.remove('show');
  });
</script>

这两个示例都可以在浏览器中运行并查看效果。如果您需要更详细的解释，请随时联系我。