初学HTML5——CSS3过渡

最新推荐文章于 2022-07-21 17:25:34 发布

lxl。。

最新推荐文章于 2022-07-21 17:25:34 发布

阅读量306

点赞数

分类专栏： HTML5 文章标签： html

本文链接：https://blog.csdn.net/lxl513513/article/details/105150506

版权

HTML5 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

CSS3 transitions

CSS3的过渡就是平滑的改变一个元素的CSS值，是元素从一个样式逐渐过渡到另一个样式。
CSS3过渡使用transition属性来定义，transition属性的基本语法如下所示：

 transition：prpperty duration timing-function delay;

1.属性解释

transition-property：应用过渡的CSS属性的名称。
none：没有属性会获得过渡效果；
all：默认值，所有属性都将获得过渡效果；
property：定义应用过渡效果的CSS属性名称列表
transition-duration：过渡效果需要的时间。以秒或毫秒计，默认值为0，表示没有效果
transition-timing-function:过渡效果的世界曲线。
linear：规定以相同速度开始至结束的过渡效果；
ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果；
ease-in：规定以慢速开始的过渡效果；
ease-out：规定以慢速结束的过渡效果；
ease-in-out：规定以慢速开始和结束的过渡效果；
cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值，可能的值是0至1之间的数值。
transition-delay：效果开始之前需要等待的时间

2.示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS 过渡</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}
		.transition {
			width: 200px;
			height: 200px;
			margin: 50px auto;
			background-color: green;
			transition: all 4s;
		}
		.transition:hover {
			background-color: yellow;	
		}
	</style>
</head>
<body>
	<div class="transition"></div>
</body>
</html>

效果如下：

开始前：

在这里插入图片描述

鼠标停留后：

在这里插入图片描述

lxl。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学HTML5——CSS3过渡

CSS3 transitionsCSS3的过渡就是平滑的改变一个元素的CSS值，是元素从一个样式逐渐过渡到另一个样式。CSS3过渡使用transition属性来定义，transition属性的基本语法如下所示： transition：prpperty duration timing-function delay;1.属性解释transition-property：应用过渡的CSS...
复制链接

扫一扫