ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

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%の表示にする。図形は丸にする

f:id:terushi-diary:20191113231534p:plain

 

【打ったコードの意味】

 

--my-color: red; = 「--」を二つ先頭につけることで、定義することが可能

color: var(--my-color); = 赤色を代入

f:id:terushi-diary:20191113231546p:plain

【表示】

f:id:terushi-diary:20191113231556p:plain

【打ったコードの意味】

calc( = 数字を代入できる小技

f:id:terushi-diary:20191113231609p:plain

【表示】

f:id:terushi-diary:20191113231621p:plain

 

【打ったコードの意味】

色相を600で代入して、.btnには補色を代入している

f:id:terushi-diary:20191113231630p:plain

【表示】

f:id:terushi-diary:20191113231640p:plain

【コード2】

f:id:terushi-diary:20191113231707p:plain

【表示2】

f:id:terushi-diary:20191113231716p:plain

 

今日は仕事が休みだったので、学習が進んでよかったです。

明日はFirebaseでHPを公開する方法を学習します。