css3的transition练习

最新推荐文章于 2022-03-05 22:36:16 发布

miao淼

最新推荐文章于 2022-03-05 22:36:16 发布

阅读量707

点赞数

分类专栏： CSS3常见特效学习系列文章标签： css3 html5 鼠标

本文链接：https://blog.csdn.net/wujimiao/article/details/68560253

版权

CSS3常见特效学习系列专栏收录该内容

1 篇文章 0 订阅

订阅专栏

现在开个css3特效分类，目的很简单，掌握它的常用属性与技巧。

今天是2017-3-30 明年今天在回首，希望我已经成为一名优良的web前端工程师。

transition：属性国度时间时间函数延迟时间

过渡效果需要IE10以上才能很好支持，不过现在css3基本上都流行使用在移动端，就没有IE什么事情了。过渡效果能够很好的平滑过渡运动，常见使用场景，鼠标经过:hover 物体@keyframes规则配合使用，当然也有渐变透明色，显示幻灯片效果，配合transform使用

鼠标经过改变width才有平滑过渡效果属性值为width

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3风车转动</title>
	<style type="text/css">
	/*鼠标经过并且width值发生改变时候采用平滑过渡效果*/
		.transition{width: 100px;height: 100px;background: red;-webkit-transition:width 2s ease-out;-moz-transition: width 2s ease-out;-o-transition:width 2s ease-out;transition:width 2s ease-out; }
		.transition:hover{width: 500px;}
	</style>
</head>
<body>
	<div class="transition"></div>
</body>
</html>

鼠标经过改变背景色第一个属性值为All

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3风车转动</title>
	<style type="text/css">
	/*鼠标经过并且width值发生改变时候采用平滑过渡效果*/
		.transition{width: 100px;height: 100px;background: red;-webkit-transition:All 2s ease-out;-moz-transition: All 2s ease-out;-o-transition:All 2s ease-out;transition:All 2s ease-out; }
		.transition:hover{background:#000;}
	</style>
</head>
<body>
	<div class="transition"></div>
</body>
</html>

配合transform的rotateY转动属性，产生3d转动180度，颜色过渡，透明度过渡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3风车转动</title>
	<style type="text/css">
	/*鼠标经过并且width值发生改变时候采用平滑过渡效果*/
		.transition{width: 100px;height: 100px;background: red;-webkit-transition:All 2s ease-out;-moz-transition: All 2s ease-out;-o-transition:All 2s ease-out;transition:All 2s ease-out;
			}
		.transition:hover{background:#000;-webkit-transform: rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);opacity: 0.3;}
	</style>
</head>
<body>
	<div class="transition"></div>
</body>
</html>

配合css3的@keyframes规则，animation产生运动过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3风车转动</title>
	<style type="text/css">
	/*鼠标经过并且width值发生改变时候采用平滑过渡效果*/
		.transition{width: 100px;height: 100px;background: red;-webkit-transition:All 2s ease-out;-moz-transition: All 2s ease-out;-o-transition:All 2s ease-out;transition:All 2s ease-out;
			}
		.transition:hover{background:#000;-webkit-transform: rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);opacity: 0.3;
			animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite;-o-animation:mymove 5s infinite; position: relative;width: 500px;}

		/*@keyframes规则*/
		@keyframes mymove{
			from{
				top:0;
			}
			to{
				top:200px;
			}
		}
	</style>
</head>
<body>
	<div class="transition"></div>
</body>
</html>

最后一段代码的动态图，平滑改变宽度，物体定位top 物体翻转

miao淼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3的transition练习

现在开个css3特效分类，目的很简单，掌握它的常用属性与技巧。今天是2017-3-30 明年今天在回首，希望我已经成为一名优良的web前端工程师。transition：属性国度时间时间函数延迟时间过渡效果需要IE10以上才能很好支持，不过现在css3基本上都流行使用在移动端，就没有IE什么事情了。过渡效果能够很好的平滑过渡运动，常见使用场景，鼠标经过:hover 物体@keyf
复制链接

扫一扫

专栏目录