CSS3 过渡

最新推荐文章于 2022-05-24 11:21:07 发布

boonyaxnn

最新推荐文章于 2022-05-24 11:21:07 发布

阅读量362

点赞数 1

分类专栏： CSS3 文章标签： css3 过渡

本文链接：https://blog.csdn.net/boonyaxnn/article/details/61618692

版权

CSS3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CSS3 过渡属性

W3CSchool标准CSS使用语法*transition 属性针对不同浏览器兼容

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

注意：I E10、Firefox、Chrome 以及 Opera 支持 transition 属性；Safari 需要前缀 -webkit-。

html与css代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>index</title>
		<meta name="description" content="">
		<meta name="author" content="boonya">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		<style>
			div {
				width: 300px;
				height: 200px;
				background-color: #39B940;
				-moz-transition: width 2s,height 2s,-moz-transform 2s;//*向宽度、高度和转换添加过渡效果*//
				
			}
			div:hover{
				width: 600px;
				height: 400px;
				-moz-transform:rotate(180deg);
			}
		</style>
	</head>
	<body>
		<div> 
			<p>我是小妞妞。</p>
		</div>
		
	</body>
</html>

效果图

注：图片为静态，效果为动态，请参考网址http://www.w3school.com.cn/tiy/t.asp?f=css3_transition2

boonyaxnn

关注

1
点赞
踩
0

收藏

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

CSS3 过渡属性W3CSchool标准CSS使用语法*transition 属性针对不同浏览器兼容div{transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: widt
复制链接

扫一扫

专栏目录