Skip to content

Instantly share code, notes, and snippets.

@cjdenio
Last active October 22, 2020 14:27
Show Gist options
  • Save cjdenio/efc9f7645025288725c2d2e5aa095ccf to your computer and use it in GitHub Desktop.
Save cjdenio/efc9f7645025288725c2d2e5aa095ccf to your computer and use it in GitHub Desktop.
main {
perspective: 60em;
}
.post::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 300px;
display: block;
background: url('https://doggo.ninja/4yYF9v.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
transition: transform 1s;
transform: translateY(-100%);
pointer-events: none;
}
.post:hover::before {
transform: none;
}
.post {
overflow: hidden;
}
header {
background: url('https://doggo.ninja/JfPhTS.png');
background-repeat: repeat-x;
background-position: center left;
animation: conga 20s infinite linear;
}
header p {
background: rgba(255, 255, 255, 0.7);
margin: 0 auto;
width: 300px;
border-radius: 20px;
}
header img {
background-color: lightblue;
}
header::before {
content: 'CONGA!!!!';
position: absolute;
left: 0px;
font-size: 50px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
}
@keyframes conga {
from {
background-position: center left;
}
to {
background-position: center right;
}
}
@keyframes cool {
from {
transform: none;
}
50% {
transform: rotateX(-20deg);
}
to {
transform: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment