Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Misteriori</title>
- <style type="text/css">
- body {
- margin: 0;
- padding: 0;
- }
- img.pre-logo {
- margin: 0 auto;
- display: block;
- top: calc(50vh - 196px);
- left: calc(50vw - 111.5px);
- position: absolute;
- animation-name: rotation;
- animation-duration: 5s;
- animation-iteration-count: infinite;
- }
- img.pre-frame-thin {
- margin: 0 auto;
- display: block;
- position: absolute;
- top: calc(50vh - 241.5px);
- left: calc(50vw - 145px);
- animation-name: rotation;
- animation-duration: 5s;
- animation-iteration-count: infinite;
- }
- img.pre-frame-bold {
- margin: 0 auto;
- display: block;
- position: absolute;
- top: calc(50vh - 258.5px);
- left: calc(50vw - 161.5px);
- animation-name: rotation2;
- /* animation-direction: reverse;*/
- animation-duration: 5s;
- animation-iteration-count: infinite;
- }
- @keyframes rotation {
- from {
- transform: rotateY(0deg);
- }
- to {
- transform: rotateY(360deg);
- }
- }
- @keyframes rotation2 {
- from {
- transform: rotateY(0deg);
- -webkit-transform:rotateY(0deg); /* Safari and Chrome */
- }
- to {
- transform: rotateY(-360deg);
- -webkit-transform:rotateY(-360deg); /* Safari and Chrome */
- }
- }
- </style>
- </head>
- <body>
- <div style="width:500px;">
- <img class="pre-logo" src="M.svg" />
- <img class="pre-frame-thin" src="RAMKA CIENKA.svg" />
- <img class="pre-frame-bold" src="RAMKA GRUBA.svg" />
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement