1.模拟告警点闪烁
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟告警点闪烁</title>
<style>
@keyframes warn {
0% {
transform: scale(0);
opacity: 0.0;
}
25% {
transform: scale(0);
opacity: 0.1;
}
50% {
transform: scale(0.1);
opacity: 0.3;
}
75% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "warn" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.1);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
body{
text-align: -webkit-center;
margin-top: 200px;
}
.container {
position: relative;
width: 40px;
height: 40px;
border: 0px solid blue;
}
.small {
position: absolute;
width: 6px;
height: 6px;
left: 15px;
top: 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border: 2px solid red;
border-radius: 20px;
z-index: 2;
}
.animate {
position: absolute;
width: 24px;
height: 24px;
left: 2px;
top: 2px;
border: 6px solid red;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 1s ease-out;
-moz-animation: warn 1s ease-out;
animation: warn 1s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="container">
<div class="small"></div>
<div class="animate"></div>
</div>
<div class="container">
<div class="small"></div>
<div class="animate"></div>
</div>
<div class="container">
<div class="small"></div>
<div class="animate"></div>
</div>
</body>
</html>
网友评论