teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問[CSS]動的に動く要素でマスキングを行う方法は無いでしょうか？

編集履歴

質問編集履歴

6

感じ間違い修正

2018/10/16 10:53

投稿

hasshy
hasshy

スコア102

test CHANGED
File without changes
test CHANGED
@@ -232,6 +232,6 @@
232
232
 
233
233
 
234
234
 
235
- 上記のソースでは、投下したい部分を半透明にしています。
235
+ 上記のソースでは、透過したい部分を半透明にしています。
236
-
236
+
237
- 実現したい事は、半透明の部分を投下して裏に配置している赤い要素を見えるようにしたいです。
237
+ 実際は、半透明の部分を透明して後ろに配置している赤い要素を見えるようにしたいです。

5

インデントを合わせる

2018/10/16 10:53

投稿

hasshy
hasshy

スコア102

test CHANGED
File without changes
test CHANGED
@@ -132,9 +132,9 @@
132
132
 
133
133
  &::after {
134
134
 
135
- content: '';
135
+ content: '';
136
-
136
+
137
- position: absolute;
137
+ position: absolute;
138
138
 
139
139
  border-radius: 50%;
140
140
 

4

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

2018/10/16 10:49

投稿

hasshy
hasshy

スコア102

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,11 @@
1
+ 実現したい事の追記と、最新のソースを更新しました。
2
+
3
+
4
+
5
+ ---
6
+
7
+
8
+
1
9
  タグで描画している部分のみ、backgroundに敷いている要素を表示し、それ以外は透明にする方法は無いでしょうか？
2
10
 
3
11
  もちろん、必要であればjsを使うことは構いません。
@@ -16,7 +24,11 @@
16
24
 
17
25
  下記のように、枠の部分のみ背景を表示したいと考えています。
18
26
 
27
+ 枠内部は投下されていて、枠の裏にある要素が見えるようにしたいです。
28
+
29
+
30
+
19
- ![イメージ説明](fa8e472c7b601985bb62ad1ed9d9aa96.jpeg)
31
+ ![イメージ説明](4b9799bdcba0ff37c94e03b3f8a82858.jpeg)
20
32
 
21
33
 
22
34
 
@@ -28,14 +40,24 @@
28
40
 
29
41
  ### HTML
30
42
 
43
+ cardというクラスが内側に表示される要素で、
44
+
45
+ rippleというのが枠の要素になります。
46
+
47
+
48
+
31
49
  ```html
32
50
 
51
+ <div class="card"></div>
52
+
33
53
  <div class="ripple">
34
54
 
35
- <div class="ripple_circle"><div>
55
+ <div class="ripple_circle"></div>
36
56
 
37
57
  </div>
38
58
 
59
+
60
+
39
61
  ```
40
62
 
41
63
  ### css
@@ -54,18 +76,32 @@
54
76
 
55
77
  height: 100vh;
56
78
 
57
-
58
-
59
79
  place-items: center;
60
80
 
61
-
62
-
63
81
  background-color: #000;
64
82
 
65
83
  }
66
84
 
67
85
 
68
86
 
87
+ // 真ん中に表示する要素
88
+
89
+ .card {
90
+
91
+ height: 100px;
92
+
93
+ width: 100px;
94
+
95
+ background-color: red;
96
+
97
+ margin-top: 20px;
98
+
99
+ }
100
+
101
+
102
+
103
+ // 枠要素
104
+
69
105
  .ripple {
70
106
 
71
107
  position: absolute;
@@ -78,9 +114,13 @@
78
114
 
79
115
  left: 50%;
80
116
 
117
+ background: url(https://dl.dropbox.com/s/wwvut9frq0k4ukf/3_512.jpg);
118
+
119
+ clip-path: circle(50px at 50% 50%);
120
+
81
121
  transform: translate(-50%, -50%);
82
122
 
83
- background: #000 url(https://dl.dropbox.com/s/wwvut9frq0k4ukf/3_512.jpg);
123
+ animation: wow 2s ease-out forwards infinite;
84
124
 
85
125
  &_circle {
86
126
 
@@ -92,17 +132,19 @@
92
132
 
93
133
  &::after {
94
134
 
95
- content: '';
135
+ content: '';
96
136
 
97
137
  position: absolute;
98
138
 
99
- border-radius: 50%;
139
+ border-radius: 50%;
100
-
140
+
101
- top: 50%;
141
+ top: 50%;
102
-
142
+
103
- left: 50%;
143
+ left: 50%;
144
+
104
-
145
+ background-color: rgba(0,0,0,0);
146
+
105
- border: 0px solid #ffffff;
147
+ background-clip: padding-box;
106
148
 
107
149
  transform: translate(-50%, -50%);
108
150
 
@@ -116,12 +158,34 @@
116
158
 
117
159
 
118
160
 
161
+ @keyframes wow {
162
+
163
+ 0%{
164
+
165
+ clip-path: circle(0px at 50% 50%);
166
+
167
+ }
168
+
169
+ 20%{
170
+
171
+ clip-path: circle(50px at 50% 50%);
172
+
173
+ }
174
+
175
+ 100%{
176
+
177
+ clip-path: circle(200px at 50% 50%);
178
+
179
+ }
180
+
181
+ }
182
+
183
+
184
+
119
185
  @keyframes riple01 {
120
186
 
121
187
  0% {
122
188
 
123
- border: 0 solid #f8bbd0;
124
-
125
189
  }
126
190
 
127
191
  20% {
@@ -130,8 +194,6 @@
130
194
 
131
195
  height: 0;
132
196
 
133
- border: 50px solid #fff;
134
-
135
197
  }
136
198
 
137
199
  100% {
@@ -140,8 +202,6 @@
140
202
 
141
203
  height: 100%;
142
204
 
143
- border: 0px solid #fff;
144
-
145
205
  }
146
206
 
147
207
  }
@@ -152,12 +212,26 @@
152
212
 
153
213
  ## codepen
154
214
 
155
- 下記で動的に動く要素については確認できます。
215
+ 下記で動的に動く要素については確認できます。
156
216
 
157
217
  [https://codepen.io/websandbag/pen/RejOZp](https://codepen.io/websandbag/pen/RejOZp)
158
218
 
159
219
 
160
220
 
221
+ ### 追記
222
+
223
+ [jjj_aaa](https://teratail.com/users/jjj_aaa)様よりご共有いただいたソースを参考に、白い枠に要素を表示する事は実現方法を追記しました。
224
+
161
- 波紋のように白い枠の部分のみ背景の要素が表示されるようにしたいです。
225
+ 枠の後ろにある要素を透過する事はまだ実現できていません。
162
-
226
+
163
- ![イメージ説明](e3621c81c8a2d515c8666bfc504e3a33.png)
227
+ ![イメージ説明](01bb384faa06d5d8b2657399b407e820.png)
228
+
229
+
230
+
231
+ [https://codepen.io/websandbag/pen/EdogaM](https://codepen.io/websandbag/pen/EdogaM)
232
+
233
+
234
+
235
+ 上記のソースでは、投下したい部分を半透明にしています。
236
+
237
+ 実現したい事は、半透明の部分を投下して裏に配置している赤い要素を見えるようにしたいです。

3

説明追加

2018/10/16 10:46

投稿

hasshy
hasshy

スコア102

test CHANGED
File without changes
test CHANGED
@@ -39,6 +39,10 @@
39
39
  ```
40
40
 
41
41
  ### css
42
+
43
+ 説明用のコード自体はSCSSです。
44
+
45
+
42
46
 
43
47
  ```scss
44
48
 

2

実現したいイメージ追加

2018/10/16 08:13

投稿

hasshy
hasshy

スコア102

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

1

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

2018/10/16 08:12

投稿

hasshy
hasshy

スコア102

test CHANGED
File without changes
test CHANGED
@@ -138,7 +138,7 @@
138
138
 
139
139
  下記で動的に動く要素については確認できます。
140
140
 
141
- https://codepen.io/websandbag/pen/RejOZp
141
+ [https://codepen.io/websandbag/pen/RejOZp](https://codepen.io/websandbag/pen/RejOZp)
142
142
 
143
143
 
144
144