• つくってみた
  • 機械学習
  • クラウドコンピューティング
  • 仮想デスクトップ
  • サイト情報
    • 運営会社
    • 採用情報
  • お問い合わせ
  1. ホーム /
  2. ハック /
  3. 全画面背景をCSSでアニメーションする
  • ハック
  • 2018.03.22
  • 2,014
  • animation

全画面背景をCSSでアニメーションする

  • ツイート
  • シェア
  • はてな
body.top {
  color: rgba(#fff, .78);
  height: 100%;
  position: relative;
  background: #000 url('../img/dot.png') repeat-x center center;
  background-size: auto 80%;
  animation: bg-slider 230s linear infinite;
}
@keyframes bg-slider {
  from { background-position: 80% 50%; } //Xの開始位置 Yの開始位置 
  to { background-position: -2500px 0; } 
}

参考:[CSS]背景画像をアニメーションすることで簡単に作れる無限ループスライドショー

  • ツイート
  • シェア
  • はてな

harada

    つくってみた!

    社内のトイレ難民解決!トイレ空き状況確認システムを作ってみた社内のトイレ難民解決!トイレ空き状況確認システムを作ってみた
    社長が「寒い寒い」というので社長席の温度をRaspberry Piで監視してみた。社長が「寒い寒い」というので社長席の温度をRaspberry Piで監視してみた。
    Amazon Polly と Slack を使って  Alexa へ (物理的に) 話しかけるシステムを作ってみたAmazon Polly と Slack を使って Alexa へ (物理的に) 話しかけるシステムを作ってみた

    関連記事

    • CSS3アニメーション:ズームアップ
    • CSS3:背景色アニメーション
    • CSSアニメーションの超基礎
    • CSS3アニメーション:伸びる棒グラフ
    • CSS3:アニメーション(animation)で回転させる
    • 「Gifffer」でGifアニメに再生ボタンをつけて再生のタイミングを制御する
    • お問い合わせ
    • 利用規約
    • プライバシーポリシー
    • 運営会社
    • 採用情報

    © Copyright 2023 ハックノート All rights reserved.