鼠标移入搭建盒子效果

爱吃彩虹吐司的安琪拉

已于 2023-01-10 14:03:19 修改

阅读量127

点赞数 1

分类专栏： # 前端初学者小练习文章标签： css html5 jquery css3

于 2021-07-27 10:59:38 首次发布

本文链接：https://blog.csdn.net/weixin_44264769/article/details/119137705

版权

前端初学者小练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过这个练习可以进一步锻炼思维，并普及一下nth-of-type和nth-child的区别。

一、效果

二、具体代码（注意每个li的位置）

<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    html,body{
        width:100%;
        height: 100%;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div{
        width:1000px;
        height: 500px;
        border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: 1000px;
    }
    ul{
        width: 300px;
        height: 300px;
        position: relative;
        transform-style:preserve-3d ;
        transition: all 2s;
    }
    li{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        transition: all 2s;
    }
    div:hover li:first-of-type{
        background-color: blueviolet;
        transform: translateZ(-150px);
        opacity: 0.8;
    }
    div:hover li:nth-of-type(2){
        background-color: brown;
        transform: translateX(-150px) rotateY(90deg);
        opacity: 0.8;
    }
    div:hover li:nth-of-type(3){
        background-color: rgb(21, 218, 21);
        transform: translateX(150px) rotateY(90deg);
        opacity: 0.8;
    }
    div:hover li:nth-of-type(4){
        background-color: rgb(11, 171, 199);
        transform: translateY(-150px) rotateX(90deg);
        opacity: 0.8;
    }
    div:hover li:nth-of-type(5){
        background-color: rgb(219, 29, 178);
        transform: translateY(-150px) rotateX(90deg);
        opacity: 0.8;
    }
    div:hover li:last-of-type{
        background-color: rgb(221, 43, 11);
        transform: translateZ(150px);
        opacity: 0.8;
    }
    div:hover ul{
        transform: rotate3d(1,1,1,360deg);
    }
    

</style>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

三、nth-of-type和nth-child区别

nth-child 与nth-of-type 均可以选择父元素下对应的子元素。

ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele

简单的说，nth-of-type就是取当前元素的兄弟元素的第n个，而nth-child取的是当前元素的第n个节点的当前元素。