<html>
<head>
<title>我的第一个网页</title>
<style>
@keyframes SM {
0% {
background-position : 0 0 ;
}
100% {
background-position : 0 260px ;
}
}
@-moz-keyframes SM {
0% {
background-position : 0 0 ;
}
100% {
background-position : 0 260px ;
}
}
@-webkit-keyframes SM {
0% {
background-position : 0 0 ;
}
100% {
background-position : 0 260px ;
}
}
@-o-keyframes SM {
0% {
background-position : 0 0 ;
}
100% {
background-position : 0 260px ;
}
}
.me-bg {
animation : SM 3s infinite linear ;
-webkit-animation : SM 3s infinite linear ;
-moz-animation : SM 3s infinite linear ;
-o-animation : SM 3s infinite linear ;
background : rgb(0,0,0) ;
background: -webkit-linear-gradient(#000,#000,#000,#000,#000,green) ;
background : -moz-linear-gradient(#000,#000,#000,#000,#000,green) ;
background: -o-linear-gradient(#000,#000,#000,#000,#000,green) ;
background : linear-gradient(#000,#000,#000,#000,#000,green) ;
height : 260px ;
}
.me {
background : rgba(0,225,0,.20) ;
border : 1px solid green ;
box-shadow : 0 0 7px green ;
height : 140px ;
margin : 0 auto ;
position : relative ;
top : 60px ;
width : 80% ;
}
.me-img {
background : -webkit-linear-gradient(left, rgba(0,225,0,.20) , transparent) ;
background : -o-linear-gradient(left, rgba(0,225,0,.20) , transparent) ;
background : -moz-linear-gradient(left, rgba(0,225,0,.20) , transparent) ;
background : linear-gradient(left, rgba(0,225,0,.20) , transparent) ;
border : 1px solid green ;
box-shadow : 0 0 7px green ;
border-radius : 25px ;
float : left ;
height : 50px ;
left : -25px ;
position : relative ;
top : 45px ;
width : 50px ;
}
.me-text {
border-left : 2px solid green ;
height : 20px ;
margin : 60px auto ;
width : 70% ;
}
.me-ST ,
.me-URL {
color : green ;
height : 20px ;
line-height : 20px ;
position : relative ;
top : -10px ;
width : 100% ;
}
.me-ST {
border-bottom : 1px solid green ;
}
.me-Slink {
border-top : 1px solid green ;
/*border-left : 1px solid green ;*/
color : green ;
display : block ;
float : right ;
height : 20px ;
line-height : 20px ;
position : relative ;
top : -20px ;
}
</style>
</head>
<body>
<div class="me-bg">
<div class="me">
<img src="http://yzm.wodemo.com/down/359296/head.png" class="me-img" />
<div class="me-text">
<div class="me-ST">夜之明-前端笔记</div>
<div class="me-URL">mo.54zm.com</div>
</div>
<a href="/Slink" class="me-Slink">申请友链</a>
</div>
</body>
</html>