Click here for free DL of the app version that can save data.

No:20315

Colour blender 1.1 With gradient and transparency ..ALL
Developer User8892｜Date and time 23/10/9 4:59:22
Build time 11.879 sec｜Game capacity 2.689KB｜

Script

Colour Blender 1.1

Выберите цвета:

Регулировка прозрачности:

Прозрачность: 0

Результат:

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
      }

#color1,
      #color2 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 10px;
      }

#result {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin: 10px auto;
        background: linear-gradient(to right, red, yellow);
      }

#transparency {
        width: 200px;
        height: 20px;
        margin: 10px auto;
        background: rgb(0, 0, 0);
      }

#transparency-slider {
        width: 200px;
      }

#transparency-value {
        text-align: center;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Colour Blender 1.1</h1>
    
    <h2>Выберите цвета:</h2>
    <input type="color" id="color1" value="#ff0000" />
    <input type="color" id="color2" value="#ffff00" />
    
    <h2>Регулировка прозрачности:</h2>
    <div id="transparency">
      <input type="range" min="0" max="1" step="0.1" value="0" id="transparency-slider" />
    </div>
    <p id="transparency-value">Прозрачность: 0</p>
    
    <h2>Результат:</h2>
    <div id="result"></div>

// Обновляем прозрачность в соответствии со значением ползунка
      transparencySlider.addEventListener('input', () => {
        const transparency = transparencySlider.value;
        result.style.opacity = transparency;
        transparencyValue.textContent = `Прозрачность: ${transparency}`;
      });

// Обновляем градиент в соответствии с выбранными цветами
      color1.addEventListener('input', updateGradient);
      color2.addEventListener('input', updateGradient);

// Инициализация
      updateGradient();
    </script>
  </body>
</html>