按钮动画 - 波纹效果 - 柏港建站平台

发布：2020/11/26 9:09:47作者：管理员来源：本站浏览次数：1259

		<!DOCTYPE html>
	
		<html>
	
		<head>
	
		<meta charset="utf-8"> 
	
		<title>菜鸟教程(runoob.com)</title> 
	
		<style>
	
		.button {
	
		    position: relative;
	
		    background-color: #4CAF50;
	
		    border: none;
	
		    font-size: 28px;
	
		    color: #FFFFFF;
	
		    padding: 20px;
	
		    width: 200px;
	
		    text-align: center;
	
		    -webkit-transition-duration: 0.4s; /* Safari */
	
		    transition-duration: 0.4s;
	
		    text-decoration: none;
	
		    overflow: hidden;
	
		    cursor: pointer;
	
		}
	
		.button:after {
	
		    content: "";
	
		    background: #90EE90;
	
		    display: block;
	
		    position: absolute;
	
		    padding-top: 300%;
	
		    padding-left: 350%;
	
		    margin-left: -20px!important;
	
		    margin-top: -120%;
	
		    opacity: 0;
	
		    transition: all 0.8s
	
		}
	
		.button:active:after {
	
		    padding: 0;
	
		    margin: 0;
	
		    opacity: 1;
	
		    transition: 0s
	
		}
	
		</style>
	
		</head>
	
		<body>
	
		<h2>按钮动画 - 波纹效果</h2>
	
		<button class="button">Click Me</button>
	
		</body>
	
		</html>

　waves 波纹

css3按钮波纹效果　

wpf 鼠标移上去Button 变成圆形按钮 WPF实现placeholder效果 WPF自定义控件之ItemsControl鱼眼效果 C# 非模态窗体（show）实现模态窗体（ShowDialog）的效果 asp.net core页面切换过渡效果实现仿vue切换过渡 jquery动画插件jQuery Easing Plugin .net6如何禁用控制台窗口的关闭按钮？在C#中Windows Console控制台设置控制台标题、禁用关闭按钮、关闭快速编辑模式、插入模式 Bootstrap告警框（alert）实现弹出效果和短暂消失后上浮消失看完10大效果好的营销技巧与工具让你快速掌握营销套路

柏港建站平台

柏港 CSS

按钮动画 - 波纹效果

柏港为您推荐了一些相关资讯