반응형
- 2023-09-10 : First posting.
```[.linenums.lang-html]
<style>
.loading {text-align:center}
.loading .outerCircle {
background-color:transparent;
border:8px solid rgba(97,82,72,0.9);
opacity:.9;
border-right:5px solid transparent;
border-left:5px solid transparent;
border-radius:100px;
width:110px;
height:110px;
margin:0 auto;
-moz-animation:spinPulse 5s infinite ease-in-out;
-webkit-animation:spinPulse 5s infinite ease-in-out
}
.loading .innerCircle {
background-color:transparent;
border:5px solid rgba(189,215,60,0.6);
opacity:.9;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-radius:100px;
top:-100px;
width:90px;
height:90px;
margin:0 auto;
position:relative;
-moz-animation:spinoffPulse 3s infinite linear;
-webkit-animation:spinoffPulse 3s infinite linear
}
@-moz-keyframes spinPulse {
0% {
-moz-transform:rotate(160deg);
opacity:0;
box-shadow:0 0 1px #bdd73c
}
50% {
-moz-transform:rotate(145deg);
opacity:1
}
100% {
-moz-transform:rotate(-320deg);
opacity:0
}
}
@-moz-keyframes spinoffPulse {
0% {
-moz-transform:rotate(0deg)
}
100% {
-moz-transform:rotate(360deg);
}
}
@-webkit-keyframes spinPulse {
0% {
-webkit-transform:rotate(160deg);
opacity:0;
box-shadow:0 0 1px #bdd73c
}
50% {
-webkit-transform:rotate(145deg);
opacity:1
}
100% {
-webkit-transform:rotate(-320deg);
opacity:0
}
}
@-webkit-keyframes spinoffPulse {
0% {
-webkit-transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg)
}
}
</style>
<div class="loading"><div class="outerCircle"></div><div class="innerCircle"></div></div>
```/
## RRA
반응형
'[IT/Programming] > HTML related' 카테고리의 다른 글
| Implementing multicursor like sublime text Ctrl+D in HTML javascript textarea (1) | 2023.10.26 |
|---|---|
| Javascript (자바스크립트): async 와 await (0) | 2023.10.25 |
| Neighbors points plot plan (svg) (2) | 2023.10.25 |
| AWS server|서버 에서 GitHub 가 너무 느려질때 해결 방법. (0) | 2023.10.25 |
| HTML docuK format ver. 2.3 (2023-10-25) (4) | 2023.10.25 |
| 트위터 트윗 퍼오기 (Embedding Twitter Tweet) (0) | 2023.10.25 |
| 인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog) (3) | 2023.10.25 |