ログイン

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

CSSAnimationの問題

CSSAnimation

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

問題

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

自分の環境に書くコード

              <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を適用することによってアニメーションを指定の時間ごとに行います。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!