CSS3 + JavaScript原生实现翻转特效

最新推荐文章于 2024-10-30 12:42:49 发布

原创最新推荐文章于 2024-10-30 12:42:49 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html #动画 #css特效 #javascript

javascript 同时被 2 个专栏收录

49 篇文章

订阅专栏

CSS

16 篇文章

订阅专栏

本文介绍如何使用CSS3动画实现图片翻转效果。通过定义关键帧动画，并结合JavaScript触发鼠标悬停事件，实现了平滑的3D翻转过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用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>