yang/k5web
1
0
Fork 0
mirror of https://github.com/silenty4ng/k5web synced 2025-01-06 20:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

egg

Browse source
This commit is contained in:
Silent YANG 2024-10-29 22:11:25 +08:00
parent b3a2c2cc09
commit ad9767215b
1 changed files with 219 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

219
src/views/dashboard/workplace/components/banner.vue
View file

@ -54,6 +54,19 @@
</a-collapse>
</div>
<br>
<div class="halloween">
<div class="head">
<div class="skull">
<div class="eyes">
<div class="eye eye-left"></div>
<div class="eye eye-right"></div>
</div>
</div>
</div>
<div class="body"></div>
<div class="legs"></div>
</div>
<br>
<br>
</a-col>
</template>
@ -166,4 +179,210 @@
filter: invert(1) hue-rotate(180deg);
}
}
.halloween .head .skull:before,
.halloween .head .skull:after,
.halloween .eyes .eye:before,
.halloween .body:before,
.halloween .body:after,
.halloween .legs:before{
content:'';
position:absolute;
}
.halloween{
width:30px;
height:44px;
margin-left:20px;
animation:move 3s infinite;
}
.halloween .head{
z-index:1;
width:25px;
height:25px;
background:#444;
border-radius:50%;
position:relative;
}
.halloween .head .skull{
left:2px;
bottom:2px;
width:16px;
height:16px;
color:#f9f9f9;
border-radius:50%;
background:#f9f9f9;
position:absolute;
animation:skull 3s infinite;
}
.halloween .head .skull:before{
top:9px;
width:0;
left:50%;
height:0;
z-index:1;
margin-left:-2px;
border:2px solid transparent;
border-bottom:2px solid #444;
}
.halloween .head .skull:after{
top:14px;
left:50%;
width:1px;
height:4px;
margin-left:-1px;
background:#f9f9f9;
box-shadow: 2px 0,-2px 0,4px 0,-4px 0,
-3px -2px,-1px -2px,1px -2px,3px -2px
}
.halloween .eyes{
width:inherit;
height:inherit;
overflow:hidden;
border-radius:50%;
position:relative;
}
.halloween .eyes .eye{
top:5px;
width:5px;
height:5px;
position:absolute;
border-radius:50%;
background:#f8cd22;
border:1px solid #444;
border-right:2px solid #444;
}
.halloween .eyes .eye:before{
top:-1px;
left:-1px;
width:5px;
height:3px;
background:#f9f9f9;
border-radius:5px 5px 0 0;
animation:eyes 3s infinite;
}
.halloween .eyes .eye.eye-left{
left:1px;
}
.halloween .eyes .eye.eye-right{
right:1px;
}
.halloween .body{
top:-3px;
width:24px;
height:17px;
background:#444;
position:relative;
border-radius:10px 10px 2px 2px;
}
.halloween .body:before,
.halloween .body:after{
top:3px;
width:4px;
height:12px;
background:#444;
}
.halloween .body:before{
left:-1px;
border-radius:100% 0 0 2px;
transform:rotate(10deg);
animation:hand-left 3s infinite;
}
.halloween .body:after{
right:-1px;
border-radius:0 100% 2px 0;
transform:rotate(-10deg);
animation:hand-right 3s infinite;
}
.halloween .legs{
top:-3px;
left:50%;
width:21px;
height:10px;
overflow:hidden;
margin-left:-13px;
position:relative;
border-bottom:1px solid rgba(0,0,0,.2);
}
.halloween .legs:before{
top:0;
left:-7px;
width:60px;
height:10px;
background-image:linear-gradient(-495deg, #444 4px,transparent 0), linear-gradient(-45deg, transparent 4px, #444 0);
background-size:4px 8px;
background-repeat:repeat-x;
animation:legs 3s infinite;
}
@keyframes move{
0%{
transform:translateX(0)
}
50%{
transform:translateX(15px)
}
100%{
transform:translateX(0)
}
}
@keyframes skull{
0%{
transform:translate(0,0)
}
25%{
transform:translate(2px,1px)
}
75%{
transform:translate(3px,-1px)
}
100%{
transform:translate(0,0)
}
}
@keyframes eyes{
0%{
top:-5px;
border-radius:50%;
}
50%{
top:-1px;
border-radius:5px 5px 0 0;
}
100%{
top:-5px;
border-radius:50%;
}
}
@keyframes legs{
0%{
left:-7px;
}
50%{
left:-25px;
}
100%{
left:-7px;
}
}
@keyframes hand-left{
0%{
left:1px;
}
50%{
left:-2px;
}
100%{
left:1px;
}
}
@keyframes hand-right{
0%{
right:1px;
}
50%{
right:-2px;
}
100%{
right:1px;
}
}
</style>