html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--
Designed & Coded By Sudeep Jaiswal
Name: Ghost Animation 👻
Date: March 05, 2020
Inspired from: https://pin.it/66ffu9J
-->
<!DOCTYPE html>
<html>
<head>
<title>Ghost Animation 👻</title>
</head>
<body>
<svg
width="210mm"
height="297mm"
viewBox="0 0 210 297">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter886"
x="-0.036"
width="1.072"
y="-0.036"
height="1.072">
<feGaussianBlur
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*
Designed & Coded By Sudeep Jaiswal
Name: Ghost Animation
Date: March 05, 2020
Inspired from: https://pin.it/66ffu9J
*/
body {
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0;
width:100vw;
height:100vh;
background: #bdc3c7;
}
svg{
width:100%;
height:100%;
}
#ghost{
animation:3s moveY linear infinite;
}
@keyframes moveY{
25%{
transform:translateY(-1.3vh);
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
/*
Designed & Coded By Sudeep Jaiswal
Name: Ghost Animation
Date: March 05, 2020
Inspired from: https://pin.it/66ffu9J
//No JS required 👻
*/
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run