Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added my animation to the project #2559

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added my animation to the project #2559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c584e80
Add Pokemon Button Animation
nandan7198 Jun 6, 2024
59715d5
Added my art to project
nandan7198 Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 150 additions & 0 deletions Art/nandan7198/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pokemon Button</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>
<button>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
class="pokeball"
>
<path
stroke="#000"
fill="#fe0505"
d="m26.425 16.455a10.925 10.925 0 0 1 -10.925 10.925 10.925 10.925 0 0 1 -10.925-10.925 10.925 10.925 0 0 1 10.925-10.925 10.925 10.925 0 0 1 10.925 10.925z"
></path>
<path
stroke="#000"
fill-rule="evenodd"
fill="#fff"
d="m26.245 17.168c-1.024.744-1.984 1.248-3.282 1.757-4.738 1.84-10.565 1.816-15.271-.06-1.13-.455-2.12-.99-3.042-1.626.387 5.753 5.119 10.207 10.885 10.207 6.491-.256 10.32-5.361 10.71-10.278z"
></path>
<path
transform="translate(0 -1020.362)"
fill-rule="evenodd"
d="m26.196 1036.339-.508.406c-.94.682-1.83 1.116-3.088 1.61-4.476 1.737-10.09 1.715-14.535-.055h-.004a15.14 15.14 0 0 1 -2.568-1.32c-.02-.014-.166-.133-.354-.263l-.842 1.431c.04.028-.105.372.11.51.89.577 1.867 1.078 2.912 1.499h.002c4.968 1.98 11.005 2.003 16.004.062h.004c1.337-.525 2.43-1.053 3.537-1.856l-.038-.18-.128-.85-.504-.993z"
></path>
<path
stroke="#000"
fill="#fff"
d="m17.976 19.69a2.4 2.4 0 0 1 -2.4 2.4 2.4 2.4 0 0 1 -2.4-2.4 2.4 2.4 0 0 1 2.4-2.4 2.4 2.4 0 0 1 2.4 2.4z"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="250"
viewbox="0 0 451.103 424.198"
height="100"
class="pika"
>
<path
stroke-width="2.808"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#000"
fill="#fff22d"
d="m160.524 320.079-46.872-17.64 15.048-20.088s-51.912-16.704-64.439-21.744l42.695-87.12-90.432-8.352-15.12-77.112 180.936 43.56-61.991 108.936 48.6 21.744-26.856 33.48 30.169 20.16z"
></path>
<path
fill="#e8d031"
d="m114.588 302.223 15.048-20.16-.792-.216-.072-.072-.216-.072-.216-.072-.36-.072-.36-.144-.504-.144-.504-.144-.576-.216-.576-.216-.72-.216-.72-.216-.792-.288-.864-.288-.864-.288-.936-.288-1.008-.288-1.007-.36-1.009-.36-1.152-.36-1.08-.36-1.152-.36-1.224-.36-1.224-.432-1.224-.36-1.224-.432-1.295-.432-1.297-.432-1.367-.432-1.369-.504-2.376-.792-.288-.72 16.056 3.888-6.768-12.672 17.064 2.376-3.816-12.312 16.848 5.328-3.312-10.008 30.672 13.752-26.711 33.408 29.735 19.8-10.512 3.744z"
></path>
<path
stroke-width="2.808"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#000"
fill="#e8d031"
d="m191.484 383.583s-21.672 21.96-25.632 34.561c-3.96 12.672 37.944-2.16 64.584-25.128 26.712-23.113-38.952-9.433-38.952-9.433zm144.288 0s21.672 21.96 25.631 34.561c3.961 12.672-37.872-2.16-64.583-25.128-26.712-23.113 38.952-9.433 38.952-9.433z"
></path>
<path
stroke-width="2.808"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#000"
fill="#fff22d"
d="m179.316 198.399c-12.6-13.176-20.88-36.144-18.072-50.832 3.096-15.912 9.288-31.608 10.368-40.248 1.008-8.64 6.984-26.928 7.272-26.784-16.776-5.4-37.513-15.264-51.48-28.512-13.968-13.176-46.008-42.408-42.696-48.888 3.456-6.696 47.16 7.704 69.048 14.76 21.961 7.056 47.664 28.512 47.448 28.944.145.36 35.424-16.992 68.256-16.272 32.761.648 52.776 9 63.576 15.912-.216-.072 25.489-21.528 47.375-28.584 21.889-7.056 65.592-21.456 69.049-14.76 3.312 6.48-28.729 35.712-42.695 48.888-13.969 13.248-32.113 23.112-48.889 28.512.287-.144 6.119 11.088 7.92 22.32 1.729 11.232 5.039 27.72 9.072 43.416 3.24 12.744-2.305 38.952-16.057 53.136-1.799 2.52 29.305 72 24.984 110.448-4.393 38.448-13.32 66.024-37.225 78.12-23.616 11.952-123.624 5.04-148.607-1.512-22.681-5.976-41.041-32.904-49.681-73.512s31.61-112.968 31.034-114.552z"
></path>
<path
d="m329.58 95.655c9.937 0 18 7.2 18 16.056s-8.063 16.056-18 16.056c-9.863 0-18-7.2-18-16.056s8.137-16.056 18-16.056zm-120.24 1.152c9.864 0 18 7.2 18 16.056 0 8.784-8.136 15.984-18 15.984-9.936 0-18-7.2-18-15.984 0-8.856 8.064-16.056 18-16.056zm50.832 35.856 4.824 5.04c.576.576 1.225.576 1.872-.072l5.472-5.112c.36-.576.145-.864-.504-.792h-10.8c-1.08.072-1.224.432-.864.936z"
></path>
<g stroke="#000">
<path
stroke-width="2.808"
stroke-linejoin="round"
stroke-linecap="round"
fill="#905744"
d="m247.644 161.319c13.824-2.664 18.72-7.488 18.72-7.488s3.672 4.536 15.696 7.344c-15.192 54.432-34.416 1.44-34.416.144z"
></path>
<path
stroke-width=".216"
d="m408.995 50.007c14.832-13.968 43.633-40.68 40.465-46.872-1.943-3.888-17.352-.72-34.271 4.032-.504 2.664 3.168 12.528-1.369 26.712-1.584 5.04-3.313 10.656-4.825 16.128zm-284.183-41.184c-19.008-5.544-37.872-10.008-40.104-5.688-3.312 6.48 28.729 35.712 42.696 48.888 2.304 2.16 4.824 4.32 7.632 6.48-1.8-8.784-5.184-20.232-8.208-29.664-2.664-8.424-2.52-15.264-2.016-20.016z"
></path>
<path
stroke-width="2.808"
stroke-linejoin="round"
stroke-linecap="round"
fill="#cc2229"
d="m347.075 146.271c8.785 0 15.984 7.488 15.984 16.632s-7.199 16.632-15.984 16.632c-8.784 0-15.984-7.488-15.984-16.632.001-9.144 7.201-16.632 15.984-16.632zm-158.471-5.04c8.784 0 15.983 7.488 15.983 16.632s-7.199 16.56-15.983 16.56-15.984-7.416-15.984-16.56 7.2-16.632 15.984-16.632zm91.368 26.712c-11.305 32.76-24.192 12.384-29.592.36 3.888-3.816 9.144-6.192 14.976-6.192 5.544 0 10.728 2.232 14.616 5.832z"
></path>
<path
stroke-width="2.808"
stroke-linejoin="round"
stroke-linecap="round"
fill="none"
d="m266.364 153.615c7.056 6.264 25.776 13.536 32.112.792m-32.112-.792c-7.2 5.76-25.848 13.536-32.184.792"
></path>
</g>
<path
fill="#fff"
d="m267.084 132.591c1.656 0 2.952.432 2.952.937 0 .576-1.296 1.008-2.952 1.008-1.584 0-2.88-.432-2.88-1.008 0-.505 1.296-.937 2.88-.937z"
></path>
<path
stroke-width="3.168"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#000"
fill="none"
d="m227.052 231.015s7.632 5.112 14.832 32.112c4.392 16.632 11.304 20.376 13.248 24.696 1.943 4.392 4.319 10.584-1.368 7.2-5.688-3.384-7.416-3.024-5.185 1.584 2.305 4.608 1.08 7.488-7.056 1.512-6.048-4.392-5.976.504-4.248 3.024s1.656 9.504-5.472 3.312c-7.057-6.12-9.217-3.6-7.128.792 2.088 4.32 3.743 9.792-7.057 2.232-3.239-2.232-8.063-11.952-12.815-17.208-11.232-12.456-24.265-24.48-28.801-42.336"
></path>
<path
stroke-width="3.456"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#000"
fill="none"
d="m308.34 242.679s-6.407 5.976-7.703 31.176c-.864 15.552-6.84 20.16-7.849 24.336-1.008 4.248-2.016 10.152 2.88 6.12 4.824-4.032 6.553-4.104 5.328.432-1.224 4.464.576 6.768 7.272-.072 4.968-4.968 5.903-.648 4.752 1.872-1.152 2.592.432 8.712 6.048 1.944s8.28-4.968 7.128-.72-1.584 9.36 7.416.72c2.664-2.592 5.4-12.096 8.928-17.64 8.352-13.176 18.576-26.208 19.225-42.912"
></path>
<path
stroke-width=".936"
stroke="#000"
fill="none"
d="m166.068 421.383 12.096-13.32m183.025 13.32-12.098-13.32m-179.279 14.256 15.84-10.728m171.865 10.728-15.84-10.728"
></path>
<path
fill="#e8d031"
d="m405.181 52.815c-13.752 12.528-31.248 21.888-47.449 27.072h-.072c-4.104-7.848-8.424-18.144-11.736-19.224 26.064 3.528 45.864-1.656 59.257-7.848zm-269.569 5.4c14.976 10.512 29.016 17.28 43.776 21.672 4.176-7.848 8.063-14.976 11.376-19.008-26.064 3.528-41.76 3.528-55.152-2.664zm106.273 160.776c1.943 2.304 33.983 9.36 52.344-.144-27.505 38.16-53.713.432-52.344.144z"
></path>
<path
fill="#fff"
d="m335.7 99.471c2.88 0 5.184 2.304 5.184 5.04 0 2.808-2.304 5.04-5.184 5.04-2.808 0-5.112-2.232-5.112-5.04 0-2.736 2.304-5.04 5.112-5.04zm-120.24 1.152c2.809 0 5.112 2.232 5.112 5.04s-2.304 5.04-5.112 5.04c-2.88 0-5.184-2.232-5.184-5.04s2.304-5.04 5.184-5.04z"
></path>
<path
fill="#e8d031"
d="m175.788 249.303c-1.439 8.424-2.304 15.336 10.513 35.784 12.743 20.448 28.728 21.384 28.728 21.384s-6.768-10.368-9.504-14.04-9.792-10.224-14.472-15.984c-2.953-3.168-11.593-13.968-15.265-27.144zm183.241 128.952c-3.6 3.528-7.705 6.552-12.457 8.928-23.616 11.952-123.624 4.968-148.607-1.584-12.528-3.24-23.688-12.96-32.688-27.792 13.104 8.064 32.184 18.576 42.768 19.656 17.353 1.656 38.017-5.112 52.776-4.68 14.76.432 34.561 8.856 56.88 8.856 14.327 0 28.294-.504 41.328-3.384zm1.439-118.152s-2.305 5.544-4.32 9.864c-1.943 4.32-6.48 11.304-8.279 13.68-1.801 2.304-4.824 6.984-5.904 9.144-2.016 4.104-3.528 8.784-5.904 12.6 0 0 4.104-3.744 6.48-6.984 2.305-3.24 8.568-9.936 12.168-15.84 3.599-5.904 5.759-22.464 5.759-22.464z"
></path>
</svg>
<span class="go">go!</span>
<span class="pword">pika</span>
<span class="pword2">pika</span>
</button>
</div>
</body>
</html>
Binary file added Art/nandan7198/pokemonAnimation.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
120 changes: 120 additions & 0 deletions Art/nandan7198/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
body {
background-color: #121212;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
button {
position: relative;
width: 150px;
height: 60px;
overflow: hidden;
border: 1px solid black;
border-radius: 50px;
padding-left: 35px;
box-shadow: 2.9px 2.9px 2.2px rgba(0, 0, 0, 0.019),
5.2px 5.2px 5.3px rgba(0, 0, 0, 0.023), 7px 7px 10px rgba(0, 0, 0, 0.025),
8.7px 8.7px 17.9px rgba(0, 0, 0, 0.024),
11.3px 11.3px 33.4px rgba(0, 0, 0, 0.023),
20px 20px 80px rgba(0, 0, 0, 0.02);
}

.pika {
position: absolute;
top: -100%;
left: 42%;
transition: 0.5s all;
animation: tilt 1.1s infinite ease-in-out;
}

@keyframes tilt {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}

50% {
transform: translate(-50%, -50%) rotate(10deg);
}

100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}

.pokeball {
position: absolute;
top: 25%;
left: 10%;
animation: rotate_4991 1s linear infinite;
}

@keyframes rotate_4991 {
0% {
transform: rotate(0);
}

100% {
transform: rotate(360deg);
}
}

button:hover .pika {
top: 90%;
}

button:hover .pokeball {
animation: none;
transform: scale(0);
}

button:hover .go {
color: transparent;
}

.go {
position: absolute;
top: 18%;
left: 45%;
font-size: 30px;
font-weight: 900;
letter-spacing: 1px;
}

.pword,
.pword2 {
position: absolute;
font-size: 13px;
opacity: 0;
animation: pulse-animation_0011 1s infinite;
}

@keyframes pulse-animation_0011 {
0% {
transform: rotatez(-30deg) scale(1);
}

50% {
transform: rotatez(-30deg) scale(1.1);
}

100% {
transform: rotatez(-30deg) scale(1);
}
}

.pword {
top: 30%;
left: 72%;
}

.pword2 {
top: 55%;
left: 75%;
}

button:hover .pword,
button:hover .pword2 {
opacity: 1;
}
7 changes: 7 additions & 0 deletions include.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2903,6 +2903,13 @@ let cards = [
author: 'Kalliran',
githubLink: 'https://github.com/Kalliran'
},
{
artName: 'Pokemon Button Animation',
pageLink: './Art/nandan7198/index.html',
imageLink: './Art/nandan7198/pokemonAnimation.gif',
author: 'Nandan S',
githubLink: 'https://github.com/nandan7198/'
},
];

/* -------------------------------------------------------------------------- */
Expand Down