css 图片开窗特效,CSS3 开窗/翻板动效

CSS

语言：

CSSSCSS

确定

.loader {

position: absolute;

width: 100px;

height: 100px;

left: 50%;

top: 50%;

margin: -50px;

-moz-perspective: 180px;

-webkit-perspective: 180px;

perspective: 180px;

-moz-perspective-origin: 50% 50%;

-webkit-perspective-origin: 50% 50%;

perspective-origin: 50% 50%;

}

.loader .loader--element {

position: absolute;

width: 50%;

height: 50%;

right: 50%;

bottom: 50%;

background: #38d090;

border-radius: 3px 3px 0 3px;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-webkit-transform-origin: 100% 100%;

transform-origin: 100% 100%;

-moz-animation: loader-rotate 1.8s infinite;

-webkit-animation: loader-rotate 1.8s infinite;

animation: loader-rotate 1.8s infinite;

-moz-animation-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);

-webkit-animation-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);

animation-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);

}

.loader .loader--element.loader--element-1 {

width: 50%;

height: 50%;

}

.loader .loader--element.loader--element-2 {

width: 25%;

height: 25%;

-moz-animation-delay: -1s;

-webkit-animation-delay: -1s;

animation-delay: -1s;

}

@-moz-keyframes loader-rotate {

0% {

background: #38d090;

-moz-transform: rotate3d(0, 0, 0, 180deg);

transform: rotate3d(0, 0, 0, 180deg);

}

25% {

background: #38d090;

-moz-transform: rotate3d(-1, 0, 0, 180deg);

transform: rotate3d(-1, 0, 0, 180deg);

}

50% {

background: #38d090;

-moz-transform: rotate3d(0, 0, -1, -180deg);

transform: rotate3d(0, 0, -1, -180deg);

}

75% {

background: #38d090;

-moz-transform: rotate3d(0, -1, 0, 180deg);

transform: rotate3d(0, -1, 0, 180deg);

}

100% {

background: #38d090;

-moz-transform: rotate3d(0, -1, 0, 360deg);

transform: rotate3d(0, -1, 0, 360deg);

}

12.5%,

37.5%,

65.5%,

87.5% {

background: #29ac75;

}

}

@-webkit-keyframes loader-rotate {

0% {

background: #38d090;

-webkit-transform: rotate3d(0, 0, 0, 180deg);

transform: rotate3d(0, 0, 0, 180deg);

}

25% {

background: #38d090;

-webkit-transform: rotate3d(-1, 0, 0, 180deg);

transform: rotate3d(-1, 0, 0, 180deg);

}

50% {

background: #38d090;

-webkit-transform: rotate3d(0, 0, -1, -180deg);

transform: rotate3d(0, 0, -1, -180deg);

}

75% {

background: #38d090;

-webkit-transform: rotate3d(0, -1, 0, 180deg);

transform: rotate3d(0, -1, 0, 180deg);

}

100% {

background: #38d090;

-webkit-transform: rotate3d(0, -1, 0, 360deg);

transform: rotate3d(0, -1, 0, 360deg);

}

12.5%,

37.5%,

65.5%,

87.5% {

background: #29ac75;

}

}

@keyframes loader-rotate {

0% {

background: #38d090;

-moz-transform: rotate3d(0, 0, 0, 180deg);

-ms-transform: rotate3d(0, 0, 0, 180deg);

-webkit-transform: rotate3d(0, 0, 0, 180deg);

transform: rotate3d(0, 0, 0, 180deg);

}

25% {

background: #38d090;

-moz-transform: rotate3d(-1, 0, 0, 180deg);

-ms-transform: rotate3d(-1, 0, 0, 180deg);

-webkit-transform: rotate3d(-1, 0, 0, 180deg);

transform: rotate3d(-1, 0, 0, 180deg);

}

50% {

background: #38d090;

-moz-transform: rotate3d(0, 0, -1, -180deg);

-ms-transform: rotate3d(0, 0, -1, -180deg);

-webkit-transform: rotate3d(0, 0, -1, -180deg);

transform: rotate3d(0, 0, -1, -180deg);

}

75% {

background: #38d090;

-moz-transform: rotate3d(0, -1, 0, 180deg);

-ms-transform: rotate3d(0, -1, 0, 180deg);

-webkit-transform: rotate3d(0, -1, 0, 180deg);

transform: rotate3d(0, -1, 0, 180deg);

}

100% {

background: #38d090;

-moz-transform: rotate3d(0, -1, 0, 360deg);

-ms-transform: rotate3d(0, -1, 0, 360deg);

-webkit-transform: rotate3d(0, -1, 0, 360deg);

transform: rotate3d(0, -1, 0, 360deg);

}

12.5%,

37.5%,

65.5%,

87.5% {

background: #29ac75;

}

}