html+css 毛玻璃效果

B站那个毛玻璃效果挺不错的，尝试着弄了一下

两种方法原理一样

方法一：

效果图：

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
        <div class="all">
            <div class="a">
                <div class="b">
                </div>
                <div class="c">
                    <ul>
                        <li>
                            <a href="#">主站</a>
                        </li>
                        <li>
                            <a href="#">画友</a>
                        </li>
                        <li>
                            <a href="#">游戏中心</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="d"></div>
    </body>
</html>

css代码：

body ,.b{
    background-image: url(../img/1010655.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
    font-family: "楷体";
}
ul, li{
    margin: 0;
    padding: 0;
}
.a{
    height: 50px;
    border-bottom: 2px  solid rgba(225,225,225,.6);
    box-shadow: 0px 2px 1px rgba(0,0,0,.5);
    position: relative;    
}
.b{
    height: 50px;
    width: 100%;
    filter: blur(4px);
    position: absolute;
}
.c{
    height: 50px;
    width: 100%;
    position: absolute;
/*    background-color: black;*/
    
}
.c ul li{
    height: 50px;
    list-style-type: none;
    float: left;
    margin-left: 20px;
    line-height: 50px;
    font-size: 21px;
}
.c ul{
    margin-left:100px ;
}
.c  li>a{
    text-decoration: none;
    color: dodgerblue;
    text-align: center;
}
.c ul li:hover{
transform: scale(1.5);
transition: transform  .5s ;
text-shadow: 4px 6px 5px rgba(100,100,100,.8);

}
/*.d{
    height: 1000px;
}*/

感觉还不错的样子！！！！！！！！

 

方法二：

效果图：

 

html代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <link rel="stylesheet" href="css/index.css" />
 7     </head>
 8     <body>
 9        <div class="nav">
10             <ul class="nav-bar">
11                 <li><a href="#">首页</a></li>
12                 <li><a href="#">学习之路</a></li>
13                 <li><a href="#"></a></li>
14                 <li><a href="#">个人笔记</a></li>
15                 <li><a href="#">关于我</a></li>                                    
16             </ul>
17         </div>
18         <div class="">
19             
20         </div>
21     </body>
22 </html>

css代码：

 1 *{
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 body,div::before{
 6     background-image: url(../img/nav-warp.jpg);
 7     background-repeat: no-repeat;
 8     background-attachment: fixed;
 9 }
10 
11 .nav{
12     position: relative;
13     width: 100%;
14     height: 50px;
15 /*    background-color: rgba(255,255,255,.1);*/
16     border: 1px solid rgba(0,0,0,.1);
17 /*    border-radius:50px ;*/
18     box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3);
19     overflow: hidden;
20     
21 }
22 div::before{
23     content: '';
24     width: 100%;
25     height: 50px;
26     filter:blur(4px);
27     position:absolute;
28     top: 0; right: 0; bottom: 0; left: 0;
29     z-index: -1;
30 }
31 a{
32     text-decoration: none;
33 }
34 ul li{
35     list-style: none;
36 }
37 .nav-bar{
38     margin-left:50px; 
39 }
40 .nav-bar>li{
41     position: relative;
42 }
43 .nav-bar>li{
44     float:left;
45     height:inherit;
46 
47     text-align: center;
48 }
49 .nav-bar a{
50     display: block;
51     font-size: 24px;
52     line-height: 50px;
53     padding: 0px 10px;    
54     color: #FFD700;
55 }
56 .nav-bar>li:hover a{
57     color: white;
58     transform: scale(1.5);
59     transition: all .5s;
60 }

 

posted @ 2018-04-08 09:44  李-俊-伟  阅读(7643)  评论(0)  编辑  收藏  举报