mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
93 lines
2.2 KiB
HTML
93 lines
2.2 KiB
HTML
<div class="input-div">
|
|
<input class="input" name="file" type="file">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor" class="icon"><polyline points="16 16 12 12 8 16"></polyline><line y2="21" x2="12" y1="12" x1="12"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by akshat-patel28 - Tags: input, neon, fillup, box-shadow, file upload */
|
|
.input-div {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgb(1, 235, 252);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);
|
|
animation: flicker 2s linear infinite;
|
|
}
|
|
|
|
.icon {
|
|
color: rgb(1, 235, 252);
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
animation: iconflicker 2s linear infinite;
|
|
}
|
|
|
|
.input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
@keyframes flicker {
|
|
0% {
|
|
border: 2px solid rgb(1, 235, 252);
|
|
box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);
|
|
}
|
|
|
|
5% {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
10% {
|
|
border: 2px solid rgb(1, 235, 252);
|
|
box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);
|
|
}
|
|
|
|
25% {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
30% {
|
|
border: 2px solid rgb(1, 235, 252);
|
|
box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);
|
|
}
|
|
|
|
100% {
|
|
border: 2px solid rgb(1, 235, 252);
|
|
box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);
|
|
}
|
|
}
|
|
|
|
@keyframes iconflicker {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
5% {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
30% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|