iemotion
Version:
评论时快速找到表情。
351 lines (349 loc) • 9.43 kB
HTML
<html>
<head>
<title>小康博客表情速查</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
li,
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
.item {
width: 102px;
height: 107px;
position: relative;
}
.item .img {
text-align: center;
position: relative;
width: 102px;
height: 107px;
max-width: 100%;
}
.item img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
.item .button {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
text-align: center;
display: none;
width: 100%;
height: 100%;
color: #fff;
}
.item .button span {
display: block;
line-height: 36px;
cursor: pointer;
}
.item .button span:hover {
background: rgba(255, 0, 0, 0.7);
}
.item .img:hover .button {
display: block;
}
/* 按钮 */
.btns button {
margin: 3px 5px;
}
.footer {
margin-top: 150px;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background: #49b1f5;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
.mask {
z-index: 100;
background-color: rgba(255, 255, 255, 0.5);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-y: hidden;
}
.loader {
width: 150px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
svg {
width: 90%;
fill: none;
}
.load {
transform-origin: 50% 50%;
stroke-dasharray: 570;
stroke-width: 20px;
}
.load.one {
stroke: #554d73;
}
.load.one,
.load.two {
animation: load 1.5s infinite;
}
.load.two {
stroke: #a496a4;
animation-delay: 0.1s;
}
.load.three {
stroke: #a5a7bb;
animation: load 1.5s infinite;
animation-delay: 0.2s;
}
.point {
animation: bounce 1s ease-in-out infinite;
}
.point.one {
fill: #a5a7bb;
animation-delay: 0s;
}
.point.two {
fill: #a496a4;
animation-delay: 0.1s;
}
.point.three {
fill: #554d73;
animation-delay: 0.2s;
}
@keyframes bounce {
0%,
to {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes load {
0% {
stroke-dashoffset: 570;
}
50% {
stroke-dashoffset: 530;
}
to {
stroke-dashoffset: 570;
transform: rotate(1turn);
}
}
@keyframes link_custom {
0% {
box-shadow: 0 0 5px grey, inset 0 0 5px grey, 0 1px 0 grey;
box-shadow: 0 0 5px var(--primary-color, grey),
inset 0 0 5px var(--primary-color, grey),
0 1px 0 var(--primary-color, grey);
}
to {
box-shadow: 0 0 20px grey, inset 0 0 10px grey, 0 1px 0 grey;
box-shadow: 0 0 20px var(--primary-color, grey),
inset 0 0 10px var(--primary-color, grey),
0 1px 0 var(--primary-color, grey);
}
}
@keyframes link_custom1 {
0% {
box-shadow: 0 0 4px #ca00ff;
}
25% {
box-shadow: 0 0 16px #00b5e5;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #b1da21;
}
to {
box-shadow: 0 0 4px red;
}
}
@keyframes borderFlash {
0% {
border-color: transparent;
}
to {
border-color: grey;
border-color: var(--primary-color, grey);
}
}
@keyframes auto_rotate_left {
0% {
transform: rotate(0);
}
to {
transform: rotate(-1turn);
}
}
@keyframes auto_rotate_right {
0% {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<link
rel="shortcut icon"
href="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/favicon.ico"
type="image/x-icon"
/>
</head>
<body>
<!-- 遮罩及loading -->
<div class="mask">
<div class="loader">
<svg
viewBox="0 0 120 120"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="load one" cx="60" cy="60" r="40"></circle>
<circle class="load two" cx="60" cy="60" r="40"></circle>
<circle class="load three" cx="60" cy="60" r="40"></circle>
<g>
<circle class="point one" cx="45" cy="70" r="5"></circle>
<circle class="point two" cx="60" cy="70" r="5"></circle>
<circle class="point three" cx="75" cy="70" r="5"></circle>
</g>
</svg>
</div>
</div>
<div class="container">
<h2>网络评论表情速查小工具</h2>
<br /><!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link all_img active" data-toggle="tab" href="#all_img"
>全部表情</a
>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#copy_all">复制全部</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">标签分类</a>
</li>
<li class="nav-item">
<a
class="nav-link"
target="_blank"
href="https://github.com/Dreamy-TZK/iemotion-pic"
>Github</a
>
</li>
</ul>
<!-- 常用 -->
<div class="tab-content">
<!-- 全部 -->
<div id="all_img" class="container tab-pane fade active show">
<br />
<ul class="block-icon-list clearfix">
<!-- 此处插入全部图片列表 -->
</ul>
</div>
<!-- 标签 -->
<div id="menu2" class="container tab-pane fade">
<br />
<h3>关于此系统</h3>
<p>
此系统仅为<a href="https://www.antmoe.com" target="_blank"
>Dreamy.TZK</a
>方便查询表情制作
</p>
<p>
使用过程中，如果有问题请在<a
href="https://www.antmoe.com/contact/"
target="_blank"
>留言板</a
>留言
</p>
<p>
所有图片来源于网络，侵删。表情分类JSON格式地址：<a
href="https://unpkg.com/iemotion/dist/name.json"
target="_blank"
rel="noopener noreferrer"
></a>
</p>
<div class="btns"></div>
</div>
<div id="copy_all" class="container tab-pane fade">
<br />
<h3>关于复制的基本内容</h3>
<p>
此系统仅为<a href="https://www.antmoe.com" target="_blank"
>Dreamy.TZK</a
>方便查询表情制作
</p>
<p>
使用过程中，如果有问题请在<a
href="https://www.antmoe.com/contact/"
target="_blank"
>留言板</a
>留言
</p>
<p>所有图片来源于网络，侵删</p>
<p>
此复制仅适配twikoo评论的自定义表情，如果需要其他格式，请参考源代码自行转换。
</p>
<p class="source"></p>
<textarea
class="form-control"
id="url_list"
cols="100"
rows="30"
></textarea>
</div>
</div>
</div>
<footer class="footer"></footer>
<script>
var clipboard = new ClipboardJS('.copy')
clipboard.on('success', function (o) {
console.info('Action:', o.action),
console.info('Text:', o.text),
console.info('Trigger:', o.trigger),
o.clearSelection(),
alert('ok')
}),
clipboard.on('error', function (o) {
console.error('Action:', o.action),
console.error('Trigger:', o.trigger)
})
</script>
</body>
</html>