我正在尝试从我正在进行前端开发的课程中完善练习。该项目是一个随机颜色渐变背景生成器。
我正在使用DOM操作来设置颜色,通过CSS类动画按钮等。
我对如何解决3件问题表示怀疑:
1-按下后,我的“随机化”按钮保持选中状态,并且周围有一个可见的蓝色选择框。因此,在用户单击按钮之前,它不会播放悬停动画。
2-我的HTML颜色输入元素的样式在Firefox和CSS动画中不起作用。我对修复兼容性不是很熟悉,所以无法想出这一点:/
3-要为两个颜色输入设置动画,我使用classList.toggle javascript方法切换动画CSS类。当然,正如方法名称所示,它会切换类,这意味着动画只会在用户单击随机化按钮时每隔一次播放一次。我尝试了很多“重新切换”课程的组合,但没有用。
我非常感谢对这些问题的任何意见,因为它在学习过程中对我有很大的帮助!
非常感谢您迄今为止的阅读,并提前感谢您的帮助!
代码如下(原谅我它仍然不是很漂亮或重构:P):
// variables
var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var rndmBtn = document.getElementById("randomizerButton");
var body = document.getElementById("gradient");
// generate a random color
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
// set the initial gradient on page load
function setGradient() {
body.style.background = "linear-gradient(to right, " + color1.value + ", " + color2.value + ")";
css.textContent = body.style.background + ";";
};
// picks two random colors, assigns them to variables and sets input value and BG as the new colors
function randomColors() {
var rndmCol1 = getRandomColor();
var rndmCol2 = getRandomColor();
document.querySelector(".color1").setAttribute("value", rndmCol1);
document.querySelector(".color2").setAttribute("value", rndmCol2);
document.getElementById("gradient").style.background = "linear-gradient(to right, " + rndmCol1 + ", " + rndmCol2 + ")";
css.textContent = body.style.background + ";";
};
// function for pressing the space bar
function pressSpace() {
if (event.keyCode === 32) {
randomColors();
animateButton();
}
};
// function for animated button
function animateButton() {
color1.classList.toggle("animated");
color2.classList.toggle("animated");
};
function animateButton2() {
color1.classList.toggle("animated");
color2.classList.toggle("animated");
};
// call function that sets initial gradient on page load
setGradient();
// event listeners for color picking
window.addEventListener("load", randomColors);
rndmBtn.addEventListener("click", animateButton);
color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
rndmBtn.addEventListener("click", randomColors);
window.addEventListener("keydown", pressSpace);
body {
font: 'Raleway', sans-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
top: 15%;
background: linear-gradient(to right, #73ff01, #0bebeb);
}
h1 {
font: 600 3.5em 'Raleway', sans-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
width: 100%;
}
h3 {
font: 900 1em 'Raleway', sans-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: none;
letter-spacing: 0.01em;
}
h2 {
font-family: 'Raleway', sans-serif;
}
#randomizerButton {
display: block;
margin: auto;
margin-top: 30px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
letter-spacing: .3em;
padding: 10px;
padding-right: 15px;
padding-left: 15px;
border: 1.5px solid;
border-color: rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.01);;
border-radius: 20px;
cursor: pointer;
}
#randomizerButton:hover {
background-color: rgba(0,0,0,0.2);;
color: rgb(0, 0, 0);
}
#randomizerButton:active {
background-color: rgba(0,0,0,0.4);;
color: rgb(0, 0, 0);
}
input[type=color]{
width: 40px;
height: 40px;
border: none;
border-radius: 10px;
background: none;
cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 10px;
}
.color1, .color2 {
border: none;
}
.colorInfo {
margin: auto;
width: 50%;
margin-top: 50px;
border: 1.5px solid;
border-color: rgba(0,0,0,0.5);
border-radius: 10px;
}
/* Input boxes Animation */
.animated {
-webkit-animation: animation 1000ms linear both;
animation: animation 1000ms linear both;
}
/* Generated with Bounce.js */
@-webkit-keyframes animation {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
3.6% { -webkit-transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
4.3% { -webkit-transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
7.21% { -webkit-transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
8.61% { -webkit-transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
12.91% { -webkit-transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
13.51% { -webkit-transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
17.22% { -webkit-transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
19.72% { -webkit-transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
26.03% { -webkit-transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
28.33% { -webkit-transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
32.23% { -webkit-transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
39.44% { -webkit-transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
44.74% { -webkit-transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
57.26% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
61.66% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
82.28% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
83.98% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
@keyframes animation {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
3.6% { -webkit-transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.705, 0.717, 0, 0, -0.551, 0.841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
4.3% { -webkit-transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.606, 0.804, 0, 0, -0.641, 0.776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
7.21% { -webkit-transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.208, 0.987, 0, 0, -0.897, 0.463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
8.61% { -webkit-transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.06, 1.007, 0, 0, -0.957, 0.319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
12.91% { -webkit-transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.179, 0.989, 0, 0, -1.005, 0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
13.51% { -webkit-transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.191, 0.986, 0, 0, -1.004, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
17.22% { -webkit-transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.198, 0.982, 0, 0, -0.997, -0.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
19.72% { -webkit-transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.163, 0.987, 0, 0, -0.995, -0.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
26.03% { -webkit-transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.053, 0.999, 0, 0, -0.998, -0.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
28.33% { -webkit-transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.024, 1, 0, 0, -0.999, -0.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
32.23% { -webkit-transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.007, 1, 0, 0, -1, -0.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
39.44% { -webkit-transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.017, 1, 0, 0, -1, 0.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
44.74% { -webkit-transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.009, 1, 0, 0, -1, 0.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
57.26% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
61.66% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
82.28% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
83.98% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
/* Bounce In */
.hvr-bounce-in {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>Gradient Background</title>
</head>
<body id="gradient">
<h1>Background Generator</h1>
<input class="color1 animated" type="color" name="color1" id="" value="#73ff01">
<input class="color2 animated" type="color" name="color2" id="" value="#0bebeb">
<button id="randomizerButton" class="hvr-bounce-in">Randomize!</button>
<div class="colorInfo">
<h2>Current CSS Background</h2>
<h3></h3>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
我可以帮你解决按钮问题。点击它后该按钮仍处于活动状态,并且要求您在取消激活之前再次单击该按钮=>这是我从您的问题中理解的。
要解决这个问题,请编写一个简单的函数,在每次单击时切换按钮,这样您就不需要再次单击它来停用它。
function toggleBtn () { this.rndmBtn = !this.rndmBtn};
这应该工作。然后在需要单击按钮的任何地方调用toggleBtn()。我希望这有帮助。