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

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

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

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>

Короче говоря, вы хотите создать фон, подобный изображению, которое вы предоставляете с помощью CSS-градиента?

— 08.08.2024 05:29

@Шуо нет, я уже могу это сделать. Я решил попробовать изображение, на которое вы ссылаетесь, было создано после того, как оно было создано. Мне нужно несколько фоновых градиентов (теперь я выбираю изображения поверх CSS), и чтобы они менялись при нажатии на соответствующие созданные мною тематические карточки/кнопки (есть как видео, так и код)

— 08.08.2024 07:30

Мне трудно понять, чего вы на самом деле хотите достичь, и я не могу смотреть видео. Пишите правильными словами, чтобы каждый мог вас понять и помочь.

— 08.08.2024 08:09

javascript html jquery

08.08.2024 03:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

а) кнопка <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>

Большое вам спасибо, мне потребовалась минута, чтобы осмыслить это, но замечательно, что он позволяет использовать как изображения, так и CSS, я нашел время, чтобы просмотреть это, а также другой ответ от Шуо, позволяющий мне учиться больше и понять это, поэтому я многое взял из обоих ответов, так что большое спасибо!

— 08.08.2024 09:21

Я просто начал экспериментировать с этим, и все, я пытаюсь заставить его работать с несколькими разными фоновыми изображениями. Итак, на данный момент у меня есть множество разных тем, насчитывающих 10, и мне нужно, чтобы все они были взаимозаменяемыми, но это как первый шаг очень помогло!

— 08.08.2024 09:51

@Eliable, вы можете использовать мою концепцию с любым количеством изменений темы.

— 08.08.2024 09:53

честно говоря, я думал, что уже сделал, лол, но большое спасибо, и я пытаюсь, я, наверное, просто идиот, и не могу заставить третьего поменяться. кто бы мог подумать, что из всего, чего мне удалось достичь так далеко, ИСТОРИЯ была бы тем, что поставило бы меня в тупик, ммао.

— 08.08.2024 09:57

08.08.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>

Спасибо, Шуо, я просмотрел это и нашел время, чтобы все это понять, а также ответ «Смерть-это настоящая правда», позволивший мне узнать больше и понять это, поэтому я многое взял назад от обоих. ответы, так что большое спасибо, они оба работают и могут достичь того, чего я пытаюсь сделать. честно спасибо за помощь.

— 08.08.2024 09:24

08.08.2024 08:28