• css animation 动画的制作


    上效果

    效果描述:原来这些图片都绝对定位在最右边,并有一个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;
    }
    

      

  • 相关阅读:
    [PHP] Which function can be used to format a local timestamp according to a specific locale?
    [Yii Framework] yii 如何使用第三方插件
    [PHP] Header to out put the image file.
    [PHP] PHP 格式化日期 format the datetime in PHP
    VC6工程中的文件类型
    VC6++ output :error executing c:\windows\system32\cmd.exe.
    根据选择计算Mask值
    .NET垃圾收集关键方法解析(转)
    JS访问表格的每行的每个TD的方法
    HTTP 状态消息详解
  • 原文地址:https://www.cnblogs.com/dangou/p/5993683.html
Copyright © 2020-2023  润新知