0
点赞
收藏
分享

微信扫一扫

[CSS实例] 这是你要的高级感吗-滑动名片

Raow1 2022-03-11 阅读 63

话不多说,先来看效果:
请添加图片描述
示例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0%;
                padding: 0%;
                box-sizing: border-box;
            }
            section {
                min-height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(253, 217, 175);
            }
            .card {
                position: relative;
                display: flex;
                width: 700px;
                height: 400px;
                border: 10px solid #fff;
                background-color: rgb(241, 133, 44);
                border-radius: 20px;
                overflow: hidden;
                
            }
            .box {
                position: relative;
                width: 200px;
                height: 300px;
                margin-left: 50px;
                margin-top: 60px;
                transition: all 1s;
                transition-delay: 0.5s;
            }
            .box h2 {
                font-size: 24px;
                text-align: center;
                color: #fff;
            }
            .box .a {
                position: absolute;
                top:80px;
                left: 30px;
                color: purple;
                font-weight: 600;
                font-size: 20px;
                opacity: 0;
            }
            .box .b {
                position: absolute;
                top: 100px;
                color: #fff;
                text-align: left;
                margin-left: 4px;
                font-size: 14px;
            }
            .rectangle {
                position: absolute;
                right: 10px;
                top: -30px;
                width: 400px;
                height: 55px;
                border-radius: 30px;
                transform: rotate(-45deg);
                transition: all 1.5s;
            }
            .c1 {
                transition-delay: 0.15s;
                background-color: purple;
                border-left: 30px solid purple;
            }
            .c2 {
                width: 600px;
                right: -150px;
                height: 65px;
                top: 30px;
                background-color: rgba(145, 65, 192, 0.705);
                border-left: 30px solid #ad5595;
                transition-delay: 0.3s;
                
                
            }
            .c3 {
                width: 600px;
                right: -240px;
                height: 50px;
                background-color: rgba(103, 10, 156, 0.959);
                border-left: 30px solid rgba(103, 10, 156, 0.959);
                top: 50px;
                transition-delay: 0.2s;
                
            }
            .c4 {
                width: 600px;
                right: -330px;
                height: 55px;
                background-color: rgb(223, 130, 223);
                border-left: 30px solid rgb(223, 130, 223);
                top: 50px;
                transition-delay: 0.1s;
            }
            .c5 {
                width: 600px;
                right: -460px;
                height: 60px;
                background-color: purple;
                border-left: 30px solid purple;
                top: 50px;
            }
            .in-box {
                position: absolute;
                width: 250px;
                height: 250px;
                border-radius: 20px;
                top: 60px;
                left: 60px;
                background: url(siat.png) no-repeat;
                background-size: 250px auto;
                opacity: 0;
                transition: all 1s;
                transition-delay: 0.5s;
            }
            .card:hover .z{
                transform: translate(1600px,-600px);
                
            } 
            .card .box .a {
                transition: all 1s;
                transition-delay: 0.5s;
            }
            .card:hover .a {
                opacity: 1;

            }
            .card .box .b {
                transition: all 1s;
                transition-delay: 0.5s;
            }
            .card:hover .b {
                transform: translateY(25px);
            }
            .card:hover .box {
                transform: translateX(350px);
            }
            .card:hover .c2 {
                transform: translate(1400px,-700px);
            }
            
            .card:hover .in-box {
                opacity: 1;
            }
            
        </style>
    </head>
    <body>
        <section>
            <div class="card">
                <div class="box">
                    <h2>中国科学院<br>深圳理工大学</h2>
                    <p class="a">曙光书院欢迎你</p>
                    <p class="b">中国科学院深圳理工大学,位于广东省深圳市,是中国科学院与深圳市人民政府合作,依托中国科学院深圳先进技术研究院建设的独立设置的社会主义新型公办研究型高校。</p>
                </div>
                <div class="in-box"></div>
                <div class="rectangle c1 z"></div>
                <div class="rectangle c2"></div>
                <div class="rectangle c3 z"></div>
                <div class="rectangle c4 z"></div>
                <div class="rectangle c5 z"></div>
            </div>
        </section>
       <script>
           
        </script>
    </body>
</html>    
举报

相关推荐

0 条评论