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

原创 2015年11月18日 15:29:07
翻滚吧,牛头怪!!!

使用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>


版权声明:本文为博主原创文章,欢迎查看个人主站:https://tangxiaolang101.github.io/

相关文章推荐

原生js实现手风琴菜单效果 与 css3的过渡实现手风琴效果

最近学了css3的变形、过渡和动画,写了一个用css3手风琴菜单的效果,又想着用原生JavaScript来实现手风琴菜单效果。感觉挺有意思的,现在给大家分享一下。 1、css3实现手风琴效果 ...

CSS3实现的超酷页面过渡效果

日期:2012/02/25  来源:GBin1.com 在线演示 本地下载 在过去的几年中,但页面的网站设计越来越多了,大多数都是使用javascript来实现过渡效果。那么今天我们讲介绍使用...
  • jjfat
  • jjfat
  • 2012年02月28日 17:39
  • 714

使用css3过渡属性实现翻牌效果

理解css3的过渡属性对提高

CSS3-用过渡实现气泡效果

要想做一张泡泡浮动的效果图,首先要准备一张泡泡图片 实现代码如下 v { 过渡动画 .div{ ...

css3Transition主要效果平缓过渡

  • 2015年05月14日 15:23
  • 21KB
  • 下载

CSS3的过渡效果

过渡属性 div{ width: 200px; height: 200px; background-color: #000000; color: #FFFFFF; ...

CSS3 中的过渡效果

1.transition-property 设置对象中的参与过渡的属性 默认值为:all。默认为所有可以进行过渡的css属性。如果提供多个属性值,以逗号进行分隔。 语法: transit...

15个CSS3和jQuery的超棒页面过渡效果教程

日期:2013-7-31  来源:GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发。通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非...
  • jjfat
  • jjfat
  • 2013年07月31日 22:14
  • 1502

CSS3-2D及3D效果以及过渡

CSS转动2D效果概念:通过 CSS3 中的属性,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 实现2D或3D效果。 使用transform属性来实现,该属性的值是几个函数。主要2d转换函数: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习css3过渡效果,可以实现很好玩的东西,无需js
举报原因:
原因补充:

(最多只允许输入30个字)