js实现花俏的转动、旋转之后慢慢张开的窗口特效

下面我将为你详细讲解“js实现花俏的转动、旋转之后慢慢张开的窗口特效”的完整攻略。

首先，我们需要明确的是该效果涉及到的三个主要特效，分别为旋转、缩小展示、弹性放大展示。因此，我们需要针对这三个特效分别进行设计和实现。

1.旋转特效

对于旋转特效，我们可以使用css3中的transform属性实现。代码如下：

.box{
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: relative;
    margin:50px auto;
    transform-style: preserve-3d; /* 保证3D空间效果*/
    /* 设置沿Y轴旋转的角度和动画时间*/
    animation: rotate 3s infinite linear;
    -webkit-animation: rotate 3s infinite linear;
}
@keyframes rotate{
    form{
        transform:rotateY(0deg);
    }
    to{
        transform:rotateY(360deg);
    }
}
@-webkit-keyframes rotate{
    from{
        -webkit-transform:rotateY(0deg);
    }
    to{
        -webkit-transform:rotateY(360deg);
    }
}

这段代码中，我们使用了关键帧动画，通过改变transform的rotateY属性值，实现了绕Y轴进行360度的旋转效果。

2.缩小展示特效

对于缩小展示特效，我们可以设置初始状态的scale值为0，通过过渡动画逐渐将其过渡到正常大小。代码如下：

.box{
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: relative;
    margin:50px auto;
    transform-style: preserve-3d; /* 保证3D空间效果*/
    /*设置缩小展示初始状态和过渡动画状态*/
    transform:scale(0.1);
    -webkit-transform:scale(0.1);
    animation: enlarge 4s ease-out;
    -webkit-animation: enlarge 4s ease-out;
}
@keyframes enlarge{
    from{
        transform:scale(0.1);
    }
    to{
        transform:scale(1);
    }
}
@-webkit-keyframes enlarge{
    from{
        -webkit-transform:scale(0.1);
    }
    to{
        -webkit-transform:scale(1);
    }
}

这段代码中，我们同样使用了关键帧动画，将初始状态的scale值设置为0.1，然后通过过渡动画逐渐将其恢复正常大小。

3.弹性放大特效

对于弹性放大特效，我们可以使用bezier曲线实现弹性效果。代码如下：

.box{
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: relative;
    margin:50px auto;
    transform-style: preserve-3d; /* 保证3D空间效果*/
    /* 设置弹性放大展示初始状态和过渡动画状态*/
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
    animation: bounce 1s cubic-bezier(0.47,0.17,0.4,1.18);
    -webkit-animation: bounce 1s cubic-bezier(0.47,0.17,0.4,1.18);
}
@keyframes bounce{
    0%,20%,53%,80%,to{
        transform:scale(1.2);/* 初始状态和终止状态*/
    }
    40%,43%{
        transform:scale(1.3);/* 中间过渡状态*/
    }
    70%{
        transform:scale(1.2);/* 中间过渡状态*/
    }
}
@-webkit-keyframes bounce{
    0%,20%,53%,80%,to{
        -webkit-transform:scale(1.2);
    }
    40%,43%{
        -webkit-transform:scale(1.3);
    }
    70%{
        -webkit-transform:scale(1.2);
    }
}

这段代码中，我们同样使用了关键帧动画，通过bezier曲线控制动画效果，使得动画效果更加自然流畅。在关键帧动画的过程中，我们设置了多个初始状态、终止状态和中间过渡状态，以实现弹性效果。

综上所述，我们可以将这三段特效代码整合到一起，形成一个完整的代码实现：

.box{
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: relative;
    margin:50px auto;
    transform-style: preserve-3d;
    /* 旋转特效 */
    animation: rotate 3s infinite linear;
    -webkit-animation: rotate 3s infinite linear;
    /* 缩小展示特效 */
    transform:scale(0.1);
    -webkit-transform:scale(0.1);
    animation: enlarge 4s ease-out;
    -webkit-animation: enlarge 4s ease-out;
    /* 弹性放大特效 */
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
    animation: bounce 1s cubic-bezier(0.47,0.17,0.4,1.18);
    -webkit-animation: bounce 1s cubic-bezier(0.47,0.17,0.4,1.18);
}

@keyframes rotate{
    form{
        transform:rotateY(0deg);
    }
    to{
        transform:rotateY(360deg);
    }
}
@-webkit-keyframes rotate{
    from{
        -webkit-transform:rotateY(0deg);
    }
    to{
        -webkit-transform:rotateY(360deg);
    }
}

@keyframes enlarge{
    from{
        transform:scale(0.1);
    }
    to{
        transform:scale(1);
    }
}
@-webkit-keyframes enlarge{
    from{
        -webkit-transform:scale(0.1);
    }
    to{
        -webkit-transform:scale(1);
    }
}

@keyframes bounce{
    0%,20%,53%,80%,to{
        transform:scale(1.2);
    }
    40%,43%{
        transform:scale(1.3);
    }
    70%{
        transform:scale(1.2);
    }
}
@-webkit-keyframes bounce{
    0%,20%,53%,80%,to{
        -webkit-transform:scale(1.2);
    }
    40%,43%{
        -webkit-transform:scale(1.3);
    }
    70%{
        -webkit-transform:scale(1.2);
    }
}

接下来，我们可以将该效果应用于具体的网页中，实现更加炫酷的页面特效。

示例1：将该效果应用于一个按钮上，实现hover特效。

<button class="box">Hover Me</button>

.box{
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: relative;
    margin:50px auto;
    transform-style: preserve-3d;

    /* 设置默认状态 */
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
    animation: bounce 1s cubic-bezier(0.47,0.17,0.4,1.18);
    -webkit-animation: bounce 1s cubic-bezier(0.47,0.17,0.4,1.18);
}

/* 为按钮设置hover状态 */
.box:hover{
    /* 旋转特效 */
    animation: rotate 3s infinite linear;
    -webkit-animation: rotate 3s infinite linear;
    /* 缩小展示特效 */
    transform:scale(0.1);
    -webkit-transform:scale(0.1);
    animation: enlarge 4s ease-out;
    -webkit-animation: enlarge 4s ease-out;
}

示例2：将该效果应用于网页的某个模块上，实现炫酷展示效果。

<div class="box">
    <h3>Hello World!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.box{
    width: 400px;
    height: 400px;
    background-color: #ccc;
    position: relative;
    margin:50px auto;
    transform-style: preserve-3d;

    /* 旋转特效 */
    animation: rotate 3s infinite linear;
    -webkit-animation: rotate 3s infinite linear;
    /* 缩小展示特效 */
    transform:scale(0.1);
    -webkit-transform:scale(0.1);
    animation: enlarge 4s ease-out;
    -webkit-animation: enlarge 4s ease-out;
}

.box h3{
    text-align: center;
    font-size: 36px;
    line-height: 1.5;
}

.box p{
    line-height: 2;
    padding: 20px;
}

/* 显示动画效果 */
.box.show{
    /* 弹性放大特效 */
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
    animation: bounce 1s cubic-bezier(0.47,0.17,0.4,1.18);
    -webkit-animation: bounce 1s cubic-bezier(0.47,0.17,0.4,1.18);
}

这里我们为盒子添加了一个show类，当该类被添加到盒子上时，将触发弹性放大特效，从而实现炫酷展示效果。

至此，我们已经完成了“js实现花俏的转动、旋转之后慢慢张开的窗口特效”的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现花俏的转动、旋转之后慢慢张开的窗口特效 - Python技术站

js实现花俏的转动、旋转之后慢慢张开的窗口特效

相关文章