CSS动画效果——transition之渐变方块

最新推荐文章于 2023-12-05 22:31:04 发布

纵马且长歌

最新推荐文章于 2023-12-05 22:31:04 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/no2015214099/article/details/77914454

Web 专栏收录该内容

18 篇文章

订阅专栏

本文通过三个不同的示例展示了如何使用CSS实现鼠标悬停时元素宽度变化、背景颜色渐变及边框圆角变化等过渡效果。每个示例中都包含了特定的颜色方案和样式设置，以展示不同风格的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<!DOCTYPE html>
<html>
<head>
	<title>sample</title>
	<meta charset="utf-8">
	<style type="text/css">

		._box{
			width: 300px;
			height: 100px;
			position: absolute;
			top: 100px;
			left: 50%;
			background-color: #eee;
			box-shadow: 1px 1px 2px #999;
		}
		._box p{
			text-align: center;
			font-size: 20px;
			font-family: "Microsoft Yahei";
			line-height: 50px;
			color: #aaa;
			transition: all ease .5s;
		}

		._box{
			transition: all ease .5s;
		}

		._box:hover {
			width: 400px;
			
			border-radius: 3px 50px 50px 3px;
			background-color: orange;
			box-shadow: 0px 0px 0px #444;
		}
		._box:hover p{
			color: #fff;
			
		}
		
		._box1{
			width: 300px;
			height: 100px;
			position: absolute;
			top: 210px;
			left: 50%;
			background-color: #eee;
			box-shadow: 1px 1px 2px #999;
		}
		._box1 p{
			text-align: center;
			font-size: 20px;
			font-family: "Microsoft Yahei";
			line-height: 50px;
			color: #aaa;
			transition: all ease .5s;
		}

		._box1{
			transition: all ease .5s;
		}

		._box1:hover {
			width: 400px;
			
			border-radius: 3px 50px 50px 3px;
			background-color: #149971;
			box-shadow: 0px 0px 0px #444;
		}
		._box1:hover p{
			color: #fff;
			
		}


		._box2{
			width: 300px;
			height: 100px;
			position: absolute;
			top: 320px;
			left: 50%;
			background-color: #eee;
			box-shadow: 1px 1px 2px #999;
		}
		._box2 p{
			text-align: center;
			font-size: 20px;
			font-family: "Microsoft Yahei";
			line-height: 50px;
			color: #aaa;
			transition: all ease .5s;
		}

		._box2{
			transition: all ease .5s;
		}

		._box2:hover {
			width: 400px;
			
			border-radius: 3px 50px 50px 3px;
			background-color: #1571fa;
			box-shadow: 0px 0px 0px #444;
		}
		._box2:hover p{
			color: #fff;
			
		}

		


	</style>
</head>
<body>
	<div class="c1">
		<div class="jt">
		</div>
		<div class="_box" >
			<p >渐变方块</p>
		</div>
	</div>
	<div class="c2">
		<div class="jt1">
		</div>
		<div class="_box1" >
			<p >渐变方块</p>
		</div>
	</div>
	<div class="c3">
		<div class="jt2">
		</div>
		<div class="_box2" >
			<p >渐变方块</p>
		</div>
	</div>
	
</body>
</html>

效果图：

（自己复制粘贴后看看吧）