[開発ログ9日目]cssアニメーションを支援するサイト

6754 ワード
テキストリンク

1.学習内容

  • https://animate.style/
    • 繰り返し使用するアニメーションcssコードであれば、連動して使用すると便利です.

    index.htmlに貼り付けます.
    サイト上で制作された動画は連動可能です.
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

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

	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

    様々な効果を確認し、名前をコピーして挿入すると、アニメーションコードの作成が完了します.
    次のページでは、アニメーションの速度を調整するなど、複数のクラスの記述コードを表示できます.
    複数のクラス名を加えて機能します.
    <body>
	<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
	<div class="animate__animated animate__bounce animate__faster">Example</div>
	<div class="animate__animated animate__bounce animate__slow">Example</div>
	<div class="animate__animated animate__heartBeat animate__slow color-red">heartbeat</div>
	<div class="animate__animated animate__bounce animate__slow color-red">Example</div>
    !!htmlファイルでclassを作成してからcssを作成すると、
    今回はまずcssコードで書きます.
    つまり、まずclassを指定してhtmlタグに挿入します!
    .color-red{
	color: red;
}

.animate__animated {
	margin-top: 200px;
	margin-left: 200px;
}
    cssプロパティを最初に入れると、クラス内のcolor-red付きhtmlコードすべてにプロパティを付与できます.
    複数のクラスにanimateアニメーションアトリビュートを挿入します.
  • https://codepen.io/nxworld/details/ZYNOBZ
    • 他の人が作るアニメーションの効果をもたらすことができます.コードを持ってカスタマイズすることもできます.

    2.難しい内容


    サイトを知る日なので、あまり難しくはありません.

    3.解決方法


    4.勉強の心得


    コードを持ってくるサイトがたくさんあって嬉しいです.
    同時に他の人が共有しているコードを見るのは素晴らしいです.このように創作してこそ、このようなアニメーションを感じることができる.
    Javaデータ構造とアルゴリズムノートを学ぶ(一)
    [アルゴリズム]求伯準-区間と4