stopwatch
<!DOCTYPE html>
<html>
<head>
<title>Intervalo de Contador</title>
<script src="https://kit.fontawesome.com/cbcc2cb107.js" crossorigin="anonymous"></script>
<style>
body {
background: #111421;
animation: pocho 8s linear infinite;
}
@keyframes pocho{
0%{background: #111421;}
50%{background: #1b2035;}
100%{background: #111421;}
}
h1 {
color: #384370;
transition: 0.2s;
font-size: 45px;
}
.circulo {
padding: 20px;
border-radius: 50%;
border: 2px solid #384370;
width: 250px; height: 250px;
display: flex;
justify-content: center;
align-items: center;
margin: 20% auto;
animation: circuloan 4s linear infinite;
}
@keyframes circuloan{
0%{border: 2px solid #4e5c9b; box-shadow: 0px 0px 10px #8098ffc0;}
50%{border: 2px solid #384370; box-shadow: 0px 0px 5px #8098ff;}
100%{border: 2px solid #4e5c9b; box-shadow: 0px 0px 10px #8098ffc0;}
}
.botones {
margin: 50% auto;
width: 80%;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 28px;
color: #384370;
height: 50px;
}
.botones i{
transition: 0.3s;
}
.botones i:active{
color: #5767ad;
transform: scale(1.05);
}