Project-Pro/fr.vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change logo + add animation

Browse Source
This commit is contained in:
Roman Pyrih
2025-11-21 15:42:08 +01:00
parent 439f8792b5
commit bcf5353884
3 changed files with 96 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
wp-content/themes/hello-elementor/assets/styles/custom.css
View File

File diff suppressed because one or more lines are too long

2
wp-content/themes/hello-elementor/assets/styles/custom.css.map
View File

File diff suppressed because one or more lines are too long

94
wp-content/themes/hello-elementor/assets/styles/custom.scss
View File

@@ -1383,3 +1383,97 @@ header {
// }
// }
// }
.header-logo {
min-height: 60px;
min-width: 150px;
> .e-con-inner {
position: relative;
transform-style: preserve-3d;
width: 100%;
height: 100%;
.box-logo-absolute {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 60px;
object-fit: contain;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-animation: action-logo 4s linear infinite alternate;
-webkit-animation: action-logo 4s linear infinite alternate;
-ms-animation: none;
&.box-logo-absolute-front {
}
&.box-logo-absolute-back {
transform: rotateY(180deg);
-moz-animation: action-logo-back 4s linear infinite alternate;
-webkit-animation: action-logo-back 4s linear infinite alternate;
-ms-animation: none;
}
img {
width: 100%;
height: 60px;
object-fit: contain;
}
}
}
}
@keyframes action-logo {
0% {
transform: rotateY(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
40% {
transform: rotateY(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
61% {
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
100% {
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
@keyframes action-logo-back {
0% {
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
40% {
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
61% {
transform: rotateY(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
100% {
transform: rotateY(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}