css:打造一个故障风格按钮button

最新推荐文章于 2024-05-16 06:23:05 发布

=清风徐来=

最新推荐文章于 2024-05-16 06:23:05 发布

阅读量355

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43801564/article/details/112283414

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

故障风格的按钮

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<link href="https://fonts.font.im/css?family=Oswald" rel="stylesheet">
</head>
<style type="text/css">
	body{
		display: flex;
		justify-content: center;
		align-items: center;
		min-height:100vh;
		background: yellow;

	}
	button,button::after{
		width:380px;
		height:86px;
		font-size:36px;
		font-family: 'Oswald', sans-serif;
		background:linear-gradient(45deg,transparent 5%,#ff013c 5%);
		color:white;
		border:0;
		line-height: 88px;
		letter-spacing: 3px;
		box-shadow: 6px 0px 0px #00e6f6;
		outline: transparent;
		position:relative;
	}
	button::after{
		--slice0:inset(50% 50% 50% 50%);
		--slice1:inset(80% -6px 0 0);
		--slice2:inset(50% -6px 30% 0);
		--slice3:inset(10% -6px 85% 0);
		--slice4:inset(40% -6px 43% 0);
		--slice5:inset(80% -6px 5% 0);

		content:"HOVER NOW";
		display: block;
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		background:linear-gradient(45deg,transparent 3%,#00e6f6 3%,#00e6f6 5%,#ff013c 5%);
		text-shadow: -3px -3px 0 #f8f005,3px 3px 0px #00e6f6;
		clip-path:var(--slice0);
	}
	@keyframes shad{
		0%{
			clip-path:var(--slice1);
			transform:translate(-20px,-10px);
		}
		10%{
			clip-path:var(--slice3);
			transform:translate(10px,10px);
		}
		20%{
			clip-path:var(--slice1);
			transform:translate(-10px,10px);
		}
		30%{
			clip-path:var(--slice3);
			transform:translate(0px,5px);
		}
		40%{
			clip-path:var(--slice2);
			transform:translate(-5px,0px);
		}
		50%{
			clip-path:var(--slice3);
			transform:translate(-5px,0px);
		}
		60%{
			clip-path:var(--slice4);
			transform:translate(5px,10px);
		}
		70%{
			clip-path:var(--slice2);
			transform:translate(-15px,10px);
		}
		80%{
			clip-path:var(--slice5);
			transform:translate(20px,-10px);
		}
		90%{
			clip-path:var(--slice1);
			transform:translate(-10px,0px);
		}
		100%{
			clip-path:var(--slice1);
			transform:translate(0);
		}
	}
	button:hover::after{
		animation:shad 1.5s alternate infinite;
	}
</style>
<body>
	<button>HOVER NOW</button>
</body>

</html>

=清风徐来=

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css:打造一个故障风格按钮button

故障风格的按钮<!DOCTYPE html><html><head> <title>test</title> <link href="https://fonts.font.im/css?family=Oswald" rel="stylesheet"></head><style type="text/css"> body{ display: flex; justify-content: .
复制链接

扫一扫

专栏目录