UNPKG

yinaai

Version:

--- # Features ## 1. Pre label beautification ### Use in the website```<pre>az</pre>```You can see the beautification effect ## 2. Code label beautification ### Use in the website```<code>az</code>```You can see the beautification effect ## Web page

github.com/slblog-github/Yinaai

slblog-github/Yinaai

54 lines (47 loc) • 3.29 kB
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
45
46
47
48
49
50
51
52
53
54
# Yinaai ## | A crumb tool that can beautify your website ### | You can quote our CSS to your website -> #### | ```<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yinaai/yinaai.min.css">``` ### | In addition to using CSS, you can also use the js way -> #### | ```<script src="https://cdn.jsdelivr.net/npm/yinaai/yinaai.min.js">``` ## Selection guide ### If your picture is convenient, you can use JS to introduce the method ### If you use it normally, you can use the CSS introduction method --- # Features ## 1. Pre label beautification ### Use in the website```<pre>az</pre>```You can see the beautification effect ## 2. Code label beautification ### Use in the website```<code>az</code>```You can see the beautification effect ## Web page background ### Convert your ```<html>``` tag to ```<html data-theme="wbh">``` to see the effect ## Scrollbar ### A scroll bar will be displayed when your webpage exceeds the current visibility(Directly modify the embedded style of Webkit kernel) ### Motion animation (for FontAwesome / built-in) ### On DOM load On hover On parent hover faa-wrench animated faa-wrench animated-hover faa-wrench faa-ring animated faa-ring animated-hover faa-ring faa-horizontal animated faa-horizontal animated-hover faa-horizontal faa-vertical animated faa-vertical animated-hover faa-vertical faa-flash animated faa-flash animated-hover faa-flash faa-bounce animated faa-bounce animated-hover faa-bounce faa-spin animated faa-spin animated-hover faa-spin faa-float animated faa-float animated-hover faa-float faa-pulse animated faa-pulse animated-hover faa-pulse faa-shake animated faa-shake animated-hover faa-shake faa-tada animated faa-tada animated-hover faa-tada faa-passing animated faa-passing animated-hover faa-passing faa-passing-reverse animated faa-passing-reverse animated-hover faa-passing-reverse faa-burst animated faa-burst animated-hover faa-burst faa-falling animated faa-falling animated-hover faa-falling faa-rising animated faa-rising animated-hover faa-rising ### If you want to use it, please add ```class=" the CLASS name provided above"``` to any tag ## Small Tag / Note Tag ### If you want to use Small Tag, please use ```<span class="inline-tag red">red tag</span><span class="inline-tag green">green tag</span><span class="inline-tag blue">Small blue label</span><span class="inline-tag yellow">Small yellow label</span><span class="inline-tag grey">Small gray label<span class="inline-tag grey"> /span>```Insert anywhere on your website ### If you want to use Note Tag, please set ```<p class='div-border green'>green</p><p class='div-border red'>red</p><p class='div -border yellow'>Yellow</p><p class='div-border grey'>Gray</p><p class='div-border blue'>Blue</p>```Insert into your website Anywhere ## Tip Tag ### Please refer to [Official Website](https://mdbf-css.js.org) But there may be some errors in the style, please ignore it, just insert it as usual ## Snote Tag ### If you want to use the Snote tag, please insert ```<div class="snote stylename">``` anywhere in your website. The stylename can enter the css internal search reference --- # Other content can be explored by yourself