Day30_CSS3-Text效果

继续介绍CSS3的文字效果

文字阴影

h1
{
	text-shadow: 5px 5px 5px #FF5500;
}

方块阴影

div
{
	width:100px;
	height:100px;
	background-color:orange;
	box-shadow: 10px 10px 5px #555555;
}

阴影颜色

div {
    width: 100px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px green;
}

自动换行

p.test
{
	width:11em; 
	border:1px solid #000000;
	word-wrap:break-word;
}

动画效果

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}

在五秒内，颜色从红色转变为黄色

其他动画效果

CSS3其他动画效果可以参考W3C
三十天终於结束了！！！