利用阴影和过渡制作精美的立体按钮

最新推荐文章于 2021-06-03 03:03:04 发布

xijiaoliumang

最新推荐文章于 2021-06-03 03:03:04 发布

阅读量541

点赞数

本文链接：https://blog.csdn.net/xijiaoliumang/article/details/50651004

版权

<html>
	<head>
		<meta charset="UTF-8"/>
		<title>立体按钮制作</title>
		<style type = "text/css">
			 .shadow{
				margin:200px;
				width:250px;
				height:160px;
				background-color:#53CAF6;
				border-radius:50%;
				text-align:center;
				line-height:160px;
				transition:box-shadow 0.5s ease-in 0s,transform 0.5s ease-in 0s;
				
				}
			.shadow:hover{
				box-shadow:-2px 5px 3px 8px #C0C0C0;
				transform:rotate(90deg);
				/* 
					<!-- 设置过渡效果,通常与hover配合使用
				transition:样式名 过渡用时 动作方式 开始时间;
				如果要对多个样式采用过渡效果,用逗号将各参数隔开;
				-->
				
				<!-- box-shadow:四个参数分别为 
				水平阴影位置
				垂直阴影位置,
				羽化距离;
				阴影大小;
				阴影颜色;
				内/外阴影:inset/outset.注意!!!默认外阴影,设置外阴影是不用写;
				
				transform:rotate(180deg);转换180度;
				-->
				*/
			
			}
			
				
				.btn{
				margin:200px;
				width:250px;
				height:130px;
				background-color:#71DFFB;
				
				border-radius:50%;
				text-align:center;
				line-height:130px;
				/*设置一个内阴影,设置右侧灯亮形成的高光,设置厚度,设置左侧灯下阴影*/
				box-shadow:0px -8px 3px 3px #1B9FE3 inset,
						-3px 0px 3px 3px #F9F8F7 inset,
						0px 12px 0px 0px #1B9FE3,
						-5px 18px 2px 5px #CCC,;
						transition:all 0.3s ease-in 0s;
				}
				
				.btn:hover{
				margin-top:212px;
				width:250px;
				height:130px;
				background-color:#71DFFB;
				border-radius:50%;
				text-align:center;
				line-height:130px;
				/*设置一个内阴影,设置右侧灯亮形成的高光,设置厚度,设置左侧灯下阴影*/
				box-shadow:0px -8px 3px 3px #1B9FE3 inset,
						-3px 0px 3px 3px #F9F8F7 inset,
						-5px 8px 2px 2px #CCC,;
				
				}
		</style>
		
	</head>
	<body>
		<div class="shadow">盒子阴影</div>
		
				
			
		<div class="btn">按钮</div>
	</body>
</html>

最终效果

<img src="https://img-blog.csdn.net/20160211155449699?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

xijiaoliumang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用阴影和过渡制作精美的立体按钮

立体按钮制作 .shadow{ margin:200px; width:250px; height:160px; background-color:#53CAF6; border-radius:50%; text-align:center; line-height:160px; transition:box-shadow
复制链接

扫一扫