Overview
gaming-css
は、ゲーミングなスタイリングするCSSです
Badge
Install
npm
npm i gaming-css
yarn
yarn add gaming-css
Usage
htmlのclass属性
やcssのanimation-name
としてパラメータに指定できます。
パラメータ名は、以下の既存プロパティ名に対応しています。
既存プロパティ名 | パラメータ名 |
---|---|
color | gaming-color |
background-color | gaming-background-color |
border-color | gaming-border-color |
border-top-color | gaming-border-top-color |
border-right-color | gaming-border-right-color |
border-bottom-color | gaming-border-bottom-color |
border-left-color | gaming-border-left-color |
outline-color | gaming-outline-color |
text-decoration-color | gaming-text-decoration-color |
border-inline-start-color | gaming-border-inline-start-color |
border-inline-end-color | gaming-border-inline-end-color |
border-block-start-color | gaming-border-block-start-color |
border-block-end-color | gaming-border-block-end-color |
filter | gaming-filter |
fill | gaming-fill |
htmlのclass属性
に指定する
<div class="gaming-background-color">背景色<div>
複数のアニメーションするようにカスタマイズする
div {
animation: gaming-color 5s linear infinite,
gaming-border-color 5s linear infinite;
}
hoverなどの疑似クラスに適用したい場合
a:hover {
animation: gaming-background-color 5s linear infinite;
}