前言📫
今天来实现一个帅气的朋克效果，这个效果是我很早之前就想出的一篇博客，今天补上，先来欣赏一下朋克的效果感~😋
| 不知道各位看官感觉如何呢，总之我本人是朋克的真爱粉🏍那么今天这一期主要实现的是“动态的”朋克按钮和背景图实现，该效果主要是通过“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>
| 好啦，今天的分享就到这里结束喽，小分享就不在这里多逼逼了，有问题评论区见🐭欢迎评论、点赞和关注💕 |