css过渡效果二

最新推荐文章于 2024-03-18 21:52:36 发布

xvzhengyang

最新推荐文章于 2024-03-18 21:52:36 发布

阅读量326

点赞数

分类专栏： html 前端 HTML与CSS css 文章标签： css 效果

本文链接：https://blog.csdn.net/xvzhengyang/article/details/88210999

版权

前端同时被 3 个专栏收录

80 篇文章 0 订阅

订阅专栏

css

47 篇文章 0 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

鼠标悬停看到动画过渡效果 ,旋转缩放平移以及透明度

#box{
               position: absolute;
               top: 100px;
               left: 100px;
               width: 200px;
               height: 200px;
               background-color: red;
               transition: transform 5s;
               /* // 这个属性指出,如果transform属性的值改变,要在指定的时间内从当前的transform值过渡到新的transform值 */
               -webkit-transition: -webkit-transform 2s;
               -moz-transition:-moz-transform 2s;

           }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS变换和过渡1</title>
		<!-- 
			1.通过使用CSS,现在可以对元素做充分的2D和3D变换
			2.看下面的例子
		 -->
		 <style type="text/css">
		 	#box{
				position: absolute;
				top: 100px;
				left: 100px;
				width: 200px;
				height: 200px;
				background-color: red;
				transition: transform 5s;
				/* // 这个属性指出,如果transform属性的值改变,要在指定的时间内从当前的transform值过渡到新的transform值 */
				-webkit-transition: -webkit-transform 2s;
				-moz-transition:-moz-transform 2s;
				
			}
			#box:hover{
				/* 鼠标处于悬停状态的时候,旋转45度 */
				transform: rotate(45deg);
				-webkit-transform: rotate(45deg);// SAFARI CHROME
				-moz-transform: rotate(45deg);// MOZILLA
				-o-transform:rotate(45deg);// OPERA
				-ms-transform: rotate(45deg);// IE
			}
		 </style>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>

xvzhengyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css过渡效果二

鼠标悬停看到动画过渡效果,旋转缩放平移以及透明度#box{ position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; ...
复制链接

扫一扫