ログイン
問題4

キラッと光るボタンを作ろう

アイコン画像

問題4:キラッと光るボタンを作ろう

以下のコードを使ってください

エディターのアイコンあらかじめエディタに書くコード

                <div class="btn">ここをクリック</div>
¥HTML¥
              
                .btn{
  position: relative;
  padding: 10px 0;
  background-color: #dddddd;
  text-align: center;
  color: black;
  width: 200px;
  cursor: pointer;
  box-shadow: 0 5px #bbbbbb;
  transition: .5s;
  }
.btn:active{
  transform: translateY(5px);
  box-shadow: 0 0 #bbbbbb;
}
.btn::before{
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
}
¥CSS¥
              

ブラウザのアイコン期待する画面

タグアイコン解答ソースコード

              .btn{
  overflow:hidden;
}
.btn::before{
  animation: effect 3s infinite;
}
@keyframes effect {
  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; }
}
¥CSS¥
            

コメントのアイコン解説

今回はwebサイトでよく見る定期的に光るボタンを作ってみました。
擬似要素beforeを使って上に色を塗るといったイメージです。
基本的に物体が動く時少しづつ動き出してから速度が早くなっていきますよね。
なのでアニメーションが終わりに近くにつれて変化が大きくなるようにすると自然に見えます。
数字は解答の通りでなくてもいいのですが、さっき言ったことは意識しておいてほしいです。
animationは@keyframesを使って定義した動きを呼び出すことができます。パーセンテージの中にその時に応じた指示を書くことで時間と共に変化するアニメーションが作れます。
animationにinfiniteを適用することによってアニメーションを指定の時間ごとに行います。
ログインして解答を見る
CSSAnimationを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる