[例]ボタンが光ったように見せる
<!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つを操作して実現する
