ГлавнаяЯзыки программирования Javascript Изменение значений градиента при нажатии/нажатии
СтатьиЯзыки программирования
PHPJavascriptPythonC#JavaBashShellPowerShellTypeScriptC++CSQLHTMLCSSXMLGoRubyHaskellErlang
Базы данныхСистемы контроля версийJavascript фреймворкиБэкэнд фреймворкиПакетные менеджерыГенераторы статических сайтовПрепроцессоры CSS

Изменение значений градиента при нажатии/нажатии

Ссылка покажет вам, чего я пытаюсь достичь

(это не реальный результат. Это видео — концепция моей цели)

https://thewikihow.com/video_U_MggL4-AMc

Мне действительно не помешало бы в этом помочь, лол

(Мне нужно иметь возможность сделать это для НЕСКОЛЬКИХ разных градиентов индивидуально)

Я пробовал использовать Vars с цветами и использовать прослушиватель событий, который работал в коде со сплошными цветами, а не с градиентами, но не работал на моем реальном сайте. (ранее у меня это не работало.

Теперь я попытался использовать фоновые изображения и добился некоторого успеха. Сейчас я пытаюсь понять, как я могу вернуться назад и четвертым с цветами темы, а также установить масштаб фона, полученного сценарием. (однако я бы предпочел оригинальный метод изменения значений градиента при нажатии)

вот ссылка на CodePen

<!DOCTYPE html>
<html>
<head>
<style> 
#Background {
  width: 1920px;
  height: 1080px;
  background-image: url("https://previews.dropbox.com/p/thumb/ACUv6h-QQ6PskOhByDXYwHCGjtk1ar3JN5ufhLEEwKxFAJvxxqUyCHMT-DMbK318IVJ_Zn2ustYtg-CcpEPp3egLeHMJoH_teEMKWVjtmw3VSeDvSJpwcqCk89QsDdKjbL4Q9cuPviRrw--RPRXN-uIDTcQYQfkyiQyQT0VMVN5FOwsblLq222dzHRW-YL9huPTGqgmWYNVOc36wpcNva2sVah0UVRLxjeSiGEbF4RPZijO2tp0kYovzRsuybNjkvHbxK4SgO_WGPjebe2Uh9OzoLmygGI-zItBzoqLk9dzLe0Bo6jMQr7v_8fDX3VnJpHNAOMZstzdmXlhQ_INGmlqaaCoTM175t6pYfVxUy_s2qxRotclVumgogKWY2RwUyqk/p.png");
}

  .Embers-Theme-Card {
    --perspective: 1400px;
    --rotateX: 0;
    --rotateY: 0;
    --angle: 6.5deg;
  
    position: relative;
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
    padding: 2rem;
    aspect-ratio: 1 / 2;
    background-image: url("http://localhost:10060/images/Embers.png");
    background-size: cover;
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(var(--rotateY));
    transition: transform 350ms ease;

    width: 180px;
    height: 75px;
    border-radius: 20px;
    left:800px;
    Top: 100px;
  }
  
  .Embers-Theme-Card > :where(h1, p) {
    background: rgba(221, 221, 221, 0.432);
    margin: 0;
    padding: 0.5rem;
  }
  
  .mouse-position-tracker {
    position: absolute;
    inset: 0;
  }
  
  .mouse-position-tracker > div {
    position: absolute;
    width: calc(100% / 3);
    height: calc(100% / 3);
    z-index: 2;
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
    --rotateX: var(--angle);
    --rotateY: calc(var(--angle) * -1);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
    --rotateX: var(--angle);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
    --rotateX: var(--angle);
    --rotateY: var(--angle);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
    --rotateY: calc(var(--angle) * -1);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
    --rotateY: var(--angle);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: calc(var(--angle) * -1);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
    --rotateX: calc(var(--angle) * -1);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: var(--angle);
  }
  
  /* 1st, 4th, 7th */
  .mouse-position-tracker > div:nth-of-type(3n - 2) {
    left: 0;
  }
  /* 2nd, 5th, 8th */
  .mouse-position-tracker > div:nth-of-type(3n - 1) {
    left: calc(100% / 3);
  }
  /* 3rd, 6th, 9th */
  .mouse-position-tracker > div:nth-of-type(3n) {
    right: 0;
  }
  
  /* 1-3 */
  .mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
    top: 0;
  }
  
  /* 4-6 */
  .mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
    top: calc(100% / 3);
  }
  
  /* 7-9 */
  .mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
    bottom: 0;
  }
  
  /* general styling */
  :root {
    --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
      0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
      0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
      0px 37px 80px rgba(0, 0, 0, 0.07);
  }

  .Embers-Theme-Card
  {
    cursor:pointer;
  }
</style>
</head>
<body>


<div id = "Background">
        <div class = "Embers-Theme-Card"<button onclick = "myFunction()"></button>
  <h1>Embers</h1>


  <div class = "mouse-position-tracker">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
</div>


<script>
function myFunction() {
   document.getElementById("Background").style.backgroundImage = "url(https://previews.dropbox.com/p/thumb/ACX0qlkI5_4X1wx38BE5OYUXzWxSZf1IDvUqHhiRXEWE8XbQf6t-OTWScbY8iUOJi1Zw-v0B89055hqh7J87eIpVkC3gfh4ceH5AATuzh95VVChO9wD1TDCYsgQN9Qc6XDWT2p9x3_BG8zhGu6tuaCxreeS_NJDzAa-W3VU38f7L0Ik2lrn-1KI19pu8caW2DkBL1aY7-QePYnjLvaYmGvCrk4ZUYu27ITHJMQYtJd_VsEwCyp3-CLABikGcO0gtaeo1GrhtAjKjC6QRxnmCz3A-uCbb-aF9aJyxkOs3Mues2Pi8H8PNhZ3sZ7pQqbqhChdgg4BvXJPUfeK5RZhWa6jxsXVgYnbTaqEjLWWO7ONvOw/p.png)";
}

</script>

</body>
</html>

🤔 А знаете ли вы, что...
JavaScript поддерживает модульную структуру, что способствует организации кода на больших проектах.

[РЕШЕНО]Перейти к решению
Eliable, 8 августа 2024 г., 03:57
2
51
2
Javascript273878 вопросовHtml113619 вопросовJquery62551 вопрос

Ответы:

Решено

Некоторые проблемы в вашем коде:

а) кнопка <div> вокруг не закрыта.

Моя идея сделать это (способ jQuery):

а) Примените исходный CSS к прямому body, а не к его id. Чтобы вы могли перезаписать его дальше.

б) Примените onclick непосредственно к родительскому элементу div и также передайте его объект в функцию.

в) Добавьте атрибут data-class в каждый родительский элемент div и добавьте к нему соответствующий класс.

г) при вызове функции получите это значение data-class и добавьте его к <body>.

д) На основе этого класса либо добавьте background-imgae CSS, либо используйте gradient Css.

Пример рабочего фрагмента:

function myFunction(obj) {
  $('body#Background').removeClass().addClass($(obj).data('class'));
}
body {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
  position: absolute;
  margin: auto;
}

.Embers-Theme-Card-Gradient{
  background-image: linear-gradient(red, yellow);
  position:relative;
}

.Darkmode-Theme-Card-Gradient{
  background-image: linear-gradient(black, green);
  position:relative;
}

.Embers-Theme-Card {
  --perspective: 1400px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 6.5deg;
  position: relative;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
  padding: 2rem;
  aspect-ratio: 1 / 2;
  background-image: url("https://i.postimg.cc/wBDMSNcj/Embers.png");
  background-size: cover;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
  width: 180px;
  height: 75px;
  border-radius: 20px;
  margin: auto;
  top: 100px;
}

.Embers-Theme-Card> :where(h1,
p) {
  background: rgba(221, 221, 221, 0.432);
  margin: 0;
  padding: 0.5rem;
}

.mouse-position-tracker {
  position: absolute;
  inset: 0;
}

.mouse-position-tracker>div {
  position: absolute;
  width: calc(100% / 3);
  height: calc(100% / 3);
  z-index: 2;
}

.Embers-Theme-Card:has(.mouse-position-tracker>div:nth-child(1):hover) {
  --rotateX: var(--angle);
  --rotateY: calc(var(--angle) * -1);
}

.Embers-Theme-Card:has(.mouse-position-tracker>div:nth-child(2):hover) {
  --rotateX: var(--angle);
}

.Embers-Theme-Card:has(.mouse-position-tracker>div:nth-child(3):hover) {
  --rotateX: var(--angle);
  --rotateY: var(--angle);
}

.Embers-Theme-Card:has(.mouse-position-tracker>div:nth-child(4):hover) {
  --rotateY: calc(var(--angle) * -1);
}

.Embers-Theme-Card:has(.mouse-position-tracker>div:nth-child(6):hover) {
  --rotateY: var(--angle);
}

.Embers-Theme-Card:has(.mouse-position-tracker>div:nth-child(7):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: calc(var(--angle) * -1);
}

.Embers-Theme-Card:has(.mouse-position-tracker>div:nth-child(8):hover) {
  --rotateX: calc(var(--angle) * -1);
}

.Embers-Theme-Card:has(.mouse-position-tracker>div:nth-child(9):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: var(--angle);
}


/* 1st, 4th, 7th */

.mouse-position-tracker>div:nth-of-type(3n - 2) {
  left: 0;
}


/* 2nd, 5th, 8th */

.mouse-position-tracker>div:nth-of-type(3n - 1) {
  left: calc(100% / 3);
}


/* 3rd, 6th, 9th */

.mouse-position-tracker>div:nth-of-type(3n) {
  right: 0;
}


/* 1-3 */

.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
  top: 0;
}


/* 4-6 */

.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
  top: calc(100% / 3);
}


/* 7-9 */

.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
  bottom: 0;
}


/* general styling */

 :root {
  --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}

.Embers-Theme-Card {
  cursor: pointer;
}

#Background2 {
  width: 1920px;
  height: 1080px;
  background-image: url("https://previews.dropbox.com/p/thumb/ACX0qlkI5_4X1wx38BE5OYUXzWxSZf1IDvUqHhiRXEWE8XbQf6t-OTWScbY8iUOJi1Zw-v0B89055hqh7J87eIpVkC3gfh4ceH5AATuzh95VVChO9wD1TDCYsgQN9Qc6XDWT2p9x3_BG8zhGu6tuaCxreeS_NJDzAa-W3VU38f7L0Ik2lrn-1KI19pu8caW2DkBL1aY7-QePYnjLvaYmGvCrk4ZUYu27ITHJMQYtJd_VsEwCyp3-CLABikGcO0gtaeo1GrhtAjKjC6QRxnmCz3A-uCbb-aF9aJyxkOs3Mues2Pi8H8PNhZ3sZ7pQqbqhChdgg4BvXJPUfeK5RZhWa6jxsXVgYnbTaqEjLWWO7ONvOw/p.png");
}

.Darkmode-Theme-Card {
  --perspective: 1400px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 5deg;
  position: relative;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
  padding: 2rem;
  aspect-ratio: 1 / 2;
  background-image: url("https://i.postimg.cc/Px4xqk7G/DarkMode.png");
  background-size: cover;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
  width: 180px;
  height: 75px;
  border-radius: 20px;
  margin: auto;
  top: 110px;
}

.Darkmode-Theme-Card> :where(h1,
p) {
  background: rgba(221, 221, 221, 0.432);
  margin: 0;
  padding: 0.5rem;
}

.mouse-position-tracker {
  position: absolute;
  inset: 0;
}

.mouse-position-tracker>div {
  position: absolute;
  width: calc(100% / 3);
  height: calc(100% / 3);
  z-index: 2;
}

.Darkmode-Theme-Card:has(.mouse-position-tracker>div:nth-child(1):hover) {
  --rotateX: var(--angle);
  --rotateY: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker>div:nth-child(2):hover) {
  --rotateX: var(--angle);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker>div:nth-child(3):hover) {
  --rotateX: var(--angle);
  --rotateY: var(--angle);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker>div:nth-child(4):hover) {
  --rotateY: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker>div:nth-child(6):hover) {
  --rotateY: var(--angle);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker>div:nth-child(7):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker>div:nth-child(8):hover) {
  --rotateX: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker>div:nth-child(9):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: var(--angle);
}


/* 1st, 4th, 7th */

.mouse-position-tracker>div:nth-of-type(3n - 2) {
  left: 0;
}


/* 2nd, 5th, 8th */

.mouse-position-tracker>div:nth-of-type(3n - 1) {
  left: calc(100% / 3);
}


/* 3rd, 6th, 9th */

.mouse-position-tracker>div:nth-of-type(3n) {
  right: 0;
}


/* 1-3 */

.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
  top: 0;
}


/* 4-6 */

.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
  top: calc(100% / 3);
}


/* 7-9 */

.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
  bottom: 0;
}


/* general styling */

 :root {
  --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}

.Darkmode-Theme-Card {
  cursor: pointer;
}

#SettingsBox {
  position: relative;
  height: 850px;
  width: 1400px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  margin: auto;
  top: 50px;
  box-shadow: -5px 5px 15px #111a;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<body id = "Background">
  <div id = "SettingsBox">
    <div>

      <div class = "Embers-Theme-Card" data-class = "Embers-Theme-Card-Gradient" onclick = "myFunction(this)">
        <h1>Embers</h1>

        <div class = "mouse-position-tracker">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

      <div class = "Darkmode-Theme-Card" data-class = "Darkmode-Theme-Card-Gradient" onclick = "myFunction(this)">
        <h1>Darkmode</h1>

        <div class = "mouse-position-tracker">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

    </div>
  </div>
</body>
Death-is-the-real-truth, 8 августа 2024 г., 08:13

Добавьте атрибут данных цветов, которые вы хотите использовать в btn, затем прочитайте атрибут данных в событии щелчка и измените переменные CSS.

const changeTheme = ({ currentTarget }) => {
  document.body.style.setProperty("--clr1", currentTarget.dataset.clr1);
  document.body.style.setProperty("--clr2", currentTarget.dataset.clr2);
};
document.querySelectorAll(".theme").forEach((btn) => btn.addEventListener("click", changeTheme));
body {
  height: 100vh;
  --clr1: #4e0000;
  --clr2: #b50000;
}

body {
  background: repeating-linear-gradient(45deg, black, black 5px, transparent 5px, transparent 10px), linear-gradient(0deg, var(--clr1), var(--clr2));
}
<button class = "theme" data-clr1 = "#4e0000" data-clr2 = "#b50000">Embers</button>
<button class = "theme" data-clr1 = "#202020" data-clr2 = "#575757">Darkmode</button>
Shuo, 8 августа 2024 г., 08:28

Интересные вопросы для изучения

Не могу запустить сервер разработки Nuxt 3, не могу найти модуль @volar/typescript/lib/node/proxyCreateProgramПросто нужна небольшая помощь для моей панели поискаBootstrap 5 щелчок внутри раскрывающегося списка не должен открываться, закройте раскрывающийся списокНайти подстроку без учета регистра в массиве объектов внутри массива объектов в JavaScriptМожет ли объект URL js быть длинным числом?Просто нужна небольшая помощь для моей панели поискаКак использовать/обрабатывать математическую формулу, сохраненную в формате JSON, в JavaScriptКак создать динамический интерфейс с вкладкамиПочему этот компонент не заполняет всю ширину?HTML-таблица с PowerShell