استایل زیبا با scss برای هاور - Stuing Hover Effects (نمونه 7) : افکت شهر متحرک

@import url(http://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.p16 {

background-image: url("7.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(7-1.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(7-2.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;

}

@-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);

}

}

سون لرن • آموزش...