css3制作翻滚动画,css3之图片波浪翻滚动画

冷不防 2022-09-02 14:53 248阅读 0赞

.pic1,.pic2,.pic3,.pic4,.pic5,.line1,.line2,.line3,.line4\_1,.line4\_2,.line4\_3,.line4\_4,.line4\_5\{

background: url(../images/total\_pic.png) no-repeat;opacity:

.line1,.line2,.line3,.line4\_1,.line4\_2,.line4\_3,.line4\_4,.line4\_5\{

\-webkit-transform-origin:top center;

transform-origin:top center;

.pic1,.pic2,.pic3,.pic4\{

\-webkit-animation:change 0.8s ease-in-out forwards;

animation:change 0.8s ease-in-out forwards;

.line1,.line2,.line3\{

\-webkit-animation:show 0.6s ease-in-out forwards;

animation:show 0.6s ease-in-out forwards;

.line4\_1,.line4\_2,.line4\_3,.line4\_4,.line4\_5\{

float:left;margin-right: 33px;width:

140px;height:19px;margin-top: -1px;

.pic1\{

background-position:0 0;width: 846px;height: 140px;

.pic2\{

background-position:0 -159px;width: 846px;height: 95px;

\-webkit-animation-delay:0.6s;

animation-delay:0.6s;

.pic3\{

background-position:0 -270px;width: 846px;height: 43px;

\-webkit-animation-delay:1.1s;

animation-delay:1.1s;

.pic4\{

background-position:0 -333px;width: 846px;height: 90px;

\-webkit-animation-delay:1.6s;

animation-delay:1.6s;

.pic5\{

background-position:0 -480px;width:

846px;height:157px;margin-top: 20px;

\-webkit-animation:change 1.6s ease-in-out 2.5s

forwards;

animation:change 1.6s ease-in-out 2.5s forwards;

.line1\{

background-position:0 -140px;width: 846px;height: 19px;

\-webkit-animation-delay:0.5s;

animation-delay:0.5s;

.line2\{

background-position:0 -254px;width: 846px;height: 16px;

\-webkit-animation-delay:1s;

animation-delay:1s;

.line3\{

background-position:0 -313px;width: 846px;height: 20px;

\-webkit-animation-delay:1.5s;

animation-delay:1.5s;

.line4\_1\{

background-position:0 -140px;

\-webkit-animation:Mrotate1 0.6s ease-in-out 2s

forwards;

animation:Mrotate1 0.6s ease-in-out 2s forwards;

.line4\_2\{

background-position:-176px -140px;

\-webkit-animation:Mrotate2 0.6s ease-in-out 2s

forwards;

animation:Mrotate2 0.6s ease-in-out 2s forwards;

.line4\_3\{

background-position:-348px -140px;

\-webkit-animation:Mrotate3 0.6s ease-in-out 2s

forwards;

animation:Mrotate3 0.6s ease-in-out 2s forwards;

.line4\_4\{

background-position:-521px -140px;

\-webkit-animation:Mrotate4 0.6s ease-in-out 2s

forwards;

animation:Mrotate4 0.6s ease-in-out 2s forwards;

.line4\_5\{

background-position:-693px -140px;

\-webkit-animation:Mrotate5 0.6s ease-in-out 2s

forwards;

animation:Mrotate5 0.6s ease-in-out 2s forwards;

@-webkit-keyframes change\{

from\{

\-webkit-transform:rotateX(180deg);

to\{

opacity: 1;

\-webkit-transform:rotateX(360deg);

@keyframes change\{

from\{

transform:rotateX(180deg);

to\{

opacity: 1;

transform:rotateX(360deg);

@-webkit-keyframes show\{

from\{

\-webkit-transform:scaleY(0);

to\{

opacity: 1;

\-webkit-transform:scaleY(1);

@keyframes show\{

from\{

transform:scaleY(0);

to\{

opacity: 1;

transform:scaleY(1);

@-webkit-keyframes Mrotate1\{

from\{

\-webkit-transform:rotate(0) scaleY(0);

50%\{

opacity: 1;

\-webkit-transform:rotate(0) scaleY(15);

100%\{

opacity: 1;

\-webkit-transform:rotate(-70deg) scaleY(15);

@keyframes Mrotate1\{

from\{

transform:rotate(0) scaleY(0);

50%\{

opacity: 1;

transform:rotate(0)

scaleY(15);

100%\{

opacity: 1;

transform:rotate(-70deg) scaleY(15);

@-webkit-keyframes Mrotate2\{

from\{

\-webkit-transform:rotate(0) scaleY(0);

50%\{

opacity: 1;

\-webkit-transform:rotate(0) scaleY(7);

100%\{

opacity: 1;

\-webkit-transform:rotate(-54deg) scaleY(7);

@keyframes Mrotate2\{

from\{

transform:rotate(0) scaleY(0);

50%\{

opacity: 1;

transform:rotate(0)

scaleY(7);

100%\{

opacity: 1;

transform:rotate(-54deg) scaleY(7);

@-webkit-keyframes Mrotate3\{

from\{

\-webkit-transform:scaleY(0);

100%\{

opacity: 1;

\-webkit-transform:scaleY(1.5);

@keyframes Mrotate3\{

from\{

transform:scaleY(0);

100%\{

opacity: 1;

transform:scaleY(1.5);

@-webkit-keyframes Mrotate4\{

from\{

\-webkit-transform:rotate(0) scaleY(0);

50%\{

opacity: 1;

\-webkit-transform:rotate(0) scaleY(7);

100%\{

opacity: 1;

\-webkit-transform:rotate(54deg) scaleY(7);

@keyframes Mrotate4\{

from\{

transform:rotate(0) scaleY(0);

50%\{

opacity: 1;

transform:rotate(0)

scaleY(7);

100%\{

opacity: 1;

transform:rotate(54deg) scaleY(7);

@-webkit-keyframes Mrotate5\{

from\{

\-webkit-transform:rotate(0) scaleY(0);

50%\{

opacity: 1;

\-webkit-transform:rotate(0) scaleY(15);

100%\{

opacity: 1;

\-webkit-transform:rotate(70deg) scaleY(15);

@keyframes Mrotate5\{

from\{

transform:rotate(0) scaleY(0);

50%\{

opacity: 1;

transform:rotate(0)

scaleY(15);

100%\{

opacity: 1;

transform:rotate(70deg) scaleY(15);

css3制作翻滚动画,css3之图片波浪翻滚动画

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS3 制作网页动画

相关【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

相关【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

相关 CSS3动画序列（CSS3）

相关 css3动画制作转动相册

相关 css3制作翻滚动画,css3之图片波浪翻滚动画

相关 css3图片旋转动画

相关 CSS3动画

相关 CSS3动画

相关 CSS3动画