メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • タイトルのCSSスキャン動画効果

タイトルのCSSスキャン動画効果

やりたいこと:ページタイトルのスキャン動画効果

  • ページがロード後に、タイトルが一度スキャンのような動画効果を実現したいです。
  • CSSのAnimation効果だけを利用したいです
  • javascript、jQueryなどを使用しないこと

​考え方:タイトルのレイヤーの下に、スキャン動画レイヤーを追加

  • タイトルのレイヤーを上に設定します
  • タイトル要素(DIV)の疑似クラス(before)を利用して、スキャンのレイヤーを作成します
    • position: absolute
    • z-index:-1
    • backgroundにlinear-gradientの使用
    • animationで padding-left の効果でスキャンの動画を実現しますd

実現:CSSのAnimation効果のみの実現

  • 例えば:タイトルのHTML:
    <hgroup class="sitename">
      <h2>
        <a href="http://www.old-pine.net/" title="ホーム">
          <div class="ripple site-name-anime">古松 | 情報システムにプロのサポート</div>
        </a>
      </h2>
    </hgroup>
    

     

  • 以下のCSSコードで実現
    .sitename a {
      color: #222;
      text-decoration: none;
    }
    .sitename {
      height: 24px;
    }
    .sitename:before {
      content: '';
      position: absolute;
      background-color: #f44;
      visibility: hidden;
      z-index: -1;
      background-image: -webkit-linear-gradient( left, rgba( 243, 245, 246, 1) 25%, rgba( 255, 255, 255, 0.1) 50%, rgba( 243, 245, 246, 1) 75%);
      background-image: -moz-linear-gradient( left, rgba( 243, 245, 246, 1) 25%, rgba( 255, 255, 255, 0.1) 50%, rgba( 243, 245, 246, 1) 75%);
      background-image: -o-linear-gradient( left, rgba( 243, 245, 246, 1) 25%, rgba( 255, 255, 255, 0.1) 50%, rgba( 243, 245, 246, 1) 75%);
      background-image: linear-gradient(to right, rgba( 243, 245, 246, 1) 25%, rgba( 255, 0, 0, 0.1) 50%, rgba( 243, 245, 246, 1) 75%);
      color: white;
      height: 24px;
      width: 10%;
      -webkit-animation: 3s ease-out 0s infinite normal move_eye;
      -moz-animation: 3s ease-out 0s infinite normal move_eye;
      -o-animation: 3s ease-out 0s infinite normal move_eye;
      animation: 3s ease-out 0s infinite normal move_eye;
    }
    @-webkit-keyframes move_eye {
      from {
        margin-left: -20%;
        visibility: visible;
      }
      to {
        margin-left: 100%;
        background-color: #fff;
      }
    }
    @-moz-keyframes move_eye {
      from {
        margin-left: -20%;
        visibility: visible;
      }
      to {
        margin-left: 100%;
        background-color: #fff;
      }
    }
    @-o-keyframes move_eye {
      from {
        margin-left: -20%;
        visibility: visible;
      }
      to {
        margin-left: 100%;
        background-color: #fff;
      }
    }
    @keyframes move_eye {
      from {
        margin-left: -20%;
        visibility: visible;
      }
      to {
        margin-left: 100%;
        background-color: #fff;
      }
    }
    
  • 実際の効果:

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads