其他分享
首页 > 其他分享> > 2.5d弹簧效果按钮

2.5d弹簧效果按钮

作者:互联网

  <!doctype html> <html lang="en">
<head>     <meta charset="UTF-8">     <meta name="viewport"         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         * {             margin: 0;             padding: 0;         }

        .con {             width: 500px;             position: relative;             margin: 100px auto;         }
        .con div {             width: 100px;             height: 100px;             position: absolute;             left: 0;             top: 0;             background-color: green;
            transform: rotate(-30deg) skew(20deg);
            transition: all 0.5s;             perspective: 500px;         }
        div span {             display: inline-block;             width: 100%;             height: 100%;             display: flex;             justify-content: center;             align-items: center;             opacity: 1;             color: #fff;             transform: rotateZ(30deg) skew(-20deg);             z-index: 10;         }

        .con div:nth-child(1) {             opacity: 0.1;             top: 0;         }
        .con div:nth-child(2) {             opacity: 0.3;             top: 0;         }
        .con div:nth-child(3) {             opacity: 0.5;             top: 0x;         }
        .con div:nth-child(4) {             opacity: 0.7;             top: 0;         }
        .con div:nth-child(5) {             opacity: 1;             top: 0;         }

        .con:hover div:nth-child(1) {             top: 0;         }
        .con:hover div:nth-child(2) {             top: -10px;         }
        .con:hover div:nth-child(3) {             top: -20px;         }
        .con:hover div:nth-child(4) {             top: -30px;         }
        .con:hover div:nth-child(5) {             top: -40px;         }     </style> </head>
<body>
    <div class="con">         <div></div>         <div></div>         <div></div>         <div></div>         <div>             <span>hello world</span>         </div>     </div>


    - </body>
</html>  

 

标签:opacity,top,child,弹簧,nth,按钮,div,2.5,con
来源: https://www.cnblogs.com/xushan03/p/16203387.html