Hab mir gedacht da ja Halloween vor der Tür steht, möchte vielleicht jemand seinen Header etwas schmücken.
Hier mal 2 Beispiele wie man es machen kann.
CSS
@include screen-lg {
.pageHeaderLogo > a::before {
left: 30px;
top: 90px;
background-image: url(#{$style_image_path}custom/halloweenTown.png);
background-size: cover;
display: block;
content: '';
position: absolute;
}
.pageHeaderLogo > a::before {
height: 100px;
width: 99px;
}
.pageHeaderLogo > a::after {
left: 750px;
top: 40px;
background-image: url(#{$style_image_path}custom/pickup.png);
background-size: cover;
display: block;
content: '';
position: absolute;
}
.pageHeaderLogo > a::after {
height: 100px;
width: 133px;
}
}Ich habe die Bilder über den Stil hoch geladen, deshalb liegen sie im Custom Ordner.
CSS
@include screen-lg {
.pageHeaderLogo > a::before {
left: 750px;
top: 50px;
background-image: url(#{$style_image_path}custom/ghost.png);
background-size: cover;
display: block;
content: '';
position: absolute;
transition: transform .2s; /* Animation */
}
@keyframes floating {
from { transform: translate(0, 0); }
65% { transform: translate(85px, 0); }
to { transform: translate(0, 0); }
}
.pageHeaderLogo > a::before {
height: 60px;
width: 55px;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 25px;
}
}
Viel Spa? beim Spielen.