CSS实现赛博朋克风格按钮

最新推荐文章于 2024-09-02 11:12:33 发布

溯弥

最新推荐文章于 2024-09-02 11:12:33 发布

阅读量636

点赞数 1

本文链接：https://blog.csdn.net/TBDBTUO/article/details/118070710

版权

css

赛博朋克背景
赛博朋克（Cyberpunk）是“控制论、神经机械学”与“朋克”的结合词，背景大都建立于“低端生活与高等科技的结合”，拥有先进的科学技术，再以一定程度崩坏的社会结构做对比；拥有五花八门的视觉冲击效果，如街头的霓虹灯、街排标志性广告以及高楼建筑等，通常搭配色彩是以黑、紫、绿、蓝、红为主。其中菲利普·狄克所著作的《仿生人会梦到电子羊吗？》最受注目，小说亦被改编成电影《银翼杀手》。总的来讲，赛博朋克的风格主线，就是反应出科技高度发展的人类文明，与脆弱渺小的人类个体之间的强烈反差，同时外界与内在，钢铁与肉体，过去与未来，现实与虚幻等矛盾在其中交织。
赛博朋克风格按钮
效果图片
在这里插入图片描述

故障效果主要通过 clip-path: inset 和CSS３动画实现。利用 button 的伪元素 ::after（在被选元素之后插入内容），在button::after中给它定义６个分片 --slice 变量，并通过动画切换切片的位置，来实现晃动效果。其中clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
inset() 方法用于定义一个矩形，可以传入 5 个参数，分别对应 top，right，bottom，left的裁剪位置及 round 和 radius（可选，圆角）

以下代码：
ＨＴＭＬ代码
立即加入
ＣＳＳ部分：
下面展示一些 内联代码片。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS实现赛博朋克风格按钮</title>
</head>
	<style>
		button, button::after {
		  width: 300px;
		  height: 86px;
		  font-size: 40px;
		  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
		  border: 0;
		  color: #fff;
		  letter-spacing: 3px;
		  line-height: 88px;
		  box-shadow: 6px 0px 0px #00E6F6;
		  outline: transparent;
		  position: relative;
		}
		button::after {
		  --slice-0: inset(50% 50% 50% 50%);//设置六个分片
		  --slice-1: inset(80% -6px 0 0);
		  --slice-2: inset(50% -6px 30% 0);
		  --slice-3: inset(10% -6px 85% 0);
		  --slice-4: inset(40% -6px 43% 0);
		  --slice-5: inset(80% -6px 5% 0);
		  content: '立即加入';
		  display: block;
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
		  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
		  clip-path: var(--slice-0);
		}
		button:hover::after {
		  animation: 1s glitch;//设置延时1秒，定义glitch变量在在里面设置动画
		  animation-timing-function: steps(2, end);
		}
		@keyframes glitch {
		  0% { clip-path: var(--slice-1); transform: translate(-20px, -10px); }
		  10% { clip-path: var(--slice-3); transform: translate(10px, 10px); }
		  20% { clip-path: var(--slice-1); transform: translate(-10px, 10px); }
		  30% { clip-path: var(--slice-3); transform: translate(0px, 5px); }
		  40% { clip-path: var(--slice-2); transform: translate(-5px, 0px); }
		  50% { clip-path: var(--slice-3); transform: translate(5px, 0px); }
		  60% { clip-path: var(--slice-4); transform: translate(5px, 10px); }
		  70% { clip-path: var(--slice-2); transform: translate(-10px, 10px); }
		  80% { clip-path: var(--slice-5); transform: translate(20px, -10px); }
		  90% { clip-path: var(--slice-1); transform: translate(-10px, 0px); }
		  100% { clip-path: var(--slice-1); transform: translate(0); }
		}
	</style>
<body>
	<button>立即加入</button>
</body>
</html>