iiie.nagoya

物づくりと生活、"経験"を記事へ

【'19/07/13】
当ブログで使用しているカスタマイズテーマ『riseup』をテーマストアで公開しました。はてなブログを使用している方なら無料でインストールすることが可能です。(はてなProでの利用を推奨しています)

詳細は以下のページに記載しています。
https://www.iiie.nagoya/entry/2019/07/13/210356

ブログテーマページはこちら
http://blog.hatena.ne.jp/-/store/theme/17680117127217464048

背景色が徐々に変化するモーションを追加する【gram】

f:id:gorislog:20190407194632p:plain

 

はてなブログテーマ『gram』のカスタマイズ記事です。

 

gramsample.hatenablog.jp

 

 

背景色が徐々に変更するモーションを追加する

グラデーションの様に背景が変わるCSSです。

スマホでは正常に動作しない可能性があります。

 

f:id:gorislog:20190503201752g:plain

 

※gifで録画しているので、カクついた感じになっていますが、実際の動作はもっとなめらかにグラデーションが変移していきます。

 

やり方

CSSに以下のコードを追加します。

 

body {
background: linear-gradient(-45deg,#fff,#eee,#ccc,#777);
background-size: 500% 500%;
background-attachment: fixed;
-webkit-animation: Gradient 7s ease infinite;
-moz-animation: Gradient 7s ease infinite;
animation: Gradient 7s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}

 

カラーコードを変更すると、変わっていく背景色を指定できます。

gramでは、基本指定している文字色が#444ですので、背景色が濃いと文字を読み取ることが難しくなります。

 

カラーコード

www.colordic.org

f:id:gorislog:20190503201138p:plain

 

  • デザインより、カスタマイズ(スパナマーク)を選択
  • デザインCSSをクリック
  • 表示された領域をクリック

 

f:id:gorislog:20190503201220p:plain

 

  • 表示された領域にコードをペースト
  • 変更を保存する

 

参考: https://codepen.io/P1N2O/pen/pyBNzX