zoukankan      html  css  js  c++  java
  • css折叠效果

    <!DOCTYPE html> 

    <html lang="en" dir="ltr"> 

      

    <head> 

        <meta charset="utf-8"> 

        <title> 

             css折叠效果

        </title> 

        <style> 

            h1 { 

                color: #19b0cb; 

            } 

              

            .Fold { 

                position: absolute; 

                left: 50%; 

                top: 55%; 

                transform: translate(-50%, -50%); 

                400px; 

                height: 200px; 

                background-color: #19b0cb; 

            } 

              

            h3 { 

                margin: 20px; 

                padding: 20px; 

                color: #fff;

            } 

              

            .Fold:after { 

                position: absolute; 

                content: ''; 

                right: 0; 

                top: 0; 

            } 

            .Fold:hover:after { 

                transition-duration: 1s; 

                border-bottom: 50px solid black; 

                border-right: 50px solid white; 

            } 

    </style> 

    </head> 

    <body> 

        <center> 

            <h1> 

                web前端开发公众号

            </h1> 

            <b> 

               web前端开发公众号,网站:<a href="http://www.webqdkf.com">www.webqdkf.com</a>

            </b> 

            <div class="Fold"> 

                <h3> 

               web前端开发公众号,网站:www.webqdkf.com</h3> 

            </div> 

        </center> 

    </body> 

    </html> 

  • 相关阅读:
    Java_JAVA6动态编译的问题
    Java_动态加载类(英文)
    Java_Java Compiler 应用实例
    Java_关于App class loader的总结
    Java_动态加载
    Java_Java SE6调用动态编译
    python捕获Ctrl+C信号
    python使用协程并发
    python使用多进程
    python使用多线程
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13547185.html
Copyright © 2011-2022 走看看