결과
코드
<html>
<head>
<style>
body {
background-color: #ffffff;
margin: 5%;
}
.blink_me {
animation: blinker 2s linear infinite;
width: 5px;
height: 5px;
display: inline-block;
border: 1px solid rgb(39, 228, 39);
background-color: rgb(39, 228, 39);
border-radius: 100%;
}
.blink_me_yellow {
animation: blinker 2s linear infinite;
width: 5px;
height: 5px;
display: inline-block;
border: 1px solid rgb(228, 206, 39);
background-color: rgb(228, 206, 39);
border-radius: 100%;
}
.blink_me_red {
animation: blinker 2s linear infinite;
width: 5px;
height: 5px;
display: inline-block;
border: 1px solid rgb(225, 64, 28);
background-color: rgb(225, 64, 28);
border-radius: 100%;
}
@keyframes blinker {
50% {
opacity: 0.0;
}
}
</style>
</head>
<body>
<span class='blink_me'></span>
<span class='blink_me_yellow'></span>
<span class='blink_me_red'></span>
</body>
</html>
728x90
'플그래밍 > 씨에쓰으' 카테고리의 다른 글
| [CSS] 사파리 backdrop-filter 적용 에러 (0) | 2023.06.23 |
|---|