ボタンを押している間だけ背景の色が変化する際、ボタンを中心に背景の色を変化させたい。

前提

ボタンをマウスダウンしている間、背景の色が変化するイベントを作りました。
マウスアップすると背景の色は元に戻ります。
下記がサンプルです。

実現したいこと

背景の色の変化の仕方を、

ボタンを中心に
円形に
徐々に

上記のようにしたいです。
上記サンプルで言いますと、ボタンを押すことでボタンを中心に赤い円が徐々に大きくなっていき、最終的に画面全体の背景の色が赤くなるようにしたいです。

ソースコード

javascript
1var down = function() {
2  document.body.style.backgroundColor = "red";
3  document.body.style.transition = "2s";
4}
5
6var up = function() {
7  document.body.style.backgroundColor = "";
8  document.body.style.transition = "2s";
9}

css
1button{
2  color: white;
3  background: red;
4  border: none;
5  height: 50px;
6}
7
8button:hover {
9  background: tomato;
10  transition: 0.2s;
11}
12
13button:active {
14  background: white;
15  color: red;
16  transition: 2s;
17}

html
1<body>
2  <button onmousedown="down();" onmouseup="up();">
3    change
4  </button>
5</body>

調べたこと

「javascript css 色変更円形」「css transition 円」などの語句で検索したのですが、実現したいことを実装する方法論を見つけられませんでした。

行動規範の内容に同意します

回答2件

ベストアンサー

ボタンを中心に広がるアニメーション部分のみ作ってみました。
コードペン

以下コード。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6	<link href="style.css" rel="stylesheet">
7  <title>JS Bin</title>
8</head>
9<body>
10		<div class="wrap">
11			<button id="back-button"></button><!-- ボタンの背後に配置（中心から徐々に大きくする用） -->
12	    <button id="front-button" onmousedown="down();" onmouseup="up();">change</button>
13		</div>
14</body>
15</html>
16
17
18<script type="text/javascript">
19	var eb = document.getElementById("back-button"); //ボタンの背後
20	var ef = document.getElementById("front-button"); //ボタン自体
21	var down = function() {
22		eb.style.display = "block"; //ボタンの背後の要素を表示
23		eb.style.animation = "animation 2s ease";
24		ef.style.background = "white";
25		ef.style.color = "tomato";
26		ef.style.transition = "2s";
27	}
28
29	var up = function() {
30		eb.style.animation = "animation2 2s ease";
31		eb.style.display = "none"; //ボタンの背後を非表示
32		ef.style.background = "tomato"; //ボタンの色を戻す
33		ef.style.color = "white"; //ボタンの色を戻す
34	}
35</script>
36

css
1body {
2  width: 100vw;
3  height: 100vh;
4}
5.wrap{
6  position: relative;
7  width: 70px;
8  height: 70px;
9}
10button{
11  position: absolute;
12  top: 0;
13  left: 0;
14  color: white;
15  background: tomato;
16  border: none;
17  border-radius: 50%;
18  width: 70px;
19  height: 70px;
20}
21#back-button{
22  display: none;
23  position: absolute;
24  top:50%;
25  left:50%;
26  transform: translate(-50%, -50%);
27  color: black;
28  background: red;
29  border: none;
30  border-radius: 50%;
31  width: 5000px;
32  height: 5000px;
33  padding:0;
34}
35
36@keyframes animation {
37    0% {
38      width: 0%;
39      height: 0%;
40    }
41    100% {
42      width: 5000px;
43      height:5000px;
44    }
45}
46

投稿2020/01/04 18:01

編集2020/01/04 18:46

KazuSaka

総合スコア640

kyoya0819

2020/01/04 18:37 編集

回答文自体にコードを張り付けていただくとよいかもしれません。

KazuSaka

2020/01/04 18:48

ご指摘ありがとうございます。コードペン見れませんでしたかね。コードペンのリンク貼るの初めてだったので、すいません。

kyoya0819

2020/01/04 19:11

いえ、正しく貼れているのですがリンク切れや不意に消してしまった際にほかの方が分からなくなってしまう可能性があるので、コメントさせていただきました。修正ありがとうございます。

KazuSaka

2020/01/04 19:20

そういうことだったんですね。了解しました。

行動規範の内容に同意します

こんな感じでごまかせますかね。。

css
1body {
2  width: 700px;
3  height: 700px;
4}
5
6button{
7  display: block;
8  position: absolute;
9  top: 50px;
10  left: 50px;
11  transition: 2s;
12  color: white;
13  background: red;
14  border: none;
15  border-radius: 50%;
16  width: 70px;
17  height: 70px;
18
19}
20
21button:hover {
22  background: red;
23  transition: 0.2s;
24}
25
26button:active {
27  top: -300px;
28  left: -300px;
29
30  color: white;
31  transition: 2s;
32  width: 770px;
33  height: 770px;
34
35}