Devlog 7月8日アニメ

3332 ワード
CSS html テキストリンク

1.学習内容


https://animate.style/



適用方法


htmlラベルにクラス名を入力するだけでアニメーション効果を適用できます。追加の操作は必要ありません。


headに入力する必要がある内容

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

コード起動方式


1.cssにcolor-redというクラスを作成し、属性を入れる

.color-red {
	color: red;
}

2.使用するhtmlタグにクラス名を追加

<div class="animate__animated animate__shakeX animate__slow color-red">Example</div>

さっき初めて歌ったanimatecssにはこのようなcssクラスがたくさんありますが、私たちはそれらを読み込んで使用するだけです。


4.コード説明


最初のインポートanimate cssファイルに存在するクラス
2つ目はアニメタイプ(シェークスピア)
3つ目は速度または遅延(slow)
4つ目は私たちが追加したredclassです
<div class="animate__animated animate__shakeX animate__slow color-red">Example</div>

https://codepen.io/



他の人が作成したオープンソースアニメーションコレクションサイト


2.難しいところ


アニメーションの駆動原理と種類を理解しすぎて、混同しました。


3.解決方法


以上の2つのサイトを通じて、制作したアニメの構想図はもう作成したと思いますが、まだ完備していません。だから私はもっとグーグルゲームをして、実験をするつもりです。


4.勉強の心得


今日勉強したサイトに入っていろいろな実験をしました。想像以上に効果的で、コードペンには様々な動画があり、JavaScriptを使っていることも多いです。面白そうな勉強でした。

ReactNative自動化パッケージ
Springboot mavenパッケージpom構成