#前書きという名の自己紹介
はじめまして。。Make IT アドベントカレンダーの11日を担当しますyozakura121です。明日は@KimuTomoさんよろしくです！
自己紹介って言ってもあまり書くことがなさそうなので今読んでる漫画を一冊紹介させてもらいます。
やがて君になるという漫画なんですが読んでると心がほのぼのするので是非読んでみてください。
初めてこのようなものを書くのでうまく書けるかわかりませんが読んでもらえると幸いです。
#CSSとは・・・
とても初歩的なことですがCSSについて少し説明さてもらいます。
CSSはHTMLと組み合わせて使う言語です。HTMLで付けた要素に装飾などをします。webページなどを見ると文字の色が変わっていたり、大きさなどが違うのはだいたいCSSが使われていると思います。
ここで、この前ネットサーフィンをしてたら見つけたかわいいCSSを紹介させてもらいます。
.btn {
position: relative;
display: inline-block;
padding: 10px 12px;
margin: 4px;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #212529;
background-color: #fff;
box-shadow: inset -4px -4px #adafbc;
}
.btn:hover,
.btn:focus {
background-color: #e7e7e7;
box-shadow: inset -6px -6px #adafbc;
}
.btn:active {
box-shadow: inset 4px 4px #adafbc;
}
.btn::before,
.btn::after {
position: absolute;
box-sizing: content-box;
width: 100%;
height: 100%;
content: "";
border-color: #212529;
border-style: solid;
border-width: 4px;
}
.btn::before {
top: -4px;
left: 0;
border-right: 2px;
border-left: 2px;
}
.btn::after {
top: 0;
left: -4px;
border-top: 2px;
border-bottom: 2px;
}
.btn:focus {
outline: 0;
}
.btn.is-primary {
color: #fff;
background-color: #209cee;
box-shadow: inset -4px -4px #006bb3;
}
.btn.is-primary:hover,
.btn.is-primary:focus {
background-color: #108de0;
box-shadow: inset -6px -6px #006bb3;
}
.btn.is-primary:active {
box-shadow: inset 4px 4px #006bb3;
}
.btn.is-success {
color: #fff;
background-color: #92cc41;
box-shadow: inset -4px -4px #4aa52e;
}
.btn.is-success:hover,
.btn.is-success:focus {
background-color: #76c442;
box-shadow: inset -6px -6px #4aa52e;
}
.btn.is-success:active {
box-shadow: inset 4px 4px #4aa52e;
}
.btn.is-warning {
color: #212529;
background-color: #f7d51d;
box-shadow: inset -4px -4px #e59400;
}
.btn.is-warning:hover,
.btn.is-warning:focus {
background-color: #f2c409;
box-shadow: inset -6px -6px #e59400;
}
.btn.is-warning:active {
box-shadow: inset 4px 4px #e59400;
}
.btn.is-error {
color: #fff;
background-color: #e76e55;
box-shadow: inset -4px -4px #8c2022;
}
.btn.is-error:hover,
.btn.is-error:focus {
background-color: #ce372b;
box-shadow: inset -6px -6px #8c2022;
}
.btn.is-error:active {
box-shadow: inset 4px 4px #8c2022;
}
このようなドットのボタンなどができます！他にもあるので見てみてください。
参考：bc_rikko
#CSSアニメーションについて
前置きが長くなってしまったような気がしますがここからcssアニメーションについて書きたいと思います。
CSS アニメーション は、ある CSS のスタイル設定を別の設定へ遷移させることを可能にします。アニメーションは、2 種類の要素で構成されています。それは、アニメーションについて記述するスタイルと、アニメーションの始めと終わりの CSS スタイルを示すキーフレームです。同様に、アニメーション途中の通過点となるスタイルを示すこともできます。
CSS アニメーションは、従来のスクリプトによるアニメーションに比べて 3 つの長所があります。
####1 javascriptを使わずにアニメーションが作ることができる。
####2 負荷が少ないため低負荷で動かすことができる。
####3 パフォーマンスや効率を最適化してくれる。
#設定
cssアニメーションを作成する際に以下のサブプロパティを使います。
・animation-delay
・animation-direction
・animation-duration
・animation-iteration-count
・animation-name
・animation-none
・animation-play-state
・animation-timing-function
・animation-fill-mode
もう1つTransitionを利用するプロパティもありますが省略させてもらいます。
#実装
今回は3つのanimationを使ったものを紹介したいと思います。
1つ目は文字が横からスライドしてくるものです。
@keyframes RightToLeft {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
h1 {
animation-duration: 2s;
animation-name: RightToLeft;
animation-iteration-count: infinite;
color: blue;
}
実行してみると・・・
今回は使ったものはこの3種類です。
animation-duration
1 回のアニメーションサイクルに要する時間の長さを設定します。
animation-name
アニメーションのキーフレームを示す ＠keyframes ＠規則の名前を指定します。
animation-iteration-count
アニメーションを繰り返す回数を設定します。アニメーションを無限に繰り返すには infinite を指定します。
2つ目は動いているものにstopを掛けることができるものです。
.box {
position: relative;
left: 0;
width: 100px;
height: 100px;
margin-top: 50px;
border: 50px inset aqua;
box-sizing: border-box;
animation: turn_anim 1s linear infinite alternate;
}
#stop:checked.box {
animation-play-state: paused;
}
#reset:active.box {
animation: none;
}
@keyframes turn_anim {
100% {
left: 100px;
}
}
実行すると・・・
今回使ったのは
animation-play-state
アニメーションを一時停止したり、再開したりすることができます。
最後にグラデーションを紹介します。
body {
margin: 0;
font-family: 'Bitter', serif;
text-align: center;
}
.holder,
.first,
.second,
.third {
height: 100vh;
width: 100vw;
}
.first,
.second,
.third {
position: absolute;
}
.second,
.third {
opacity: 0;
}
.holder {
height: 100vh;
position: relative;
z-index: 1;
}
.first {
animation: first 10s infinite;
background: linear-gradient(#3333FF, #9933FF);
z-index: 10;
}
@keyframes first {
0% {
opacity: 1.0;
}
10% {
opacity: 0.8;
}
20% {
opacity: 0.6;
}
30% {
opacity: 0.4;
}
40% {
opacity: 0.2;
}
50% {
opacity: 0.1;
}
60% {
opacity: 0.2;
}
70% {
opacity: 0.4;
}
80% {
opacity: 0.6;
}
90% {
opacity: 0.8;
}
100% {
opacity: 1.0;
}
}
.second {
animation: second 10s infinite;
animation-delay: 2s;
background: linear-gradient(#6633CC, #0066FF);
z-index: 20;
}
@keyframes second {
0% {
opacity: 0;
}
10% {
opacity: 0.2;
}
20% {
opacity: 0.4;
}
30% {
opacity: 0.6;
}
40% {
opacity: 0.8;
}
50% {
opacity: 1.0;
}
60% {
opacity: 0.8;
}
70% {
opacity: 0.6;
}
80% {
opacity: 0.4;
}
90% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
.third {
animation: third 10s infinite;
animation-delay: 8s;
background: linear-gradient(#993399, #CC66CC);
z-index: 30;
}
@keyframes third {
0% {
opacity: 0;
}
10% {
opacity: 0.2;
}
20% {
opacity: 0.4;
}
30% {
opacity: 0.6;
}
40% {
opacity: 0.8;
}
50% {
opacity: 1.0;
}
60% {
opacity: 0.8;
}
70% {
opacity: 0.6;
}
80% {
opacity: 0.4;
}
90% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
.txt {
margin-top: calc(50vh - 43px);
position: absolute;
width: 100%;
z-index: 1000;
}
実装すると・・・
これで紹介＆実装を終わります。
#まとめ
自分はJSがあまり得意ではないのでCSSをやってみました。CSSだけでもかなり動きのあるものが作れることが伝われば幸いです。JSに比べて書く量は結構あると思いますがくじけずにやっていきましょう。
初めてこのような記事を書いたのでまとまりがないかもしれませんがご容赦ください。
参考サイトMDN web docs