LaniakeaSupercluster/webrtc
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

云朵图标+拖拽文件测试

Browse Source
This commit is contained in:
XiaoZhuo 2023-10-12 22:18:36 +08:00
parent 0e8a62c6ef
commit 50985470e1
2 changed files with 101 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
public/cloud.html
View File

@ -3,58 +3,117 @@
<head> <head>
<title>Cloud Upload Icon</title> <title>Cloud Upload Icon</title>
<style> <style>
.cloud-icon { #box {
width: 20rem;
height: 5rem;
backdrop-filter: blur(5px);
background-color: rgb(252, 252, 252);
border-radius: 1em;
border: 1px solid rgb(241, 241, 241);
position: relative; position: relative;
width: 100px; user-select: none;
height: 100px; cursor: pointer;
border-radius: 50%; margin: 1rem 2rem;
background-color: #fff; }
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); #box:hover > #drop {
display: flex; display: block;
align-items: center;
justify-content: center;
overflow: hidden;
} }
.cloud-icon::before, #cloud {
.cloud-icon::after { width: 82px;
height: 30px;
background: #e7f4fd;
background: -webkit-linear-gradient(top,#e7f4fd 5%,#ceedfd 100%);
border-radius: 25px;
position: relative;
margin: 33px auto 5px;
}
#cloud:before {
width: 45px;
height: 45px;
top: -22px;
right: 12px;
border-radius: 50px;
}
#cloud:after {
width: 25px;
height: 25px;
top: -12px;
left: 12px;
border-radius: 25px;
}
#cloud:before,
#cloud:after {
content: ""; content: "";
background: #e7f4fd;
position: absolute; position: absolute;
background-color: #fff; z-index: -1;
}
#cloud span {
width: 87px;
position: absolute;
bottom: -2px;
background: #000;
z-index: -1;
box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
border-radius: 50%; border-radius: 50%;
opacity: 0.7;
animation: cloud 2s ease-in-out infinite;
} }
.cloud-icon::before { #drop {
width: 80px; width: 100%;
height: 80px; color: #999;
top: -30px; line-height: 5rem;
left: -30px; text-align: center;
} position: absolute;
top: 0;
.cloud-icon::after { display: none;
width: 100px;
height: 100px;
top: -50px;
right: -50px;
animation-delay: 1s;
}
@keyframes cloud {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(10px, -10px);
}
100% {
transform: translate(0, 0);
}
} }
</style> </style>
<script>
onload = () => {
const file = document.createElement('input')
file.type = 'file'
file.onchange = event => {
for (const i of file.files) {
console.log('已获取文件：', i)
}
file.value = null
}
box.onclick = () => file.click()
let dragStats = 0
document.ondragover = e => {
e.preventDefault()
if(dragStats) return
drop.style.display = 'block'
}
document.ondragleave = e => {
e.preventDefault()
if(dragStats) return
dragStats = setTimeout(() => {
dragStats = 0
drop.style.display = ''
}, 1000)
}
document.ondrop = e => {
e.preventDefault()
dragStats = 0
drop.style.display = ''
const files = e.dataTransfer.files
for (const i of files) {
console.log('已获取文件：', i)
}
}
}
</script>
</head> </head>
<body> <body>
<div class="cloud-icon"></div> <div id="box">
<div id="cloud"><span></span></div>
<span id="drop">点击或拖拽音乐到此处共享您的音乐</span>
</div>
</body> </body>
</html> </html>

2
public/weigets.js
View File

@ -73,7 +73,7 @@ export function UploadMusic(options) {
input.click() input.click()
}, },
children: [ children: [
// 绘制一个云朵上传图标(放弃了...) // 绘制一个云朵上传图标(别放弃...还有我呢!)
createElement({ createElement({
style: { style: {
position: 'absolute', position: 'absolute',