반응형
- 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:5em auto 0;
-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 20em;
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
}
}
@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);
}
}
@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
}
}
@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)
}
}
@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' 카테고리의 다른 글
| 마지막이 ```/ 로 끝나면 error 나는거 해결합시다. (3) | 2024.08.30 |
|---|---|
| 인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog) (4) | 2024.08.30 |
| React 사용 설정하기 (esbuild) with TypeScript (0) | 2024.08.29 |
| 말풍선, inRef 만들기, 만드는 법 in HTML by JavaScript (아랫쪽, 윗쪽, 왼쪽, 오른쪽 말풍선) - 안내서 만들기 (0) | 2024.08.26 |
| week4 위클리 페이퍼 (리액트가 렌더링 하는 방식을 설명, 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명, React 에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명) (1) | 2024.08.25 |
| 인스타그램 (Instagram) 퍼오는 법 (2) | 2024.08.24 |
| Encode/Unescape and Decode/Escape URI Component (0) | 2024.08.20 |
