반응형
- 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
반응형
http/https 링크및 수식 (\ [ Outline 수식 \ ],\ ( inline 수식 \ )::\이후 띄어쓰기 없이) 을 넣으실 수 있습니다. 또한 code 는```시작,```/마지막으로 감싸 주시면 pretty-printed 되어서 나타납니다.```[.lang-js.scrollable.no-linenums]같이 언어를 선택해 주실수도 있고, 긴 수식의 경우 scroll bar 가 생기게 만드실 수도 있습니다. .no-linenums 로 line numbering 을 없앨수도 있습니다.댓글 입력 후 rendering 된 형태를 보시려면, Handle CmtZ (단축키: N) 버튼을 눌러주세요. 오른쪽 아래 Floating Keys 에 있습니다. 아니면 댓글 젤 아래에 버튼이 있습니다.