4.2.01

最新推荐文章于 2025-01-22 08:45:00 发布

weixin_33671935

最新推荐文章于 2025-01-22 08:45:00 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/boss-H/p/10645242.html

本文介绍了一个使用CSS实现的简单示例，通过:hover伪类触发元素大小的变化，并利用transition属性为这一变化过程添加平滑过渡效果。示例中包含了一个蓝色背景的div，其内部还有一个红色背景的div。当鼠标悬停在内部div上时，该div会平滑地放大到原来的三倍。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
　　#d{
　　　　width:200px;
　　　　height:200px;
　　　　background:blue;

　　　　/*overflow 属性规定当内容溢出元素框时发生的事情，内容会被修剪，并且其余内容是不可见的；css过渡，给哪个属性加过度*/
　　　　overflow:hidden;
　　　　}
　　#dd{
　　　　width:100px;
　　　　height:100px;
　　　　background:red;

　　　　/*transition 属性是一个简写属性，用于设置四个过渡属性，规定完成过渡效果需要多少秒或毫秒；css2D转换，让元素放大或减少多少倍，第一个值是宽度，第二个值是高度*/
　　　　transition:transform 2s;
　　　　margin:50px;
　　　　}

　　#dd:hover{

　　　　/*transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。定义 2D 缩放转换。*/
　　　　transform: scale(3,3);
　　　　}

</style>

</head>
<body>
　　<div id="d">
　　　　<div id="dd"></div>
　　</div>
</body>
</html>

转载于:https://www.cnblogs.com/boss-H/p/10645242.html