图标文字上拉效果

Posted 淅沥沥丶下雨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图标文字上拉效果相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .clear{
                clear: both;
            }
            .a1{
                width: 102px;
                height: 100px;
                border: 1px solid gainsboro;
                float: left;
                padding-top: 10px;
            }
            .a1:hover{
                box-shadow: 5px 5px gainsboro;
                padding-top: 5px;
                height: 100px;
            }
            .b1{
                width: 100px;
                height: 30px;
                margin-left: 40px;
                margin-top: 6px;
                /*border: 1px solid red;*/
                /*background-image: url(../../img/360/1.bmp);
                background-repeat: no-repeat;
                background-position: 40px 7px;*/
                
                
            }
            .b2{
                width: 100px;
                height: 30px;
                margin-top: 10px;
                /*border: 1px solid red;*/
                text-align: center;
                
            }
            .b3{
                margin-left: 25px;
                margin-top: 2px;
                width: 50px;
                height: 20px;
                border: 1px solid gainsboro;
                text-align: center;
                line-height: 20px;
                
            }
            
            
        </style>
    </head>
    <body>
        <div class="q1">
            <div class="a1">
                <div class="b1"><img src="../../img/360/1.bmp"></div>
                <div class="b2">安全卫士</div>
                <div class="b3">下载</div>
            </div>
            <div class="a1">
                <div class="b1"><img src="../../img/360/6.bmp"></div>
                <div class="b2">安全浏览器</div>
                <div class="b3">下载</div>
            </div>
            <div class="a1">
                <div class="b1"><img src="../../img/360/5.bmp"></div>
                <div class="b2">360杀毒</div>
                <div class="b3">下载</div>
            </div>
        </div>
        <div class="clear">
            
        </div>
        <div class="q1">
            <div class="a1">
                <div class="b1"><img src="../../img/360/7.bmp"></div>
                <div class="b2">360压缩</div>
                <div class="b3">下载</div>
            </div>
            <div class="a1">
                <div class="b1"><img src="../../img/360/2.bmp"></div>
                <div class="b2">手机卫士</div>
                <div class="b3">下载</div>
            </div>
            <div class="a1">
                <div class="b1"><img src="../../img/360/4.bmp"></div>
                <div class="b2">清理大师</div>
                <div class="b3">下载</div>
            </div>
        </div>
        
    </body>
</html>

 

以上是关于图标文字上拉效果的主要内容,如果未能解决你的问题,请参考以下文章

HTML代码片段

HTML代码片段

CSS代码片段

CSS代码片段

当图标悬停时,滑入文字

flutter上拉抽屉效果,flutter拖动抽屉效果