CSS3仿腾讯专题页，实现3D旋转效果

最新推荐文章于 2024-04-11 12:19:59 发布

huxiaoxiao.

最新推荐文章于 2024-04-11 12:19:59 发布

阅读量300

点赞数

分类专栏： css 文章标签：前端 css3

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121552849

版权

css 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

布局部分：

<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/n4.png" alt=""></div>
        </a>
    </div>
    <div class="box box4">
        <a href="#">
            <div class="border b4"><img src="./img/n3.png" alt=""></div>
        </a>
    </div></div>

做出基础样式：

*{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
        /* 让浏览器的Y轴不要出现 */
        overflow-y: hidden;
    }
    body{
        background-color: #00002f;
        background-image: url(./img/cbg.png) ;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;
    }

添加相对定位，设置浮动让小盒子在一排显示，并设置 css3 动画，添加关键帧：

.nav{
        width: 900px;
        margin: 0 auto;
        /* 相对定位，自己位置发生了微调 没有脱离标准文档流 */
        position: relative;
        top: 70%;
    }
    .box{
        float: left;
        width: 25%;
        
        /* css3动画 
        moveUp  动画名称
        0.8s 动画完成时间
        ease-out    动画以慢速结束
        forwards    动画在最后一帧结束
         */
        animation: moveUp 0.8s ease-out forwards;
        /* 给四个小盒子 分别设置初始位置    垂直方向300px*/
        transform: translateY(300px);
    }
     @keyframes moveUp{
        0%{
            transform: translateY(300px);
        }
        100%{
            transform: translateY(0);
        }
    }

为四个小盒子设置不同的边框颜色，并通过伪类，将盒子封顶：

.border{
        width: 60%;
        margin: 0 auto;
        text-align: center;
        padding-bottom: 10%;
        border: 3px solid #c32a52;
        border-top: none;
        /* 相对定位 */
        position: relative;
        
    }
     /* 我们用  .b1 .b2 .b3 .b4 设置4个盒子不同的边框线的颜色 */
    .b1{
        border-color: #c32a52;
    }
    .b2{
        border-color: #f9ec00;
    }
    .b3{
        border-color: #3d8acc;
    }
    .b4{
        border-color: #d75e2d;
    }
    .border img{
        width: 45%;
    }
    .border::before,.border::after{
        content: '';
        width: 20.43%;
        height: 3px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #c32a52;
    }
    .border::after{
        right: 0;
        left: auto;
    }
     .box2 .border::before, .box2 .border::after{
        background-color: #f7eb4e;
    }
    .box3 .border::before, .box3 .border::after{
        background-color: #3d8acc;
    }
    .box4 .border::before, .box4 .border::after{
        background-color: #d75e2d;
    }

给盒子2,3,4添加延迟

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

为每个盒子添加 :hover 鼠标移入事件：

 .box1:hover>a>.b1{
        transition: all 1s ease-in;
        transform: rotateY(360deg);
    }
    .box2:hover>a>.b2{
        transition: all 1s ease-in;
        transform: rotateY(360deg);
    }
    .box3:hover>a>.b3{
        transition: all 1s ease-in;
        transform: rotateY(360deg);
    }
    .box4:hover>a>.b4{
        transition: all 1s ease-in;
        transform: rotateY(360deg);
    }

现在，鼠标移入时效果就出来了：