CSS3 Transition을 이용하여 Blur menu를 만들 수 있습니다..
CSS:
body{
background:#999;
}
.container{
background-color:blue;
position:relative;
}
h1{
margin:0px;
padding:20px;
font-size:42px;
color:#fff;
text-align:left;
font-weight:400;
text-align:left;
}
h1 span{
font-size:22px;
color:#ddd;
padding-top:10px;
}
a{
color: #fff;
text-decoration: none;
}
.content{
position:relative;
margin: 0 auto;
}
.menu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.menu li{
font-size: 20px;
padding:10px 20px;
display: inline;
float:left;
}
.menu li a{
color: transparent;
text-transform: uppercase;
text-shadow: 0px 0px 5px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.menu:hover li a{
text-shadow: 0px 0px 5px #0d1a3a;
}
.menu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}
미리보기:
등록된 댓글이 없습니다.
