上效果
效果描述:原来这些图片都绝对定位在最右边,并有一个css3 3D的旋转初始效果。随着动画的开始,依次向左移动,并旋转到0度。(主要用于引导页步骤的描述)
上代码:
html布局
<div class="guidancePage2 col-md-12"> <div class="pre"><img src="img/pre.png" alt="上一页"></div> <div class="step"> <div class="step_img"> <div> <div class="step_content"></div> <p>(一)</p> </div> <div> <div class="step_content"></div> <p>(二)</p> </div> <div> <div class="step_content"></div> <p>(三)</p> </div> <div> <div class="step_content"></div> <p>(四)</p> </div> <div> <div class="step_content"></div> <p>(五)</p> </div> </div> <div class="step_state"></div> </div> </div>
css代码,没有做兼容
.guidancePage2 .pre{ margin-top: 10px; } .step { 80%; height: 50%; /*background: #fff;*/ position: relative; left: 50%; margin-left: -47%; top: 10%; } .step_img { height: 100%; 100%; /*background: darkseagreen;*/ position: relative; } .step_img>div { 19%; height: 100%; position: absolute; right: 0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg); /*box-shadow: 0px 2px 0px #ccc;*/ /*background: url("../img/1.jpg") no-repeat;*/ background-size: cover; } .step_content { 100%; height: 90%; background-color:rgba(255, 255, 255, .8); position: relative; } .step_img>div p{ text-align: center; color: #fff; font-weight: 800; position:relative; } @-webkit-keyframes Step { 0% {right:0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg);} 100% {right:81%;transform: perspective(1377px) rotate(0deg) rotateY(0deg);} } @-webkit-keyframes Step2 { 0% {right:0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg);} 100% {right:61%;transform: perspective(1377px) rotate(0deg) rotateY(0deg);} } @-webkit-keyframes Step3 { 0% {right:0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg);} 100% {right:41%;transform: perspective(1377px) rotate(0deg) rotateY(0deg);} } @-webkit-keyframes Step4 { 0% {right:0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg);} 100% {right:21%;transform: perspective(1377px) rotate(0deg) rotateY(0deg);} } @-webkit-keyframes Step5 { 0% {right:0px; transform: perspective(1377px) rotate(0deg) rotateY(-100deg);} 100% {right:1%;transform: perspective(1377px) rotate(0deg) rotateY(0deg);} } .step_img>div{ cursor: pointer; } .step_img>div:nth-child(1){ animation:Step 1s linear; animation-fill-mode:forwards; animation-iteration-count:1; } .step_img>div:nth-child(2){ animation:Step2 1s linear .8s; animation-iteration-count:1; animation-fill-mode:forwards; } .step_img>div:nth-child(3){ animation:Step3 1s linear 1.6s; animation-iteration-count:1; animation-fill-mode:forwards; } .step_img>div:nth-child(4){ animation:Step4 1s linear 2.4s; animation-iteration-count:1; animation-fill-mode:forwards; } .step_img>div:nth-child(5){ animation:Step5 1s linear 3.2s; animation-iteration-count:1; animation-fill-mode:forwards; }