window.onload = load;
let N = 10;
let K = 0;
let play = true;
function load() {
var stop = document.getElementById("stop");
stop.onclick = RectStop;
var start = document.getElementById("start");
start.onclick = Rect;
while(K!=N){
let div = document.createElement("div");
div.className = "rectangle";
var area = document.getElementById("rectanglearea");
area.append(div);
var w = document.getElementById("rectanglearea").offsetWidth;
var h = document.getElementById("rectanglearea").offsetHeight;
var dx = randomInteger(0, w-100);
var dy = randomInteger(0, h-100);
$('.rectangle').eq(K).css('top',dy);
$('.rectangle').eq(K).css('left',dx);
$('.rectangle').eq(K).css('top',dy);
$('.rectangle').eq(K).css('left',dx);
div.setAttribute("onclick", "this.remove()");
K++;
}
K=0;
}
function randomInteger(min, max) {
var rand = min - 0.5 + Math.random() * (max - min + 1)
rand = Math.round(rand);
return rand;
}
function RectStop(){
play = true;
}
function Rect()
{
if(play==true){
play = false;
changeColor();
function changeColor(){
while(K!=N){
color = 'rgb('+randomInteger(0,255)+','+ randomInteger(0,255)+','+ randomInteger(0,255)+")";
$('.rectangle').eq(K).css('background-color',color);
K++;
}
K=0;
if(play==false){
setTimeout(changeColor,1000);
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Цветные прямоугольники</title>
<link href="rect.css" type="text/css" rel="stylesheet" />
<script src="rect.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
</head>
<body>
<div id="rectanglearea"></div>
<div>
<button id="start">Пуск!</button> <button id="stop">Стоп</button>
</div>
</body>
</html>
#rectanglearea {
width: 700px;
height: 500px;
border: 2px solid black;
position: relative;
}
.rectangle {
width: 50px;
height: 50px;
border: 2px solid black;
position: absolute;
}
.rectangle{
transform: translate(0, 10px);
}
@keyframes shake-rectangle{
0% { transform: translate(-1px, 9px); }
33% { transform: translate(-1px, 11px); }
66% { transform: translate(1px, 11px); }
100% { transform: translate(1px, 9px); }
}
.rectangle:hover {
animation: shake-rectangle .16s infinite alternate;
}
Как реализовать анимацию без CSS? То есть необходима тряска элементов, которая имеется сейчас но без CSS. Только чистый JS код.
