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 `red taggreen tagSmall blue labelSmall yellow labelSmall gray label /span>`Insert anywhere on your website

If you want to use Note Tag, please set `greenredYellowGrayBlue`Insert into your website Anywhere

Tip Tag

Please refer to Official Website 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

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
License		License
README.md		README.md
package.json		package.json
yinaai.css		yinaai.css
yinaai.js		yinaai.js
yinaai.min.css		yinaai.min.css
yinaai.min.js		yinaai.min.js

License

slblog-github/Yinaai

Folders and files

Latest commit

History

Repository files navigation

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

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 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 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

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 3

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

| `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yinaai/yinaai.min.css">`

| `<script src="https://cdn.jsdelivr.net/npm/yinaai/yinaai.min.js">`

Use in the website`<pre>az</pre>`You can see the beautification effect

Use in the website`<code>az</code>`You can see the beautification effect

Convert your `<html>` tag to `<html data-theme="wbh">` to see the effect

If you want to use it, please add `class=" the CLASS name provided above"` to any tag

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

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

Packages