Auto-hebergement_rdelaage
/
rdelaage.ovh
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

animation

This commit is contained in:
Romain de Laage 2020-01-31 15:20:00 +01:00
parent f45e20c88b
commit 29e6529b51
1 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
anim.html Normal file
View File

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<title>Site vitrine - Romain de Laage</title>
<meta charset="utf8" />
<link rel="icon" href="logo2.svg" />
</head>
<style>
body{
background:black;
}
#yellow{
animation-duration: 3s;
animation-name: yellow;
animation-iteration-count: infinite;
}
#blue{
animation-duration: 3s;
animation-name: blue;
animation-iteration-count: infinite;
animation-delay: 1s;
}
#red{
animation-duration: 3s;
animation-name: red;
animation-iteration-count: infinite;
animation-delay: 2s;
}
@keyframes blue{
0%{
fill:#F0F0F0;
}
50%{
fill:blue;
}
100%{
fill:#F0F0F0;
}
}
@keyframes red{
0%{
fill:#F0F0F0;
}
50%{
fill:red;
}
100%{
fill:#F0F0F0;
}
}
@keyframes yellow{
0%{
fill:#F0F0F0;
}
50%{
fill:yellow;
}
100%{
fill:#F0F0F0;
}
}
</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="225" width="225">
<g transform="translate(55,37)" id="content">
<rect id="yellow" ry="5" rx="5" y="0" x="0" height="150" width="50" fill="white" />
<rect id="blue" ry="5" rx="5" y="0" x="65" height="90" width="50" fill="white" />
<circle id="red" r="25" cy="125" cx="90" fill="white" />
</g>
</svg>
</body>
</html>