CSS3的过渡——transition属性

最新推荐文章于 2022-05-11 16:45:02 发布

我就是菜_ICai

最新推荐文章于 2022-05-11 16:45:02 发布

阅读量778

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_43797050/article/details/105203130

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS3中的过渡效果就是使元素从一个样式逐渐过渡到另一个样式。要实现这一效果，必须规定应用过渡的CSS属性名称与效果的时长，下面我们来介绍具体用法：

1. transition属性

基本语法：

transition: property duration timing- function delay;

2. transition的子属性

属性	描述	允许取值	取值说明
transition-property	规定应用过渡的CSS属性的名称	none	没有属性会获得过渡效果
		all	默认值，所有属性都将获得过渡效果
		property	定义应用过渡效果的CSS属性名称列表
transition-timing-function	规定过渡效果的时间曲线	linear	规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1))
		ease	默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))
		ease-in	规定以慢速开始的过渡效果(等于cubic-bezier(0.42,0,1,1))
		ease-out	规定以慢速结束的过渡效果(等于cubic-bezier(0,0,0.58,1) )
		ease-in-out	规定以慢速开始和结束的过渡效果(等于cubic-bezier(0.42,0,0.58.1)
		cubic -bezier(n.n,n,n)	在cubic-bezier函数中定义自己的值。可能的值是0~1的数值
transition-delay	规定效果开始之前需要等待的时间	time值	以秒或毫秒计，默认是0

3. 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS3的过渡(CSS3 transition)</title>
	<style type="text/css">
		/*方环*/
		.transition{
			width: 40px;
			height: 40px;
			border: 70px solid #ff6e9b;
			transition: 3s;
		}
		/*圆环*/
		.transition:hover{
			width: 40px;
			height: 40px;
			border: 70px solid #ff6e9b;
			border-radius: 90px;
		}
	</style>
</head>
<body>
	<div class="transition"></div>
</body>
</html>

运行结果

我就是菜_ICai

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3的过渡——transition属性

CSS3中的过渡效果就是使元素从一个样式逐渐过渡到另一个样式。要实现这一效果，必须规定应用过渡的CSS属性名称与效果的时长，下面我们来介绍具体用法：transition属性基本语法：transition: property duration timing- function delay;transition的子属性...
复制链接

扫一扫