Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- body {
- overflow: hidden;
- }
- #lights {
- border: 5px solid;
- width: 90px;
- background-color: snow;
- border-radius: 8px;
- padding: 10px;
- position: absolute;
- left: -80px;
- top: -80px;
- }
- #box {
- position: relative;
- margin: 100px 200px;
- width: 100px;
- height: 400px;
- border-radius: 0 60px 0 0;
- border: 20px solid;
- border-left: none;
- border-bottom: none;
- }
- .color {
- margin: 5px 15px;
- border: 30px solid;
- border-radius: 50%;
- width: 0;
- }
- </style>
- </head>
- <body>
- <section id='box'>
- <section id='lights'>
- <div class='color'></div>
- <div class='color'></div>
- <div class='color'></div>
- </section>
- </section>
- <script>
- x = document.getElementsByClassName("color");
- colors = ["red", "orange", "green"];
- setTimeout(traffic = () => {
- x[2].style.border = "30px solid " + colors[2];
- setTimeout(() => {
- x[2].style.border = "30px solid";
- x[1].style.border = "30px solid " + colors[1];
- setTimeout(() => {
- x[1].style.border = "30px solid";
- x[0].style.border = "30px solid " + colors[0];
- setTimeout(() => {
- x[0].style.border = "30px solid";
- traffic()
- }, 3000);
- }, 3000);
- }, 3000);
- }, 3000);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement