CSS can be used to create basic animations for Web Based Dashboards to attract user attention.
alertStyle.css
.alertBox {
width: 100%;
height: 40px;
background-color: white;
animation-name: alert;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes alert {
from {background-color: red;}
to {background-color: white;}
}
.alertSquare {
width: 40px;
height: 40px;
margin-left: auto;
margin-right: auto;
background-color: white;
animation-name: alert;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.alertMessage {
animation-name: alertFont;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes alertFont {
from {font-size: 40px;}
to {font-size: 200px;}
}
.alertText {
text-align: center;
font-size: 35px;
}
alert.html
html>
<head>
<link rel="stylesheet" href="alertStyle.css" />
</head>
<body>
<div class="alertBox"></div>
<br>
<div class="alertBox">
<p class="alertText"> 95 Degrees</p>
</div>
<br>
<div class="alertSquare">
<p class="alertText">95</p>
</div>
<br>
<p class="alertMessage"> HELP!!!</p>
</body>
</html>
Be the first to comment