[Front-end🦁] #7 CSS flex、grid/animation

1. flex, grid

#6-2続いて整理する.

2.Web開発プロジェクト

2-1. アニメーションを使用したターンテーブル

中間領域に回転効果を生じるコード.同じようにコードを持って行って、それを8つ(li要素9つ)にしてみました.
ソースコード(4個) , ソースコード（8個）
アニメーションのメインコードのみを整理しました.

@keyframe ani {
    0% { transform: translateY(0px); }
    25% { transform: translateY(-20%); }
    50% { transform: translateY(-40%); }
    75% { transform: translateY(-60%); }
    100% { transform: translateY(-80%); }
}
.aespa {
    margin: 100px;
    font-size: 50px;
    text-align: center;
    color: cornflowerblue;
}
.aespa-member { 
/* list의 처음과 끝을 동일한 요소를 넣어주면 끊기는 것을 피할 수 있다. */
    position: relative;
    height: 100px;
    overflow: hidden;
}
.aespa-member-list { animation: ani 3s infinite; }

<div class="aespa">
    aespa
    <div class="aespa-member">
        <ul class="aespa-member-list">
            <li>Karina</li>
            <li>Giselle</li>
            <li>Winter</li>
            <li>Ningning</li>
            <li>Karina</li>
        </ul>
    </div>
    <h2 class="song-title">Savage</h2>
</div>

+jsを2つの値の境界に後で使用する場合は、どの値として認識されるかについての内容を追加できます.

2-2. Jungle Cinema実装

#8一括クリーンアップ!

3.感じ

Animation Overflowは、サブエレメントを隠す効果があります.float属性のみに使用されるわけではありません.

2-1アニメーションを実装する際、最初の要素を最後の錯覚に追加することで解決できるのが印象的です.SWIFTUIの授業で聞いたアニメの結果は形の連続だった.

これまでは、1週間のタスクは目に見える内容だけで区切られていましたが、ulliはこのように(練習なのでもう書かないと思いますが)完全なラベルを書いていましたが、練習中に書けなかったことは実戦でもできないと思いますので、これからはネットアクセス性、授業周期、名前ルールを考えるべきです.

^= ~= *= + ~これらの文法はよく使われていることに驚きました.+の場合、5つlili+ liというように掴むと、後ろの4つが選ばれます!!!考えてみれば正しいが、今まで考えたことがない.