teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

6

感じ間違い修正

2018/10/16 10:53

投稿

hasshy
hasshy

スコア102

title CHANGED
File without changes
body CHANGED
@@ -115,5 +115,5 @@
115
115
 
116
116
  [https://codepen.io/websandbag/pen/EdogaM](https://codepen.io/websandbag/pen/EdogaM)
117
117
 
118
- 上記のソースでは、投下したい部分を半透明にしています。
118
+ 上記のソースでは、透過したい部分を半透明にしています。
119
- 現したい事は、半透明の部分を投下してに配置している赤い要素を見えるようにしたいです。
119
+ は、半透明の部分を透明して後ろに配置している赤い要素を見えるようにしたいです。

5

インデントを合わせる

2018/10/16 10:53

投稿

hasshy
hasshy

スコア102

title CHANGED
File without changes
body CHANGED
@@ -65,8 +65,8 @@
65
65
  width: 100%;
66
66
  height: 100%;
67
67
  &::after {
68
- content: '';
68
+ content: '';
69
- position: absolute;
69
+ position: absolute;
70
70
  border-radius: 50%;
71
71
  top: 50%;
72
72
  left: 50%;

4

進展があったため情報を更新

2018/10/16 10:49

投稿

hasshy
hasshy

スコア102

title CHANGED
File without changes
body CHANGED
@@ -1,3 +1,7 @@
1
+ 実現したい事の追記と、最新のソースを更新しました。
2
+
3
+ ---
4
+
1
5
  タグで描画している部分のみ、backgroundに敷いている要素を表示し、それ以外は透明にする方法は無いでしょうか?
2
6
  もちろん、必要であればjsを使うことは構いません。
3
7
 
@@ -7,16 +11,23 @@
7
11
 
8
12
  ### 実現したいイメージ
9
13
  下記のように、枠の部分のみ背景を表示したいと考えています。
10
- ![イメージ説明](fa8e472c7b601985bb62ad1ed9d9aa96.jpeg)
14
+ 枠内部は投下されていて、枠の裏にある要素が見えるようにしたいです。
11
15
 
16
+ ![イメージ説明](4b9799bdcba0ff37c94e03b3f8a82858.jpeg)
17
+
12
18
  拙い説明画像で申し訳ありません。
13
19
 
14
20
  ## ソースコード
15
21
  ### HTML
22
+ cardというクラスが内側に表示される要素で、
23
+ rippleというのが枠の要素になります。
24
+
16
25
  ```html
26
+ <div class="card"></div>
17
27
  <div class="ripple">
18
- <div class="ripple_circle"><div>
28
+ <div class="ripple_circle"></div>
19
29
  </div>
30
+
20
31
  ```
21
32
  ### css
22
33
  説明用のコード自体はSCSSです。
@@ -26,57 +37,83 @@
26
37
  margin: 0;
27
38
  display: grid;
28
39
  height: 100vh;
29
-
30
40
  place-items: center;
31
-
32
41
  background-color: #000;
33
42
  }
34
43
 
44
+ // 真ん中に表示する要素
45
+ .card {
46
+ height: 100px;
47
+ width: 100px;
48
+ background-color: red;
49
+ margin-top: 20px;
50
+ }
51
+
52
+ // 枠要素
35
53
  .ripple {
36
54
  position: absolute;
37
55
  width: 400px;
38
56
  height: 400px;
39
57
  top: 50%;
40
58
  left: 50%;
59
+ background: url(https://dl.dropbox.com/s/wwvut9frq0k4ukf/3_512.jpg);
60
+ clip-path: circle(50px at 50% 50%);
41
61
  transform: translate(-50%, -50%);
42
- background: #000 url(https://dl.dropbox.com/s/wwvut9frq0k4ukf/3_512.jpg);
62
+ animation: wow 2s ease-out forwards infinite;
43
63
  &_circle {
44
64
  position: absolute;
45
65
  width: 100%;
46
66
  height: 100%;
47
67
  &::after {
48
- content: '';
68
+ content: '';
49
69
  position: absolute;
50
- border-radius: 50%;
70
+ border-radius: 50%;
51
- top: 50%;
71
+ top: 50%;
52
- left: 50%;
72
+ left: 50%;
73
+ background-color: rgba(0,0,0,0);
53
- border: 0px solid #ffffff;
74
+ background-clip: padding-box;
54
75
  transform: translate(-50%, -50%);
55
76
  animation: riple01 2s ease-out forwards infinite;
56
77
  }
57
78
  }
58
79
  }
59
80
 
81
+ @keyframes wow {
82
+ 0%{
83
+ clip-path: circle(0px at 50% 50%);
84
+ }
85
+ 20%{
86
+ clip-path: circle(50px at 50% 50%);
87
+ }
88
+ 100%{
89
+ clip-path: circle(200px at 50% 50%);
90
+ }
91
+ }
92
+
60
93
  @keyframes riple01 {
61
94
  0% {
62
- border: 0 solid #f8bbd0;
63
95
  }
64
96
  20% {
65
97
  width: 0;
66
98
  height: 0;
67
- border: 50px solid #fff;
68
99
  }
69
100
  100% {
70
101
  width: 100%;
71
102
  height: 100%;
72
- border: 0px solid #fff;
73
103
  }
74
104
  }
75
105
  ```
76
106
 
77
107
  ## codepen
78
- 下記で動的に動く要素については確認できます。
108
+ 下記で動的に動く要素については確認できます。
79
109
  [https://codepen.io/websandbag/pen/RejOZp](https://codepen.io/websandbag/pen/RejOZp)
80
110
 
111
+ ### 追記
112
+ [jjj_aaa](https://teratail.com/users/jjj_aaa)様よりご共有いただいたソースを参考に、白い枠に要素を表示する事は実現方法を追記しました。
81
- 波紋のように白い枠の部分のみ背景の要素が表示されようにしたい
113
+ 枠の後ろにある要素を透過す事はまだ実現きていません
82
- ![イメージ説明](e3621c81c8a2d515c8666bfc504e3a33.png)
114
+ ![イメージ説明](01bb384faa06d5d8b2657399b407e820.png)
115
+
116
+ [https://codepen.io/websandbag/pen/EdogaM](https://codepen.io/websandbag/pen/EdogaM)
117
+
118
+ 上記のソースでは、投下したい部分を半透明にしています。
119
+ 実現したい事は、半透明の部分を投下して裏に配置している赤い要素を見えるようにしたいです。

3

説明追加

2018/10/16 10:46

投稿

hasshy
hasshy

スコア102

title CHANGED
File without changes
body CHANGED
@@ -19,6 +19,8 @@
19
19
  </div>
20
20
  ```
21
21
  ### css
22
+ 説明用のコード自体はSCSSです。
23
+
22
24
  ```scss
23
25
  body {
24
26
  margin: 0;

2

実現したいイメージ追加

2018/10/16 08:13

投稿

hasshy
hasshy

スコア102

title CHANGED
File without changes
body CHANGED
@@ -5,6 +5,12 @@
5
5
  波紋のように、ドーナッツ常にマスキングしたいと考えています。
6
6
  ドーナッツの内側は、background-colorを指定するのではなく、透過させたいです。
7
7
 
8
+ ### 実現したいイメージ
9
+ 下記のように、枠の部分のみ背景を表示したいと考えています。
10
+ ![イメージ説明](fa8e472c7b601985bb62ad1ed9d9aa96.jpeg)
11
+
12
+ 拙い説明画像で申し訳ありません。
13
+
8
14
  ## ソースコード
9
15
  ### HTML
10
16
  ```html

1

codepenのリンクを有効にしました。

2018/10/16 08:12

投稿

hasshy
hasshy

スコア102

title CHANGED
File without changes
body CHANGED
@@ -68,7 +68,7 @@
68
68
 
69
69
  ## codepen
70
70
  下記で動的に動く要素については確認できます。
71
- https://codepen.io/websandbag/pen/RejOZp
71
+ [https://codepen.io/websandbag/pen/RejOZp](https://codepen.io/websandbag/pen/RejOZp)
72
72
 
73
73
  波紋のように白い枠の部分のみ背景の要素が表示されるようにしたいです。
74
74
  ![イメージ説明](e3621c81c8a2d515c8666bfc504e3a33.png)