feat:完成界面
This commit is contained in:
Naccl
@@ -1,5 +1,4 @@
|
|||||||
body {
|
body {
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -13,6 +12,9 @@ body {
|
|||||||
);
|
);
|
||||||
background-size: 200% 200%;
|
background-size: 200% 200%;
|
||||||
animation: gradient-move 15s ease alternate infinite;
|
animation: gradient-move 15s ease alternate infinite;
|
||||||
|
font-family: Roboto;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes gradient-move {
|
@keyframes gradient-move {
|
||||||
@@ -30,3 +32,110 @@ body {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #3498db;
|
||||||
|
border: 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
margin: 10px 0;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp {
|
||||||
|
display: grid;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
width: 800px;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp.short {
|
||||||
|
display: block;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp .label {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
font-weight: 500;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp .focus-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
z-index: -1;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp input {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
padding: 16px 12px 0 12px;
|
||||||
|
height: 56px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
color: #000;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp input:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp input:not(:-moz-placeholder-shown) + .label {
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translate3d(0, -12px, 0) scale(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp input:not(:-ms-input-placeholder) + .label {
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translate3d(0, -12px, 0) scale(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp input:not(:placeholder-shown) + .label {
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translate3d(0, -12px, 0) scale(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp input:focus {
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
outline: none;
|
||||||
|
box-shadow: inset 0 -2px 0 #0077FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp input:focus + .label {
|
||||||
|
color: #0077FF;
|
||||||
|
transform: translate3d(0, -12px, 0) scale(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp input:focus + .label + .focus-bg {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transition: all 0.1s ease;
|
||||||
|
}
|
||||||
@@ -7,11 +7,23 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<input type="text" id="long">
|
<label for="long" class="inp">
|
||||||
<button type="button" id="generate">生成</button>
|
<input type="text" id="long" placeholder=" ">
|
||||||
<input type="text" id="short">
|
<span class="label">长链接</span>
|
||||||
|
<span class="focus-bg"></span>
|
||||||
|
</label>
|
||||||
|
<button type="button" id="generate">生成短链接</button>
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<label for="short" class="inp short">
|
||||||
|
<input type="text" id="short" placeholder=" ">
|
||||||
|
<span class="label">短链接</span>
|
||||||
|
<span class="focus-bg"></span>
|
||||||
|
</label>
|
||||||
|
<button type="button" id="copy" style="width:100px;" data-clipboard-action="copy" data-clipboard-target="#short">Copy</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
$('#generate').click(() => {
|
$('#generate').click(() => {
|
||||||
let longURL = $('#long').val();
|
let longURL = $('#long').val();
|
||||||
@@ -31,6 +43,14 @@
|
|||||||
alert('请输入原始链接');
|
alert('请输入原始链接');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
let clipboard = new ClipboardJS('#copy');
|
||||||
|
clipboard.on('success', function (e) {
|
||||||
|
e.clearSelection();
|
||||||
|
$('#copy').text('Copied!');
|
||||||
|
setTimeout(() => {
|
||||||
|
$('#copy').text('Copy');
|
||||||
|
}, 2000)
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user