关闭

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

591人阅读 评论(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网站的观点或立场

好玩的js特效

好玩的js特效
  • u010649589
  • u010649589
  • 2016-01-20 10:17
  • 738

CSS3实现过渡效果 (transition)

CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的 动画。
  • actorWen
  • actorWen
  • 2017-12-14 10:09
  • 162

CSS3特效之转化(transform)和过渡(transition)

在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition)。有人可能会有疑问,CSS3动画不是只有animation一个属性吗?怎么又和转化(tr...
  • bingkingboy
  • bingkingboy
  • 2016-04-17 20:31
  • 6906

css3实现网页平滑过渡效果

截图 思路: 1、导航利用来判断点击的元素 通过input:checked+a{}来为当前的元素添加样式 2、顶部的三角,利用正方形div,旋转45度,再隐藏部分 3、顶部的icon,下...
  • wangjiaohome
  • wangjiaohome
  • 2015-07-09 13:54
  • 2147

CSS3之过渡及过渡事件

CSS3之过渡及过渡事件 1.      Transition过渡   l  transition-property  要运动的样式  (all || [attr] ||none) l...
  • u013267266
  • u013267266
  • 2016-05-02 14:56
  • 2595

一些好玩的东西

1.[JAVA]生成随机字符串private static SecureRandom random = new SecureRandom(); public static String ran...
  • goldenfish1919
  • goldenfish1919
  • 2016-08-12 09:22
  • 649

CSS3制作各种平滑过渡的动画效果

通过CSS3的新特性,我们可以不使用javascript或Flash就可以将元素从一个状态过渡到另一个状态。它允许元素在指定的时间里改变它们的值,使各种可以动画的属性执行动画效果。 ...
  • natalie86
  • natalie86
  • 2015-04-10 19:57
  • 3163

那些有趣/用的 Python 库

图片处理 pip install pillow from PIL import Image import numpy as np   a = np.a...
  • github_36601823
  • github_36601823
  • 2017-08-07 21:30
  • 825

解决display无法使用transfrom过渡效果

如 demo (如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然...
  • Mrcxt
  • Mrcxt
  • 2016-08-16 22:15
  • 3574

Css3 过渡(Transition)特效回调函数

Css3 出来之后,可以说是替代了Flash,通过使用Html5和Css3的完美结合,就可以做出任何你想得到的特效,这里不再阐述。。。 最近在做一个喝水签到的功能,在想签到成功之后,签到框可以模拟被水...
  • qqHJQS
  • qqHJQS
  • 2015-12-25 09:45
  • 2456
    个人资料
    • 访问:90485次
    • 积分:2088
    • 等级:
    • 排名:千里之外
    • 原创:112篇
    • 转载:16篇
    • 译文:9篇
    • 评论:14条
    个人主站
    最新评论