css animation 动画的制作

最新推荐文章于 2024-05-23 22:54:35 发布

anji393003

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量115

点赞数

原文链接：http://www.cnblogs.com/dangou/p/5993683.html

版权

上效果

效果描述：原来这些图片都绝对定位在最右边，并有一个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 {
    width: 80%;
    height: 50%;
    /*background: #fff;*/
    position: relative;
    left: 50%;
    margin-left: -47%;
    top: 10%;
}
.step_img {
    height: 100%;
    width: 100%;
    /*background: darkseagreen;*/
    position: relative;
}
.step_img>div {
    width: 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 {
    width: 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;
}

转载于:https://www.cnblogs.com/dangou/p/5993683.html