如何用CSS和JavaScript实现图片中所示的阴影效果及交互式阴影调整？-css教程-PHP中文网

如何用CSS和JavaScript实现图片中所示的阴影效果及交互式阴影调整？

霞舞

发布： 2025-02-22 13:16:18

原创

537人浏览过

阴影效果实现

图中阴影效果可以通过使用css中的box-shadow属性实现，该属性允许在元素周围创建阴影效果。

百度关键词搜索

若要在百度上搜索相关解决方案，可以输入以下关键词：

css阴影效果
html阴影
盒子阴影

代码实现

立即学习“Java免费学习笔记（深入）”；

以下代码展示了如何使用box-shadow属性创建图中所示的阴影效果：

影谱

汉语电影AI辅助创作平台

查看详情

<style>
  .box {
    width: 200px;
    height: 200px;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
  }
</style>

<div class="box"></div>

登录后复制

效果说明

该代码为box元素设置了阴影效果，阴影向下偏移5像素，向右偏移5像素，并使用了透明度为0.3的黑色。

交互式效果

使用javascript，可以实现交互式阴影效果，允许用户拖动阴影的手柄以改变阴影的形状和大小。以下代码演示了如何实现此效果：

<script>
  const box = document.querySelector('.box');

  // 获取阴影手柄
  const handle = box.querySelector('.handle');

  // 鼠标按下事件
  handle.addEventListener('mousedown', (e) => {
    // 设置阴影可移动
    box.movable = true;

    // 记录鼠标按下时的位置
    const y = e.clientY;
  });

  // 鼠标松开事件
  handle.addEventListener('mouseup', (e) => {
    // 设置阴影不可移动
    box.movable = false;
  });

  // 鼠标移动事件
  handle.addEventListener('mousemove', (e) => {
    if (box.movable) {
      // 获取鼠标移动的距离
      const dy = e.clientY - y;

      // 更新阴影的高度
      box.style.boxShadow = `0px ${dy}px 5px rgba(0, 0, 0, 0.3)`;
    }
  });
</script>

<div class="box">
  <div class="handle"></div>
</div>

登录后复制

以上就是如何用CSS和JavaScript实现图片中所示的阴影效果及交互式阴影调整？的详细内容，更多请关注php中文网其它相关文章！