BEANTHERAMBO
NO SONG PLAYING

Google Font - Creepstar

Bookmark the Google font and have preview here...

Creepstar Font Preview:

Creepstar

CODE
html
1
2
3
<div class="font-wrap">
<h3>Creepstar</h3>
</div>
css
1
2
3
4
5
6
7
8
9
10
11
@import url('https://fonts.googleapis.com/css?family=Creepster&display=swap');

.font-wrap{
font-family: 'Creepster', cursive;
text-align: center;
}
.font-wrap h3{
font-size: 48px;
text-align: center;
margin: 0 auto;
}

Code Example Test

Create a demo area (html, css, javascript) in the post content

Install the plugin

1
npm install hexo-tag-demo --save

More info: HEXO tag demo

Code exmaple:

CODE
html
1
2
3
4
5
6
<div class="circle-wrap">
<div class="circle">
<div class="line">
</div>
</div>
</div>
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.circle-wrap{
width:60px;
height:60px;
position:relative;
margin: 0 auto;
}
.circle{
border:1px solid #fff;
border-radius:50%;
position:absolute;
width:60px;
height:60px;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
.circle .line{
width:50%;
height:1px;
background-color:transparent;
position:absolute;
top:calc(50% - 1px);
transform-origin:right;
animation: animate 5s linear infinite;
}
.circle .line::before{
content:"";
width:5px;
height:5px;
background-color:#fff;
border-radius:50%;
display:block;
top:-2px;
left:-3px;
position:absolute;
}
@keyframes animate {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(-360deg);
}
}