3d按钮练习

最新推荐文章于 2024-10-10 11:24:04 发布

原创最新推荐文章于 2024-10-10 11:24:04 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了一个使用CSS设计的动态按钮示例，包括复杂的阴影效果、变形动画以及响应式布局。通过调整边框半径和阴影参数，实现了按钮的立体感和交互反馈。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按钮练习</title>
	<style type="text/css">

	.box{
		width: 400px;
		text-align: center;
		
		height: 200px;
		background: #ccf;
		margin:100px auto;
		/* border-radius: 水平半径/垂直半径 */
		/* border-radius: 50%; */
		border-radius: 200px/100px;
		-webkit-border-radius:50%;
		/* box-shadow: 水平阴影 垂直阴影 模糊距离  阴影尺寸 颜色 内外阴影 */
		box-shadow: 0  -15px  15px  #88f inset,
		10px -15px 15px #44f inset,
		-10px -15px 15px #fff inset,
		0 15px #88f,
		-35px 40px 5px rgba(0,0,0,0.3);

      font:55px "微软雅黑";
      transition:all 0.3s ease-in 0s;

	}
	.content{
		color:#88f;
		line-height: 150px;
		transform:scale(1,0.8); /*  让文字扁一点 */
		/* text-shadow: 水平阴影 垂直阴影 模糊距离 颜色; */
		text-shadow:3px -3px 1px #44f,-3px 3px 1px #fff;
	}
	.txt{
		text-align: center;
	}
	.box:hover{
			box-shadow:
			 0  -15px  15px  #88f inset,
			10px -15px 15px #44f inset,
			-10px -15px 15px #fff inset,
			0 3px #88f,
			-10px 15px 5px rgba(0,0,0,0.3);
			margin-top:150px;
	}
	</style>
</head>
<body>
	<div class="box">
		 <div class="content">山东蓝翔</div> 
	</div>
	<div class="txt">学习挖掘机哪家强，中国山东 找蓝翔 </div>
</body>
</html>```