• 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 {
                500px;
                position: relative;
                margin: 100px auto;
            }

            .con div {
                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;
                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>
     
  • 相关阅读:
    Spring ListFactoryBean实例
    Spring集合 (List,Set,Map,Properties) 实例
    Spring Bean作用域实例
    Spring内部bean实例
    Spring bean加载多个配置文件
    如何注入值到Spring bean属性
    Spring Bean引用例子
    Spring构造方法注入类型歧义
    Spring JavaConfig @Import实例
    Spring JavaConfig实例
  • 原文地址:https://www.cnblogs.com/xushan03/p/16203387.html
Copyright © 2020-2023  润新知