CSS之帅气朋克字体效果以及“故障风”按钮的实现（图片+按钮）

最新推荐文章于 2024-09-28 10:49:47 发布

我是X大魔王

最新推荐文章于 2024-09-28 10:49:47 发布

阅读量793

点赞数 1

分类专栏： HTML页面部件🦄 文章标签： css html 朋克按钮 html部件

转载必须声明

本文链接：https://blog.csdn.net/Xmumu_/article/details/118969426

版权

HTML页面部件🦄 专栏收录该内容

17 篇文章 11 订阅

订阅专栏

欢迎来到HTML部件频道🐰

前言📫
今天来实现一个帅气的朋克效果，这个效果是我很早之前就想出的一篇博客，今天补上，先来欣赏一下朋克的效果感~😋

在这里插入图片描述

不知道各位看官感觉如何呢，总之我本人是朋克的真爱粉🏍那么今天这一期主要实现的是“动态的”朋克按钮和背景图实现，该效果主要是通过“clip-path:inset”实现的，就是当点击的时候有一种“切割”的感觉，所以在这里分片肯定是不能少的，利用button的伪元素去控制元素的各个部分就Ok,再加上动画去切换分片的位置，来实现晃动的效果🧐那么现在就一起来学习怎么做吧🤩

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
	.btn,.btn::after{
		width: 260px;
		height: 80px;
		text-align: center;
		font-size: 22px;
		line-height: 80px;
		color: #00AFF0;
		background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(64, 30, 255) 95%);
		cursor: pointer;
		border: 0;
		outline: transparent;
		position: relative;	
	}
	.btn::after{
		content: 'X魔王朋克效果';
		position: absolute;
		top: 0;
		left: 0;
		text-shadow: -5px -2px 0 rgb(0, 183, 255),5px 2px 0 rgb(0, 255, 115);
		visibility: hidden;
	}
	.btn:hover::after{
		animation: a 1s;
		animation-timing-function: steps(1, end);
	}
	@keyframes a{
		0%{
			clip-path: inset(20% -5px 60% 0);
			transform: translate(-7px, 5px);
			visibility: visible;
		}	
	}
	</style>
	</head>
	
<body>
   <button class="btn">X魔王朋克效果</button>

</body>

</html>

在这里插入图片描述
可以看到点击的时候已经有那种感觉了，后续我们也就只是把动画加多一些罢了，现在只给出了0%而已，接下来是全部动画：


	@keyframes a{
		0%{
		           clip-path: inset(20% -5px  60%  0);
		           transform: translate(-6px,5px);
		           visibility: visible;
		          }
		          10%{
		           clip-path: inset(50% -5px  30%  0);
		           transform: translate(6px,-5px);
		          }
		          20%{
		           clip-path: inset(20% -5px  60%  0);
		           transform: translate(5px,0px);
		 
		           }
		           30%{
		               clip-path: inset(80% -5px  5%  0);
		           transform: translate(-8px,5px);
		           }
		           40%{
		               clip-path: inset(0 -5px  80%  0);
		           transform: translate(-4px,-3px);
		 
		           }
		           50%{
		               clip-path: inset(50% -5px  30%  0);
		           transform: translate(-6px,-5px);
		           }
		           60%{
		               clip-path: inset(80% -5px  5%  0);
		           transform: translate(-7px,5px);
		 
		           }
		           70%{
		               clip-path: inset(0 -5px  80%  0);
		           transform: translate(3px,6px);
		           }
		           80%{
		               clip-path: inset(50% -5px  30%  0);
		           transform: translate(5px,5px);
		 
		           }
		           90%{
		               clip-path: inset(20% -5px  60%  0);
		           transform: translate(6px,-5px);
		 
		           }
		           100%{
		               clip-path: inset(0 -5px  80%  0);
		           transform: translate(1px,5px);
		 
		           }
		
	}

transform: translate();表示偏移显示出一次效果🐰clip-path: inset（）属性表示裁剪区域
图片背景的动态朋克效果看到这里我相信这灵感也是蹭蹭蹭地出来啦💡💡💡
有关这种“输入框”地问题，也是一样用到clip-path，我自我感觉这篇博客就是对这一属性地应用😅😅😅

在这里插入图片描述
该文本框代码如下：

   <input class="cyber" type="text" placeholder="input what you want"

<style>

:root{
			background-color: 	#FFFF00;
		}
		
		input[type="text"].cyber, textarea.cyber {
		  width: calc(100% - 30px);
		  border: 30px solid #000;
		  border-left: 5px solid #000;
		  border-right: 5px solid #000;
		  border-bottom: 15px solid #000;
		  clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px) calc(100% - 10px), calc(80% - 15px) calc(100% - 0px), 10px calc(100% - 0px), 0% calc(100% - 10px));
		  padding: 12px;
		}
</style>

在这里插入图片描述

<style>
		:root{
			background-color: 	#ff5500;
		}
		
		input[type="text"].cyberpunk, textarea.cyberpunk {
		  width: calc(100% - 30px);
		  border: 30px solid #0000ff;
		  border-left: 5px solid #ff007f;
		  border-right: 5px solid #ff007f;
		  border-bottom: 15px solid #00aa00;
		  clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 5px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px) calc(100% - 10px), calc(80% - 15px) calc(100% - 0px), 10px calc(100% - 0px), 0% calc(100% - 10px));
		  padding: 12px;
		}
		</style>

霓虹灯做法
很简单的一个霓虹灯做法,比较简单就真的真的不多逼逼了

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
	<style>
		.neon {
		  text-shadow: 0 0 3vw #F4BD0A;
		  animation: neon 1.5s ease-in-out infinite;
		}
		.flux {
		  text-shadow: 0 0 3vw #179E05;
		  animation: flux 1.5s linear infinite;
		}
		@keyframes neon {
		  0%, 100% {
		    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
		    color: #FFFC00;
		  }
		  50% {
		    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
		    color: #806914;
		  }
		}
		@keyframes flux {
		  0%, 100% {
		    text-shadow: 0 0 1vw #10ff4c, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
		    color: #03C03C;
		  }
		  50% {
		    text-shadow: 0 0 .5vw #024218, 0 0 1.5vw #024713, 0 0 5vw #023812, 0 0 5vw #012707, 0 0 .2vw #022201, .5vw .5vw .1vw #011a06;
		    color: #179E05;
		  }
		}

	</style>
	</head>
	
<body>
   <div class="neon">X MONSTER</div>
   <div class="flux">X MONSTER</div>

</body>

</html>