michael/web-html5-scripts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
a00ad488a2
web-html5-scripts/css-effects/hover-effects-with-sass/style.css

1092 lines
69 KiB
CSS
Raw Normal View History

Update some old scripts and push newest developments
2020-03-07 13:56:01 +01:00
@import url(https://fonts.googleapis.com/css?family=Martel+Sans:200,300,400,800,900);
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Martel Sans', sans-serif;
background-color: #000;
}
section {
height: 350px;
width: 94%;
box-shadow: 0px 0px 146px 21px rgba(0, 0, 0, 0.75);
background-color: #000;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto 0px;
}
section a {
text-transform: uppercase;
text-align: center;
text-decoration: none;
font-size: 4.875em;
font-weight: 900;
color: #fff;
}
section a:after, section a:before {
content: '';
}
section.head {
background-color: #fff;
position: relative;
z-index: 10;
}
section.head a {
width: 652px;
height: 78px;
line-height: 78px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -326px;
margin-top: -39px;
font-weight: 200;
color: #BABABA;
-webkit-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);
-moz-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);
transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);
}
section.head a:before, section.head a:after {
color: #000;
font-weight: 900;
font-size: 30px;
text-transform: none;
display: block;
-webkit-transition: inherit;
-moz-transition: inherit;
transition: inherit;
}
section.head a:before {
content: attr(data-bf);
position: absolute;
top: -45px;
left: -5px;
}
section.head a:after {
content: attr(data-af);
position: absolute;
right: 0;
bottom: -30px;
}
section.head a:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
section.head a:hover:before {
-webkit-transform: scale(1.2) translate(-25px, -15px);
-moz-transform: scale(1.2) translate(-25px, -15px);
-ms-transform: scale(1.2) translate(-25px, -15px);
-o-transform: scale(1.2) translate(-25px, -15px);
transform: scale(1.2) translate(-25px, -15px);
}
section.head a:hover:after {
-webkit-transform: scale(1.2) translate(25px, 15px);
-moz-transform: scale(1.2) translate(25px, 15px);
-ms-transform: scale(1.2) translate(25px, 15px);
-o-transform: scale(1.2) translate(25px, 15px);
transform: scale(1.2) translate(25px, 15px);
}
section.p10 {
background-image: url("//caraujo_pens.surge.sh/images/uZlR2bB.jpg");
}
section.p10 a {
width: 353px;
height: 94px;
line-height: 94px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -176.5px;
margin-top: -47px;
}
section.p10 a:before, section.p10 a:after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border-color: #FF0000;
border-style: solid;
border-width: 0;
-webkit-transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);
-moz-transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);
transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);
-webkit-transform: translate(0px, 0px) scale(0.8);
-moz-transform: translate(0px, 0px) scale(0.8);
-ms-transform: translate(0px, 0px) scale(0.8);
-o-transform: translate(0px, 0px) scale(0.8);
transform: translate(0px, 0px) scale(0.8);
opacity: 0;
}
section.p10 a:before {
left: 0;
bottom: 0;
border-bottom-width: 1px;
border-left-width: 1px;
}
section.p10 a:after {
top: 0;
right: 0;
border-top-width: 1px;
border-right-width: 1px;
}
section.p10 a:hover:before, section.p10 a:hover:after {
-webkit-transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91);
-moz-transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91);
transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91);
opacity: 1;
}
section.p10 a:hover:before {
-webkit-transform: translate(-30px, 20px) scale(1);
-moz-transform: translate(-30px, 20px) scale(1);
-ms-transform: translate(-30px, 20px) scale(1);
-o-transform: translate(-30px, 20px) scale(1);
transform: translate(-30px, 20px) scale(1);
border-bottom-width: 12px;
border-left-width: 12px;
}
section.p10 a:hover:after {
-webkit-transform: translate(30px, -20px) scale(1);
-moz-transform: translate(30px, -20px) scale(1);
-ms-transform: translate(30px, -20px) scale(1);
-o-transform: translate(30px, -20px) scale(1);
transform: translate(30px, -20px) scale(1);
border-top-width: 12px;
border-right-width: 12px;
}
section.p11 {
background-image: url("//caraujo_pens.surge.sh/images/OfpVvOs.jpg");
}
section.p11 a {
width: 314px;
height: 78px;
line-height: 78px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -157px;
margin-top: -39px;
}
section.p11 a:before, section.p11 a:after {
content: '';
position: absolute;
height: 7px;
left: 0;
right: 0;
-webkit-transform: translate(0, 30px);
-moz-transform: translate(0, 30px);
-ms-transform: translate(0, 30px);
-o-transform: translate(0, 30px);
transform: translate(0, 30px);
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
transition: 0.3s all;
opacity: 0;
}
section.p11 a:before {
bottom: -6px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUoAAAAHBAMAAACcthkwAAAAD1BMVEUAAAD/vwD/vwD/vwD/vwBYa2Z+AAAABHRSTlMAwEAw9JyPcwAAAC1JREFUOMtjcMEETgwQwIJFTgEiRWdto64cdeWoK8l2pSAmEIZKMWKRMxgQbQCWVcU78Wj7hwAAAABJRU5ErkJggg==);
-webkit-animation: road 0.9s infinite linear;
-moz-animation: road 0.9s infinite linear;
animation: road 0.9s infinite linear;
}
section.p11 a:after {
bottom: 8px;
background-color: #FFBF00;
}
section.p11 a:hover:before, section.p11 a:hover:after {
-webkit-transform: translate(0, 0px);
-moz-transform: translate(0, 0px);
-ms-transform: translate(0, 0px);
-o-transform: translate(0, 0px);
transform: translate(0, 0px);
opacity: 1;
}
section.p12 {
background-image: url("//caraujo_pens.surge.sh/images/QYS0sMB.jpg");
}
section.p12 a {
padding-top: 50px;
font-weight: 200;
width: 440px;
height: 200px;
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -220px;
margin-top: -100px;
margin-top: -150px;
}
section.p12 a:before {
content: attr(data-content);
color: #465154;
transition: all .5s ease-in;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #fff;
padding-top: 50px;
-webkit-clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
-webkit-animation: montanhaDaTristeza 0.5s forwards linear;
-moz-animation: montanhaDaTristeza 0.5s forwards linear;
animation: montanhaDaTristeza 0.5s forwards linear;
}
section.p12 a:hover:before {
-webkit-animation: montanhaDaAlegria 0.9s forwards linear;
-moz-animation: montanhaDaAlegria 0.9s forwards linear;
animation: montanhaDaAlegria 0.9s forwards linear;
}
section.p14 {
background-image: url("//caraujo_pens.surge.sh/images/0CRoXDg.jpg");
}
section.p14 a {
width: 322px;
height: 94px;
line-height: 94px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -161px;
margin-top: -47px;
z-index: 10;
}
section.p14 a:before, section.p14 a:after {
width: 150px;
height: 150px;
border-radius: 50%;
position: absolute;
display: block;
top: -35%;
right: -10%;
-webkit-transition: all 1s cubic-bezier(0.45, 0.76, 0.58, 0.94);
-moz-transition: all 1s cubic-bezier(0.45, 0.76, 0.58, 0.94);
transition: all 1s cubic-bezier(0.45, 0.76, 0.58, 0.94);
}
section.p14 a:before {
background-color: #011925;
z-index: -1;
}
section.p14 a:after {
background-color: #fff;
z-index: -2;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
section.p14 a:hover:after {
-webkit-transform: scale(1) translate(10px);
-moz-transform: scale(1) translate(10px);
-ms-transform: scale(1) translate(10px);
-o-transform: scale(1) translate(10px);
transform: scale(1) translate(10px);
}
section.p15 {
background-image: url("//caraujo_pens.surge.sh/images/TC4rvkU.jpg");
}
section.p15 a {
width: 274px;
height: 58px;
line-height: 58px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -137px;
margin-top: -29px;
line-height: 1;
}
section.p15 a .in, section.p15 a .t1:before, section.p15 a .t1:after, section.p15 a .t2:before, section.p15 a .t2:after {
content: '';
width: 0px;
height: 19px;
background-color: #fff;
position: absolute;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.46, 1.45);
-moz-transition-timing-function: cubic-bezier(0.17, 0.67, 0.46, 1.45);
transition-timing-function: cubic-bezier(0.17, 0.67, 0.46, 1.45);
}
section.p15 a .t1 {
height: 60px;
width: 48px;
top: 0%;
left: -48px;
position: absolute;
}
section.p15 a .t1 *, section.p15 a .t1:before, section.p15 a .t1:after {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
}
section.p15 a .t1:before {
right: 0;
}
section.p15 a .t1 .in {
right: 0;
top: 22px;
}
section.p15 a .t1:after {
right: 0;
top: 45px;
}
section.p15 a .t2 {
height: 60px;
width: 48px;
top: 0%;
right: -48px;
position: absolute;
}
section.p15 a .t2 *, section.p15 a .t2:before, section.p15 a .t2:after {
-webkit-clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
}
section.p15 a .t2:before {
left: 0;
}
section.p15 a .t2 .in {
left: 0;
top: 22px;
}
section.p15 a .t2:after {
left: 0;
top: 45px;
}
section.p15 a .t1:before, section.p15 a .t2:before {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
section.p15 a .t1 .in, section.p15 a .t2 .in {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
}
section.p15 a .t1:after, section.p15 a .t2:after {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
section.p15 a:hover .in, section.p15 a:hover .t1:before, section.p15 a:hover .t1:after, section.p15 a:hover .t2:before, section.p15 a:hover .t2:after {
width: 48px;
}
section.p15 a:hover .t1:before, section.p15 a:hover .t2:before {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
section.p15 a:hover .t1 .in, section.p15 a:hover .t2 .in {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
}
section.p15 a:hover .t1:after, section.p15 a:hover .t2:after {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
section.p16 {
background-image: url("//caraujo_pens.surge.sh/images/KBhOYIr.jpg");
}
section.p16 a {
width: 632px;
height: 124px;
line-height: 124px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -316px;
margin-top: -62px;
z-index: 10;
overflow: hidden;
}
section.p16 a:before, section.p16 a:after {
position: absolute;
left: 0;
display: block;
height: 150px;
background-size: contain;
opacity: 1;
-webkit-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.64, 1.55);
-moz-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.64, 1.55);
transition: all 0.4s cubic-bezier(0.17, 0.67, 0.64, 1.55);
opacity: 0;
top: 50px;
}
section.p16 a:before {
background-image: url(//caraujo_pens.surge.sh/images/ko4m3Fj.png);
width: 1772px;
z-index: -1;
-webkit-animation: chicaum 60s infinite linear;
-moz-animation: chicaum 60s infinite linear;
animation: chicaum 60s infinite linear;
}
section.p16 a:after {
background-image: url(//caraujo_pens.surge.sh/images/5asE7dv.png);
width: 1682px;
z-index: 1;
-webkit-animation: chicadois 30s infinite linear;
-moz-animation: chicadois 30s infinite linear;
animation: chicadois 30s infinite linear;
}
section.p16 a:hover:before, section.p16 a:hover:after {
opacity: 1;
top: 0;
}
section.p16 a:hover:before {
transition-delay: .2s;
}
section.p17 {
background-image: url("//caraujo_pens.surge.sh/images/cNmoLmL.jpg");
}
section.p17 a {
width: 546px;
height: 94px;
line-height: 94px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -273px;
margin-top: -47px;
}
section.p17 a:before {
content: '';
position: absolute;
width: 334px;
height: 326px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -167px;
margin-top: -163px;
background-size: contain;
opacity: 0;
-webkit-animation: rodarodajequiti 50s infinite linear;
-moz-animation: rodarodajequiti 50s infinite linear;
animation: rodarodajequiti 50s infinite linear;
-webkit-transition: all 1s cubic-bezier(0.17, 0.67, 0.48, 1.32);
-moz-transition: all 1s cubic-bezier(0.17, 0.67, 0.48, 1.32);
transition: all 1s cubic-bezier(0.17, 0.67, 0.48, 1.32);
background-image: url("data:image/png;base64,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
}
section.p17 a:hover:before {
opacity: 1;
}
section.p18 {
background-image: url("//caraujo_pens.surge.sh/images/onQyeOq.jpg");
}
section.p18 a {
text-align: left;
width: 491px;
height: 94px;
line-height: 94px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -245.5px;
margin-top: -47px;
font-size: 3.87500em;
}
section.p18 a:before, section.p18 a:after {
content: '';
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
width: 46px;
height: 65px;
left: -46px;
top: -12%;
}
section.p18 a:before {
-webkit-clip-path: polygon(0 35%, 100% 43%, 100% 100%);
clip-path: polygon(0 35%, 100% 43%, 100% 100%);
}
section.p18 a:after {
-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);
clip-path: polygon(13% 0, 100% 43%, 100% 100%);
}
section.p18 a:hover:before {
-webkit-animation: voavoa 0.1s infinite linear;
-moz-animation: voavoa 0.1s infinite linear;
animation: voavoa 0.1s infinite linear;
}
section.p18 a:hover:after {
-webkit-animation: voavoa2 0.1s infinite linear;
-moz-animation: voavoa2 0.1s infinite linear;
animation: voavoa2 0.1s infinite linear;
}
section.p19 {
background-image: url("//caraujo_pens.surge.sh/images/JXtviCi.jpg");
font-family: 'starjedi_special_edition';
}
section.p19 a {
width: 330px;
height: 55px;
line-height: 55px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -165px;
margin-top: -27.5px;
font-weight: lighter;
}
section.p19 a:before, section.p19 a:after {
content: '';
position: absolute;
width: 13%;
height: 13px;
background-color: #000;
-webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
-moz-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
opacity: 0;
}
section.p19 a:before {
top: -20px;
right: 0;
}
section.p19 a:after {
bottom: -35px;
left: 0;
}
section.p19 a .s1 {
position: absolute;
background-color: #26C9FF;
width: 0;
height: 13px;
top: -20px;
box-shadow: 0px 0px 0px #26C9FF;
right: 13%;
border-radius: 20px 10px 10px 20px;
-webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
-moz-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
}
section.p19 a .s1:before {
content: '';
position: absolute;
left: 0;
top: -1%;
right: 0;
bottom: -15%;
box-shadow: 0px 0px 0px #26C9FF;
border-radius: 20px 10px 10px 20px;
}
section.p19 a .s1:after {
content: '';
position: absolute;
right: 0;
left: 0%;
top: 0;
bottom: 0;
background-color: #FFFFFF;
-webkit-filter: blur(3px);
filter: blur(1px);
box-shadow: inset 0px 0px 10px #26C9FF;
border-radius: 20px 10px 10px 20px;
}
section.p19 a .s2 {
position: absolute;
background-color: #FF0000;
width: 0;
height: 13px;
bottom: -35px;
box-shadow: 0px 0px 0px #FF0000;
left: 13%;
border-radius: 10px 20px 20px 10px;
z-index: 1000;
-webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
-moz-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
}
section.p19 a .s2:before {
content: '';
position: absolute;
left: 0;
top: -1%;
right: 0;
bottom: -15%;
box-shadow: 0px 0px 0px #FF0000;
border-radius: 10px 20px 20px 10px;
}
section.p19 a .s2:after {
content: '';
position: absolute;
right: 0;
left: 0%;
top: 0;
bottom: 0;
background-color: #FFFFFF;
-webkit-filter: blur(3px);
filter: blur(1px);
box-shadow: inset 0px 0px 10px #FF0000;
border-radius: 10px 20px 20px 10px;
}
section.p19 a:hover:before {
opacity: 1;
}
section.p19 a:hover:after {
opacity: 1;
}
section.p19 a:hover .s1 {
width: 87%;
box-shadow: 0px 0px 30px #26C9FF;
top: -20px;
}
section.p19 a:hover .s1:before {
box-shadow: 0px 0px 70px #26C9FF;
}
section.p19 a:hover .s2 {
width: 87%;
box-shadow: 0px 0px 30px #FF0000;
bottom: -35px;
}
section.p19 a:hover .s2:before {
box-shadow: 0px 0px 70px #FF0000;
}
@-webkit-keyframes voavoa {
from {
-webkit-clip-path: polygon(0 35%, 100% 43%, 100% 100%);
clip-path: polygon(0 35%, 100% 43%, 100% 100%);
}
to {
-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);
clip-path: polygon(13% 0, 100% 43%, 100% 100%);
}
}
@-moz-keyframes voavoa {
from {
-webkit-clip-path: polygon(0 35%, 100% 43%, 100% 100%);
clip-path: polygon(0 35%, 100% 43%, 100% 100%);
}
to {
-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);
clip-path: polygon(13% 0, 100% 43%, 100% 100%);
}
}
@keyframes voavoa {
from {
-webkit-clip-path: polygon(0 35%, 100% 43%, 100% 100%);
clip-path: polygon(0 35%, 100% 43%, 100% 100%);
}
to {
-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);
clip-path: polygon(13% 0, 100% 43%, 100% 100%);
}
}
@-webkit-keyframes voavoa2 {
from {
-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);
clip-path: polygon(13% 0, 100% 43%, 100% 100%);
}
to {
-webkit-clip-path: polygon(0 45%, 100% 43%, 100% 100%);
clip-path: polygon(0 45%, 100% 43%, 100% 100%);
}
}
@-moz-keyframes voavoa2 {
from {
-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);
clip-path: polygon(13% 0, 100% 43%, 100% 100%);
}
to {
-webkit-clip-path: polygon(0 45%, 100% 43%, 100% 100%);
clip-path: polygon(0 45%, 100% 43%, 100% 100%);
}
}
@keyframes voavoa2 {
from {
-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);
clip-path: polygon(13% 0, 100% 43%, 100% 100%);
}
to {
-webkit-clip-path: polygon(0 45%, 100% 43%, 100% 100%);
clip-path: polygon(0 45%, 100% 43%, 100% 100%);
}
}
@-webkit-keyframes rodarodajequiti {
from {
-webkit-transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rodarodajequiti {
from {
-moz-transform: rotate(0);
}
to {
-moz-transform: rotate(360deg);
}
}
@keyframes rodarodajequiti {
from {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes chicaum {
from {
-webkit-transform: translate(0px);
}
to {
-webkit-transform: translate(-886px);
}
}
@-moz-keyframes chicaum {
from {
-moz-transform: translate(0px);
}
to {
-moz-transform: translate(-886px);
}
}
@keyframes chicaum {
from {
-webkit-transform: translate(0px);
-moz-transform: translate(0px);
-ms-transform: translate(0px);
-o-transform: translate(0px);
transform: translate(0px);
}
to {
-webkit-transform: translate(-886px);
-moz-transform: translate(-886px);
-ms-transform: translate(-886px);
-o-transform: translate(-886px);
transform: translate(-886px);
}
}
@-webkit-keyframes chicadois {
from {
-webkit-transform: translate(0px);
}
to {
-webkit-transform: translate(-841px);
}
}
@-moz-keyframes chicadois {
from {
-moz-transform: translate(0px);
}
to {
-moz-transform: translate(-841px);
}
}
@keyframes chicadois {
from {
-webkit-transform: translate(0px);
-moz-transform: translate(0px);
-ms-transform: translate(0px);
-o-transform: translate(0px);
transform: translate(0px);
}
to {
-webkit-transform: translate(-841px);
-moz-transform: translate(-841px);
-ms-transform: translate(-841px);
-o-transform: translate(-841px);
transform: translate(-841px);
}
}
@-webkit-keyframes montanhaDaAlegria {
0% {
-webkit-clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
}
25% {
-webkit-clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
}
50% {
-webkit-clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
}
}
@-moz-keyframes montanhaDaAlegria {
0% {
-webkit-clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
}
25% {
-webkit-clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
}
50% {
-webkit-clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
}
}
@keyframes montanhaDaAlegria {
0% {
-webkit-clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
}
25% {
-webkit-clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
}
50% {
-webkit-clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
}
}
@-webkit-keyframes montanhaDaTristeza {
100% {
-webkit-clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
}
50% {
-webkit-clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
}
25% {
-webkit-clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
}
0% {
-webkit-clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
}
}
@-moz-keyframes montanhaDaTristeza {
100% {
-webkit-clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
}
50% {
-webkit-clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
}
25% {
-webkit-clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
}
0% {
-webkit-clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
}
}
@keyframes montanhaDaTristeza {
100% {
-webkit-clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);
}
50% {
-webkit-clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);
}
25% {
-webkit-clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);
}
0% {
-webkit-clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);
}
}
@-webkit-keyframes sobeSol {
0% {
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -5px;
margin-top: -5px;
top: 300%;
opacity: 0;
-webkit-filter: blur(30px);
}
15% {
width: 120px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: -60px;
top: 240%;
opacity: 1;
-webkit-filter: blur(20px);
}
100% {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
top: -300%;
opacity: 1;
-webkit-filter: blur(20px);
}
}
@-moz-keyframes sobeSol {
0% {
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -5px;
margin-top: -5px;
top: 300%;
opacity: 0;
}
15% {
width: 120px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: -60px;
top: 240%;
opacity: 1;
}
100% {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
top: -300%;
opacity: 1;
}
}
@keyframes sobeSol {
0% {
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -5px;
margin-top: -5px;
top: 300%;
opacity: 0;
-webkit-filter: blur(30px);
filter: blur(30px);
}
15% {
width: 120px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: -60px;
top: 240%;
opacity: 1;
-webkit-filter: blur(20px);
filter: blur(20px);
}
100% {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
top: -300%;
opacity: 1;
-webkit-filter: blur(20px);
filter: blur(20px);
}
}
@-webkit-keyframes road {
from {
background-position: 0;
}
to {
background-position: -330px;
}
}
@-moz-keyframes road {
from {
background-position: 0;
}
to {
background-position: -330px;
}
}
@keyframes road {
from {
background-position: 0;
}
to {
background-position: -330px;
}
}
Reference in New Issue Copy Permalink