<!DOCTYPE HTML> |
<html> |
<head> |
<meta charset= "utf-8" > |
<title>雨滴下落效果</title> |
<style type= "text/css" > |
body { |
font-family: "Gill Sans" , Helvetica, Arial, sans-serif; |
margin: 0 50px; |
overflow: hidden; |
} |
ul { |
list-style-type: none; |
margin: 0 0 0 -420px; |
padding: 0; |
width: 840px; |
position: absolute; |
left: 50%; |
} |
li { |
float: left; |
margin: 0 0 10px 10px; |
padding: 0; |
} |
a { |
display: block; |
text-decoration:none; |
line-height: 2500px; |
height: 200px; |
width: 200px; |
border-radius: 0 100px 100px 100px; |
text-align:center; |
background-color: #ccc; |
font-size: 72px; |
color: transparent; |
text-shadow: 0px 0px 100px rgba(0,0,0,0); |
transition: all .6s ease- in ; |
} |
a:hover { |
background-color: #eee; |
line-height: 200px; |
text-shadow: 0px 0px 0px rgba(0,0,0,1); |
transition: all 0 ease-out; |
} |
</style> |
<script type= "text/javascript" src= "prefixfree.min.js" ></script> |
</head> |
<body> |
<div style= "text-align:center;clear:both" > |
<script src= "/gg_bd_ad_336x280.js" type= "text/javascript" ></script> |
<script src= "/follow.js" type= "text/javascript" ></script> |
</div> |
<ul> |
<li><a href= "#" >R</a></li> |
<li><a href= "#" >A</a></li> |
<li><a href= "#" >I</a></li> |
<li><a href= "#" >N</a></li> |
</ul> |
</body> |
</html> |