JavaScript - 让 Div 看起来像是带有框阴影的 3D 按钮

问题描述 投票：0回答：1
javascript css dom
1个回答
0
投票

这似乎解决了它：

1) 修改 javascript 以将函数也应用于 
.touch-button-click
类

2) 使用 CSS 伪类 
:hover
和 
:active
为 HTML 按钮单击设置动画

3) 您在 CSS 中缺少 
position: relative
.touch-button-click

例如：

const touchButtons = document.querySelectorAll(".touch-button");
const touchButtonsClick = document.querySelectorAll(".touch-button-click");

let draggedElement = null;

function toggleTouchButtonColor(event) {

  if (event.target.classList.contains("touch-button")) {

    event.target.classList.add("touch-button-click");

    event.target.classList.remove("touch-button");

  } else if (event.target.classList.contains("touch-button-click")) {

    event.target.classList.add("touch-button");

    event.target.classList.remove("touch-button-click");

  }

}

function mouseDownTouchButton(event) {

  event.target.style.top = "5px";

  event.target.style.left = "5px";

}

function mouseUpTouchButton(event) {

  event.target.style.top = "0px";

  event.target.style.left = "0px";

}

touchButtons.forEach(function(touchButton) {

  touchButton.addEventListener("mousedown", mouseDownTouchButton);

  touchButton.addEventListener("mouseup", mouseUpTouchButton);

  touchButton.addEventListener("click", toggleTouchButtonColor);

});

touchButtonsClick.forEach(function(touchButtonClick) {

  touchButtonClick.addEventListener("mousedown", mouseDownTouchButton);

  touchButtonClick.addEventListener("mouseup", mouseUpTouchButton);

  touchButtonClick.addEventListener("click", toggleTouchButtonColor);

});
#touch-buttons-grid {
  width: 90%;
  height: 200px;
  margin: 10px auto;
  margin-top: 20px;
  background-color: rgba(220, 200, 10, 0.5);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(3, 30%);
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.touch-button,
.touch-button-spots {
  width: 40%;
  height: 50px;
  margin: 5px auto;
  padding: 5px;
  border-radius: 10px;
  font-size: 20px;
  text-align: center;
  z-index: 5;
  position: relative;
}

.touch-button {
  background-color: rgba(60, 95, 240, 0.5);
  box-shadow: 5px 5px rgba(60, 95, 240, 0.25);
}

.touch-button-click {
  width: 40%;
  height: 50px;
  margin: 5px auto;
  padding: 5px;
  border-radius: 10px;
  background-color: rgba(220, 41, 10, 1);
  box-shadow: 5px 5px rgba(220, 41, 10, 0.5);
  font-size: 20px;
  text-align: center;
  z-index: 5;
  position: relative;
}

.touch-button-spots {
  width: 50%;
  height: 60px;
  background-color: rgba(61, 54, 54, 0.75);
  box-shadow: 5px 5px rgba(61, 54, 54, 0.5);
}

.touch-button:hover {
  background-color: #0a5699;
  filter: brightness(0.85);
}

.touch-button-click:hover {
  background-color: #9b1d07;
  filter: brightness(0.85);
}

.touch-button:active,
.touch-button-click:active {
  filter: brightness(0.65);
  box-shadow: unset;
  transform: translateY(1px);
}
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Dynamic and Draggable Divs</title>

  <link rel="stylesheet" href="dynamicDivs.css">

</head>

<body>

  <div id="touch-buttons-grid">

    <div class="touch-button" draggable="true">Block 1</div>

    <div class="touch-button" draggable="true">Block 2</div>

    <div class="touch-button" draggable="true">Block 3</div>

  </div>

  <script src="dynamicDivs.js"></script>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.