CSS3 + JavaScript原生实现翻转特效

太过爱你忘了你带给我的痛 2022-06-03 06:07 191阅读 0赞

#### 利用CSS3 动画：      @keyframes 一个定义动画的属性      具体在这里就不详细解释了，想要详细了解的可以访问下面这个网址： ####

http://www.w3school.com.cn/css3/css3\_animation.asp

--------------------

#### 理论上来说就是先定义好想要的动画效果，再用JS 将写好的效果用鼠标移入移出的事件来配合:   废话不多说，直接上代码： ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动画翻转</title>
    
        <style>
            /*将两张图设定在同一个位置*/
            #parentEm{
                position: relative;
                text-align: center;
                margin:100px 200px;
            }
    
            .firstImg{
                position: absolute;
            }
    
            #parentEm>div{
                width:100%;
            }
    
            /*设定好想要的旋转的效果*/
            @-webkit-keyframes rotateStart {
                from {
                    transform: perspective(1500px);
                }
    
                40% {
                    transform: perspective(1500px) rotate3d(0, 1, 0, 60deg);
                    opacity: 1;
                }
    
                50% {
                    transform: perspective(1500px) rotate3d(0, 1, 0, 90deg);
                    opacity: 0;
                }
    
                to {
                    transform: perspective(1500px) rotate3d(0, 1, 0, 180deg);
                    opacity: 0;
                }
            }
    
            @-webkit-keyframes rotateEnd {
                from {
                    transform: perspective(1500px) rotate3d(0, 1, 0, -180deg);
                    opacity: 0;
                }
    
                50% {
                    transform: perspective(1500px) rotate3d(0, 1, 0, -90deg);
                    opacity: 0;
                }
    
                60% {
                    transform: perspective(1500px) rotate3d(0, 1, 0, -60deg);
                    opacity: 1;
                }
    
                to {
                    transform: perspective(1500px);
                    opacity: 1;
                }
            }
    
            /*执行动画的时间效果*/
            .rotate1{
                animation: rotateStart 0.8s linear;
                animation-fill-mode: both;
            }
    
            .rotate2{
                animation: rotateEnd 0.8s linear;
                animation-fill-mode: both;
            }
        </style>
    </head>
    <body>
    
    
    <div id="parentEm" onmouseenter="mouseIn(this)" onmouseleave="mouseOut(this)">
    
            <div class="firstImg">
                <img src="bi1.png" />
            </div>
    
            <div class="secondImg">
                <img src="bi2.png" />
            </div>
    </div>
    
    <script>
    
        function mouseIn(that) {    //鼠标移入效果
            var first=that.getElementsByTagName("img")[0],second=that.getElementsByTagName("img")[1];
    
            first.setAttribute("class","");
            second.setAttribute("class","");
            first.setAttribute("class","rotate1");
            second.setAttribute("class","rotate2");
        }
    
        function mouseOut(that) {  //鼠标移出效果
            var first=that.getElementsByTagName("img")[0],second=that.getElementsByTagName("img")[1];
    
            first.setAttribute("class","");
            second.setAttribute("class","");
            first.setAttribute("class","rotate2");
            second.setAttribute("class","rotate1");
        }
    
    </script>
    
    </body>
    </html>

### 实现效果 : ###

!\[这里写图片描述\](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcxMjIwMTUyODAyMzkz?x-oss-process=image/format,png)