css3学习笔记之效果

<!DOCTYPE html>
<html>
<head>
<style> 
#t1
{
border-radius: 15px;
width:60px;
height:40px;
background: #00FF99;
transition: width 1s, height 1s, transform 1s,background 1s,font-size 1s;
word-wrap:break-word;
font-size:5px;
text-align:center;
line-height:35px; 
}

#t1:hover
{
width:120px;
height:80px;
transform: rotate(360deg);
background: #33CCFF;
font-size:50px;
}
</style>
</head>
<body>



    <div id="t1">CSS3</div>



</body>
</html>

CSS3还有很多未知的有趣的。。。。。

最终效果，虽然很丑，但是学了半天这样已经很累啦。。。。。

CSS3