質問編集履歴

2

scssをcssに変更

2018/04/21 00:43

投稿

Usagino
Usagino

スコア12

test CHANGED
File without changes
test CHANGED
@@ -98,51 +98,51 @@
98
98
 
99
99
  #### スタイルシート(sass)はこちら
100
100
 
101
- ```CSS:style.scss
101
+ ```CSS:style.css
102
-
103
-
104
-
105
- $zoomdelay:3s;
102
+
106
-
103
+
104
+
107
- .svg_wrap{
105
+ .svg_wrap {
108
106
 
109
107
  text-align: center;
110
108
 
111
109
  margin-top: 40vh;
112
110
 
111
+ }
112
+
113
+
114
+
113
- svg{
115
+ .svg_wrap svg {
114
-
116
+
115
- width: 50vw;
117
+ width: 50vw;
116
-
118
+
117
- height: auto;
119
+ height: auto;
118
-
120
+
119
- animation: zoom 2s;
121
+ animation: zoom 2s;
120
-
122
+
121
- animation-delay: $zoomdelay;
123
+ animation-delay: 3s;
122
-
124
+
123
- animation-fill-mode: forwards;
125
+ animation-fill-mode: forwards;
126
+
124
-
127
+ }
128
+
129
+
130
+
125
- path{
131
+ .svg_wrap svg path {
126
-
132
+
127
- fill:#000;
133
+ fill: #000;
128
-
134
+
129
- fill-opacity: 0;
135
+ fill-opacity: 0;
130
-
136
+
131
- stroke:#000;
137
+ stroke: #000;
132
-
138
+
133
- stroke-width:1px;
139
+ stroke-width: 1px;
134
-
140
+
135
- animation: path $zoomdelay;
141
+ animation: path 3s;
136
-
142
+
137
- animation-fill-mode: forwards;
143
+ animation-fill-mode: forwards;
138
-
144
+
139
- }
145
+ }
140
-
141
- }
142
-
143
- }
144
-
145
-
146
146
 
147
147
 
148
148
 
@@ -154,17 +154,15 @@
154
154
 
155
155
  stroke-dashoffset: 1;
156
156
 
157
- fill-opacity:0;
157
+ fill-opacity: 0;
158
-
158
+
159
- }
159
+ }
160
-
160
+
161
- 50%{
161
+ 50% {
162
162
 
163
163
  stroke-dashoffset: 50;
164
164
 
165
- fill-opacity:0;
165
+ fill-opacity: 0;
166
-
167
-
168
166
 
169
167
  }
170
168
 
@@ -174,31 +172,31 @@
174
172
 
175
173
  stroke-dashoffset: 1000;
176
174
 
177
- fill-opacity:1;
175
+ fill-opacity: 1;
178
-
176
+
179
- }
177
+ }
180
-
178
+
181
- }
179
+ }
182
-
180
+
181
+
182
+
183
- @keyframes zoom{
183
+ @keyframes zoom {
184
-
184
+
185
- 0%{
185
+ 0% {
186
186
 
187
187
  opacity: 1;
188
188
 
189
- transform:scale(1,1)
189
+ transform: scale(1, 1);
190
-
190
+
191
- }
191
+ }
192
-
192
+
193
- 100%{
193
+ 100% {
194
194
 
195
195
  opacity: 0;
196
196
 
197
197
  display: none;
198
198
 
199
- transform:scale(3,3)
199
+ transform: scale(3, 3);
200
-
201
-
202
200
 
203
201
  }
204
202
 

1

gifの表示..

2018/04/21 00:43

投稿

Usagino
Usagino

スコア12

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,9 @@
10
10
 
11
11
 
12
12
 
13
- ![alt gif](https://media.giphy.com/media/B1KK0P6t6JIhH6ZHR1/giphy.gif)
13
+ ![gif](https://media.giphy.com/media/B1KK0P6t6JIhH6ZHR1/giphy.gif)
14
+
15
+
14
16
 
15
17
 
16
18