要素が光ったように見える演出[CSS]

[例]ボタンが光ったように見せる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .btn{
      overflow: hidden;
      position: relative;
      padding: 10px 0;
      background-color: #ddd;
      text-align: center;
      color: #000;
      width: 200px;
      cursor: pointer;
      box-shadow: 0 5px #bbb;
      transition: 0.5s;
    }
    .btn:active{
      transform: translateY(5px);
      box-shadow: 0 0 #bbb;
    }
    .btn:before{
      position: absolute;
      content: "";
      display: inline-block;
      top: -180px;
      left: 0;
      width: 30px;
      height: 100%;
      background-color: #fff;
      transition: 0.5s;
      animation: btn 3s infinite;
    }
    @keyframes btn{
      0%{ transform: scale(0) rotate(45deg); opacity: 0;}
      50%{ transform: scale(0) rotate(45deg); opacity: 0.5;}
      80%{ transform: scale(4) rotate(45deg); opacity: 1;}
      100%{ transform: scale(50) rotate(45deg); opacity: 0;}
    }
  </style>
</head>
<body>
  <div class="btn">ここをクリック</div>
</body>
</html>

解説

.btn にCSSでアニメーションをつけた。

  • クリックすると凹む
  • 3秒毎に光ったような演出

CSSアニメーションの基本として動きをつけたい要素に transition: をつける。値は変化するまでの秒数。例えば .5s なら「0.5秒かけて変化させる」

クリック時の演出

クリックしたときの演出は :active で記述。

  • .btn 要素の[ box-shadow: 0 5px #bbb; ]を :active の[ box-shadow: 0 0 #bbb; ]で消す
  • 消えた box-shadow の高さ分を[ transform: translateY(5px); ]でボタンの位置をずらすことにより、ボタンを押したような演出になる。

光ったような演出

3秒毎に白い光が左上から右下に通り過ぎてゆく演出。

仕組みは .btn の上方に .btn:before で白い四角を作り45度傾ける。そして、拡大する動きで光っているように見せる。

  • :before には content””; の記述は必須
  • animation: は @keyframes とセットで使う。

animation: 呼び出すアニメーション名 何秒後に変化するか 繰り返し;

今回の animation は上記の順で記述している

@keyframes の使い方

@keyframes アニメーション名 { 0%{ } 50%{ } 100%{ } }

アニメーション名を使って呼び出して、各パーセンテージ毎の CSS を実行していく

今回の場合は

  • transform: rotate(45deg) で 45度傾斜させる。
  • transform: scale(0) で非表示にし、80%で 4倍 の大きさ、100%で 50倍の大きさにする
  • opacity: 0 で 透過状態、opacity: 1 で非透過状態

上記3つを操作して実現する

css.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

-広告-

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。