18910140161

Css

首页 >> 前端开发 >> Css

CSS折叠效果

顺晟科技

2021-09-09 12:22:18

178

<!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%); 

            width: 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> 

上一篇：python爬行小说网站涉及(js加 下一篇：Bootstrap默认CSS样式
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！