Webデザイン勉強84日目の成長報告!
こちらのWebサイトは移転しました。
[ピュアチャ〜ジ]
はいこんばんは!本日の作業進捗報告を行います!
今日学んだこと
①CSSを使ったアニメーション
②数値や値の代入の仕方
【打ったコードの意味】
animation-duration: 2s; = アニメーションに2秒の秒数をかける
animation-iteration-count: 2; = 2回アクションをする
animation-timing-function: ease-in-out; = 移動の速度(この指示は遅い)
@keyframes spin {
0% { transform: none; }
50% { transform: rorate(270deg) scale(0.8); border-radius: 50%; }
100% { transform: rorate(360deg) scale(1.8); }
transformが50%の時は、270度回転させて80%の表示にする。図形は丸にする
【打ったコードの意味】
--my-color: red; = 「--」を二つ先頭につけることで、定義することが可能
color: var(--my-color); = 赤色を代入
【表示】
【打ったコードの意味】
calc( = 数字を代入できる小技
【表示】
【打ったコードの意味】
色相を600で代入して、.btnには補色を代入している
【表示】
【コード2】
【表示2】
今日は仕事が休みだったので、学習が進んでよかったです。
明日はFirebaseでHPを公開する方法を学習します。