CSS3腾讯荣耀游戏风云榜

animation 属性是一个简写属性，用于设置六个动画属性：

语法：

animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

rotateY，沿着Y轴的3D旋转。rotateY()  函数定义了一个转换，它可以让一个元素围绕纵坐标(垂直轴)旋转，而不会对其进行变形。

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotateY()

本案例涉及到的html标签，如下所示：

html：

    <!-- div.nav>div.box.box1*4>a>div.border.b1>img -->
    <div class="nav">
        <div class="box box1">
            <a href="">
                <div class="border b1"><img src="img/n1.png" alt=""></div>
            </a>
        </div>
        <div class="box box2">
            <a href="">
                <div class="border b2"><img src="img/n2.png" alt=""></div>
            </a>
        </div>
        <div class="box box3">
            <a href="">
                <div class="border b3"><img src="img/n3.png" alt=""></div>
            </a>
        </div>
        <div class="box box4">
            <a href="">
                <div class="border b4"><img src="img/n4.png" alt=""></div>
            </a>
        </div>
    </div>

css：

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            min-height: 100vh;
            background-color: #00002F;
            background-image: url('./img/cbg.png');
            background-repeat: no-repeat;
            background-position: center top;
            background-size: 100% auto;
        }
        .nav{
            width: 900px;
            /* 水平居中 */
            margin: 0 auto;
            /* 相对定位 */
            position: relative;
            top: 70%;
   
        }
        /* 给4个盒子设置宽度 各是25%，并让其并排存在 */
        .box{
            width: 25%;
            float: left;
            /* outline: 1px dashed green; */
            transform: translateY(300px);
            /* 动画 */
             animation: moveUp 0.8s ease-out forwards;
        }
        .box a{
            /* 将 行元素 转成 块元素 */
            display: block;
        }
        /* 包裹图片的外层的盒子 设置样式 */
        .border{
            width: 60%;
            margin: 0 auto;
            text-align: center;
            border: 2px solid #c32a52;
            /* 去除顶部的边框线 */
            border-top: none;
            /* 让“我”里面的图片，不要贴着，下边框线显示 */
            padding-bottom: 10%;
            /* 相对定位 */
            position: relative;
        }
        .border img{
            /* 图片不要按照自身大大小显示，缩放到 自身大小的45% 去显示 */
            width: 45%;
        }
        /* 通过:before和:after伪类绘制图形，并且给其加上定位点，让他在指定的位置上显示 
        
        :before css2的写法
        ::before css3的写法
        */
        .border::before, .border::after{
            content: '';
            width: 20.43%;
            height: 3px;
            background-color: #c32a52;
            /* 绝对定位 */
            position: absolute;
        }
        /* 我在哪里显示 */
        .border::before{
            top: 0;
            left: 0;
        }
        /* 你在哪里显示 */
        .border::after{
            /* top: 0;
            right: 0; */
            right: 0;
            left: auto;
        }
       
        .b2{border-color: #F9EC00;}
        .b3{border-color: #E95413;}
        .b4{border-color: #038BD2;}

        .box2 .border::before, .box2 .border::after{background-color: #F9EC00;}
        .box3 .border::before, .box3 .border::after{background-color: #E95413;}
        .box4 .border::before, .box4 .border::after{background-color: #038BD2;}
        .box1{
            animation-delay: 0s;
        }
        .box2{
            animation-delay: 0.2s;
        }
        .box3{
            animation-delay: 0.4s;
        }
        .box4{
            animation-delay: 0.6s;
        }
        .rotateY{
            transition: all 1s ease-out;
            transform: rotateY(360deg);
        }
        @keyframes moveUp {
            0%{
                transform: translateY(300px);
            }
            100%{
                transform: translateY(0);
            }
        }
    </style>

刷新页面的时候，4个盒子，出现的先后顺序如下所示：

这是因为在4个盒子身上设置了css3的动画延迟时间，css样式规则设置如下所示：

        .box1{
            animation-delay: 0s;
        }
        .box2{
            animation-delay: 0.2s;
        }
        .box3{
            animation-delay: 0.4s;
        }
        .box4{
            animation-delay: 0.6s;
        }

鼠标移入到某个盒子上，盒子会沿着Y轴旋转1周（360度），涉及的js脚本，如下所示：

    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            // 鼠标移入
            $('.box').mouseenter(function(){
                $(this).find('.border').addClass('rotateY')
            })
            // 鼠标移出
            $('.box').mouseleave(function(){
                $(this).find('.border').removeClass('rotateY')
            })
        })
    </script>

预览：