源代码下载

    https://github.com/comehope/front-end-daily-challenges

    代码解读

    定义dom，容器是一个无序列表，包含4个元素，代表4个按钮：

    <ul>

    <li>home</li>

    <li>products</li>

    <li>services</li>

    <li>contact</li>

    </ul>

    居中显示：

    body{

    margin:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:cornsilk;

    }

    去掉列表项前面的符号：

    ul{

    padding:0;

    list-style-type:none;

    }

    设置按钮的边框和背景的样式，背景采用渐变色，但渐变的方向依次交替：

    ulli{

    box-sizing:border-box;

    width:15em;

    height:3em;

    font-size:20px;

    border-radius:0.5em;

    margin:0.5em;

    box-shadow:001emrgba(0,0,0,0.2);

    }

    ulli:nth-child(odd){

    background:linear-gradient(toright,orange,tomato);

    }

    ulli:nth-child(even){

    background:linear-gradient(toleft,orange,tomato);

    }

    设置按钮上文字的样式，依次交替居左或居右：

    ulli{

    color:white;

    font-family:sans-serif;

    text-transform:capitalize;

    line-height:3em;

    }

    ulli:nth-child(odd){

    text-align:left;

    padding-left:10%;

    }

    ulli:nth-child(even){

    text-align:right;

    padding-right:10%;

    }

    设置按钮的透视效果，依次交替向左旋转和向右旋转，此时透视的距离是500px，注意perspective()函数和rotateY()函数的顺序不能写反：

    ulli:nth-child(odd){

    transform:perspective(500px)rotateY(45deg);

    }

    ulli:nth-child(even){

    transform:perspective(500px)rotateY(-45deg);

    }

    为按钮增加悬停效果，使悬停时的透视距离变短为200px，透视距离越短，旋转的幅度看起来就越大：

    ulli:nth-child(odd):hover{

    transform:perspective(200px)rotateY(45deg);

    padding-left:5%;

    }

    ulli:nth-child(even):hover{

    transform:perspective(200px)rotateY(-45deg);

    padding-right:5%;

    }

    最后，设置一个缓动时间，使效果转换变得平滑：

    ulli{

    transition:0.3s;

    cursor:pointer;

    }








本文转载自中文网