animation
This commit is contained in:
parent
f45e20c88b
commit
29e6529b51
|
@ -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>
|
Reference in New Issue