【css3初级】transition过渡效果写法，鼠标放到图片上图片变小

最新推荐文章于 2023-04-15 22:15:48 发布

仰望星空的包子

最新推荐文章于 2023-04-15 22:15:48 发布

阅读量3.2k

点赞数

分类专栏： css3学习文章标签： css3 transition 过渡效果

本文链接：https://blog.csdn.net/sinat_21206105/article/details/52315010

版权

css3学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

transition过渡效果可以应用到html每个元素。用法是添加到每个元素的事件中，比如说hover，onmouseover，onclick事件等。

下面就给大家介绍下transition的简单用法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
.animation{width: 200px;height: 200px;background-color: #ff0; --webkit-transition: width,height,transform 2s;transition: width,height,transform 2s;}
		.animation:hover{width: 200px;height: 300px; --webkit-transform: scale(0.5);transform:scale(0.5);}
	</style>
</head>
<body>
<div class="animation">div从大变小特效</div>

</body>
</html>

前后对比照片：

仰望星空的包子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【css3初级】transition过渡效果写法，鼠标放到图片上图片变小

transition过渡效果可以应用到html每个元素。用法是添加到每个元素的事件中，比如说hover，onmouseover，onclick事件等。下面就给大家介绍下transition的简单用法： Document .animation{width: 200px;height: 200px;background-color: #ff0; --webkit-transition
复制链接

扫一扫

专栏目录