css3价格斜切_CSS3+JS 两张图片斜切组合的效果

CSS

语言：

CSSSCSS

确定

body {

color: #444;

font-size: 18px;

}

.hero {

position: relative;

width: 100%;

height: 500px;

overflow: hidden;

}

.image-container {

display: block;

position: absolute;

width: 120%;

height: 100%;

transform: skew(-20deg);

overflow: hidden;

}

.image-container.image-1 {

display: block;

right: 50%;

z-index: 1;

}

.image-container.image-1 .image {

background-image: url(http://ericbrewer.ca/images/stockImages/newYork.jpg);

transform: skew(20deg) translateY(-300px) translateX(200px);

}

.image-container.image-2 {

left: 50%;

z-index: 2;

}

.image-container.image-2 .image {

background-image: url(http://ericbrewer.ca/images/stockImages/wheatField.jpg);

margin-left: -100px;

transform: skew(20deg) translateY(300px) translateX(-200px);

}

.image {

display: block;

width: 130%;

height: 100%;

background: transparent no-repeat center center;

background-size: cover;

transform: skew(20deg);

transition: all .3s ease-out;

opacity: 0;

}

.image.active {

transform: skew(20deg) !important;

opacity: 1;

}

.btn {

display: block;

position: absolute;

top: 60%;

left: 50%;

width: 200px;

height: 60px;

line-height: 60px;

padding: 0;

text-align: center;

font-size: 20px;

text-transform: uppercase;

color: white;

transform: translate(-50%, -50%);

opacity: 0;

z-index: 1000;

box-shadow: none !important;

border-radius: 0 !important;

overflow: hidden;

}

.btn:after {

display: block;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

content: "";

background: white;

width: 10px;

height: 10px;

border-radius: 50%;

opacity: 0;

z-index: -1;

transition: all .4s ease-out;

}

.btn.active {

opacity: 1;

transition: all .3s ease-out, opacity .2s .5s ease-out;

}

.btn.active:hover {

color: #62757f;

}

.btn.active:hover:after {

opacity: 1;

width: 300px;

height: 200px;

}

.btn.active .side {

opacity: 1;

}

.btn.active .top,

.btn.active .bottom {

width: 100% !important;

}

.btn.active .left,

.btn.active .right {

height: 100% !important;

}

.btn .side {

display: block;

position: absolute;

background: white;

content: "";

transition: all .3s .5s ease-out;

opacity: 0;

}

.btn .side.top {

top: 0;

left: 0;

width: 0%;

height: 2px;

}

.btn .side.bottom {

bottom: 0;

right: 0;

width: 0%;

height: 2px;

}

.btn .side.left {

bottom: 0;

left: 0;

width: 2px;

height: 0%;

}

.btn .side.right {

top: 0;

right: 0;

width: 2px;

height: 0%;

}

h1 {

display: block;

position: relative;

top: 25%;

text-transform: uppercase;

z-index: 101;

color: white;

font-size: 60px;

font-style: italic;

width: 100%;

}

h1 span {

opacity: 0;

}

h1.active span {

opacity: 1;

transform: translateY(0px) !important;

transition: all .3s .5s ease-out;

}

h1 .demi {

position: absolute;

right: 50%;

transform: translateY(100px) translateX(-40px);

}

h1 .hero {

position: absolute;

left: 50%;

transform: translateY(-100px) translateX(40px);

}

p {

text-align: center;

font-size: 22px;

line-height: 30px;

max-width: 80%;

margin: 60px auto;

}

i {

position: relative;

font-size: 16px !important;

margin: 0 10px;

}

i:after {

display: block;

position: absolute;

width: 25px;

height: 25px;

border: 1px solid #444;

content: "";

top: -50%;

left: -100%;

border-radius: 50%;

border-top-color: transparent;

border-bottom-color: transparent;

animation: expand 1s ease-out infinite;

}

@keyframes expand {

0% {

opacity: 0;

transform: scale(0.5);

}

10% {

opacity: 1;

}

100% {

opacity: 0;

transform: scale(1);

}

}