关闭

学习css3过渡效果,可以实现很好玩的东西,无需js

496人阅读 评论(0) 收藏 举报
分类:
翻滚吧,牛头怪!!!

使用css3的过渡效果,可以让一种样式过渡到另一种样式,无需js就能实现某些动画效果。还是挺有意思的,在一些生动表现力的网站上应该是可以用到的。



为什么源码编辑出来没有效果呀,看效果去这个博客吧,唉,(传送门:点击打开链接

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<head>
<style>
	#myno1div{
		border-radius: 25px;
		width: 200px;
		height: 100px;
		background-color: orange;
		font-size: 5px ;
		text-align: center;
		line-height: 50px;
		-webkit-transition:width 5s, height 5s, -webkit-transform 5s, background-color 5s;
		transition:width 5s, height 5s, transform 2s;
	}

	#myno1div:hover{
		width: 300px;
		height: 150px;
		font-size: 20px;
		background-color: blue;
		text-align: center;
		-webkit-transform: rotate(360deg);
		transform:rotate(180deg);
	}
	#myno1p{
		background-color: #99FFCC;
		font-size: 24px;
		-webkit-transition:font-size 2s;
	}
	#myno1p:hover{
		font-size: 32px;
	}
</style>
</head>
<body>
	<div id="myno1div">
		翻滚吧,牛头怪!!!
	</div>
	<p id="myno1p">
	使用css3的过渡效果,可以让一种样式过渡到另一种样式,无需js就能实现某些动画效果。还是挺有意思的,在一些生动表现力的网站上应该是可以用到的。
	</p>

</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:63089次
    • 积分:1764
    • 等级:
    • 排名:千里之外
    • 原创:107篇
    • 转载:16篇
    • 译文:7篇
    • 评论:12条
    个人主站
    最新评论