Skip to content

S
Security
Commit 5313bde0 by xhw
Options

更新

parent 132d1ef0
Showing with 1976 additions and 0 deletions
00.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body style="background: #363B40">
<div id="dd" style="background: url('./img/总览.png') no-repeat;width: 480px;height: 450px"></div>
<script>
const dd = document.getElementById('dd')
dd.onmouseover = (e) => {
}
</script>
</body>
</html>
AudioTest.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
<style>
.demo{width:560px;margin:60px auto 10px auto}
.demo p{padding:10px 0}
</style>
</head>
<body>
<div class="demo">
<p><strong>自制音乐播放器</strong></p>
<div id="player1">
<pre class="aplayer-lrc-content">
[00:00.00] 作曲 : 林一峰
[00:01.00] 作词 : 易家扬
[00:24.898]听见 冬天的离开
[00:29.697]我在某年某月 醒过来
[00:34.768]我想 我等 我期待
[00:40.598]未来却不能因此安排
[00:53.398]阴天 傍晚 车窗外
[00:58.758]未来有一个人在等待
[01:04.298]向左向右向前看
[01:09.599]爱要拐几个弯才来
[01:14.369]我遇见谁 会有怎样的对白
[01:19.638]我等的人 他在多远的未来
[01:24.839]我听见风来自地铁和人海
[01:30.399]我排着队 拿着爱的号码牌
[01:56.388]阴天 傍晚 车窗外
[02:02.298]未来有一个人在等待
[02:06.650]向左向右向前看
[02:12.000]爱要拐几个弯才来
[02:16.980]我遇见谁 会有怎样的对白
[02:22.289]我等的人 他在多远的未来
[02:27.989]我听见风来自地铁和人海
[02:32.688]我排着队 拿着爱的号码牌
[02:43.380]我往前飞 飞过一片时间海
[02:48.298]我们也曾在爱情里受伤害
[02:53.689]我看着路 梦的入口有点窄
[02:58.748]我遇见你是最美丽的意外
[03:05.888]总有一天 我的谜底会揭开
</pre>
</div>
</div>
<script>
var ap = new APlayer
({
element: document.getElementById('player1'),
narrow: false,
autoplay: true,
showlrc: true,
music: {
title: '遇见',
author: '孙燕姿',
url: 'http://m701.music.126.net/20210125234204/6c2061718f0d20e8c3cd98c9b55daf6f/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/5473405221/2466/c6b2/5bb0/d2ed93b8db16409a6c4f0e5aa9d8ee77.mp3',
pic: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000002ehzTm0TxXC2.jpg'
}
});
console.log(ap)
</script>
</body>
\ No newline at end of file
CSS测试.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 300px;
height: 300px;
background-color: rgb(231, 24, 24);
}
.p1:hover ~ .d1{
background-color: rgb(16, 243, 148);
}
</style>
</head>
<body>
<div class="d1">
<div class="p1"> hello </div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
Gx11.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 圆形进度条拖拽滑动 </title>
</head>
<body style="background-color: black;">
<canvas id="canvasId" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var ox = 200;
var oy = 200;
var or = 180;
var br = 15;
var moveFlag = false;
function offset(r,d) {//根据弧度与距离计算偏移坐标
return {x: -Math.sin(r)*d, y: Math.cos(r)*d};
};
function draw(n) {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.strokeStyle = "#99a";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.arc(ox,oy,or,0,Math.PI,true);//半圆
// ctx.arc(ox,oy,or,0,2*Math.PI,true);//整圆
ctx.stroke();
ctx.strokeStyle = "#69f";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.arc(ox,oy,or,Math.PI,(n*2+0.5)*Math.PI,false);
// ctx.arc(ox,oy,or,0.5*Math.PI,(n*2+0.5)*Math.PI,false);
ctx.stroke();
ctx.fillStyle = "#69f";
ctx.font = "80px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(Math.round(n*100-25)+"%",ox,oy);
ctx.fillStyle = "#00f";
ctx.beginPath();
var d = offset(n*2*Math.PI,or);
ctx.arc(ox+d.x,oy+d.y,br,0,2*Math.PI,true);
ctx.fill();
}
var on = ("ontouchstart" in document)? {
start: "touchstart", move: "touchmove", end: "touchend"
} : {
start: "mousedown", move: "mousemove", end: "mouseup"
};
function getXY(e,obj) {
var et = e.touches? e.touches[0] : e;
var x = et.clientX;
var y = et.clientY;
return {
x : x - obj.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
y : y - obj.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop)
}
}
canvas.addEventListener(on.start, function(e) {
moveFlag = true;
}, false);
canvas.addEventListener(on.move, function(e) {
if (moveFlag) {
var k = getXY(e,canvas);
var r = Math.atan2(k.x-ox, oy-k.y);
var hd = (Math.PI+r)/(2*Math.PI);
// 半圆的滑动范围判断
if (hd <= 0.5 && hd >= 0.25) {
draw(hd);
}
}
}, false);
canvas.addEventListener(on.end, function(e) {
moveFlag = false;
}, false);
draw(0.25);
</script>
</body>
</html>
\ No newline at end of file
HotkeysTest.html 0 → 100644
<html>
<head>
<script type="text/javascript">
window.onload = function () {
let Hotkey= new HotKeyHandler(0, "K", function () {
alert("注册成功");
});
}
class HotKeyHandler {
constructor(MainKey, SubKey, func) {
this.currentMainKey= null;
this.currentSubKey=SubKey;
this.func=func;
this.MKeycode = "";
switch (MainKey) {
case 0:
this.MKeycode = 17; //Ctrl
break;
case 1:
this.MKeycode = 16; //Shift
break;
case 2:
this.MKeycode = "18"; //Alt
break;
}
document.addEventListener('keyup',()=>{
this.currentMainKey = null;
})
document.addEventListener('keydown',()=>{
//获取键值
var keyCode = event.keyCode;
var keyValue = String.fromCharCode(event.keyCode);
console.log("in")
if (this.currentMainKey != null) {
if (keyValue == this.currentSubKey) {
this.currentMainKey = null;
if (this.func != null)
this.func();
}
}
if (keyCode == this.MKeycode) this.currentMainKey = keyCode;
}
)
}
}
</script>
</head>
<body>
测试，按下ctrl+k你就会发现神奇的事情发生了
</body>
</html>
MediaReaderDemo.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- <script src="./jquery-1.3.2.min.js" type="text/javascript"></script> -->
</head>
<body>
<input type="file" id="file" />
<video id="player"autoplay="autoplay">
</video>
</body>
<script type="text/javascript">
HTMLDocument.prototype.φ =function (str){
console.log(HTMLDocument.prototype);
return this.querySelector(str);
}
function φ(str){
return document.φ(str);
}
φ("#file").onchange=function (file) {
φ("body").append(file.target.files[0]);
var url = window.URL.createObjectURL(file.target.files[0]);
console.log(url);
φ("#player").src = url;
φ("#player").onload = function () {
window.URL.revokeObjectURL(src);
};
φ("#player").style.cssText="width:100%;height:100%";
};
</script>
</html>
\ No newline at end of file
SSR.html 0 → 100644
<html>
<style>
.S{
position: absolute;
width: 99px;
height: 99px;
opacity: .7;
}
</style>
<body>
<div id="1" style="background-color:blue;left: 50%;top:50%" onclick="Triggered()" class="S"></div>
<div id="2" style="background-color:red;left: 50%;top:50%;transform: translate(-25%,-50%);" onclick="Triggered()" class="S"></div>
<div id="3" style="background-color:green;left: 50%;top:50%;transform: translate(-50px,0);" onclick="Triggered()" class="S"></div>
</body>
<script>
function Triggered(e){
console.log(event.target.id);//
}
</script>
</html>
\ No newline at end of file
T.html 0 → 100644
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试的拖拽功能</title>
<style type="text/css">
body, div { margin: 0; paading: 0; font-size: 12px; }
body { width:100%; margin: 0 auto; }
ul, li { margin: 0; padding: 0; list-style: none; }
.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; }
.drag_module_box { width: 600px; height: auto; margin: 25px 0 0 0; padding: 5px; border: 1px solid #f00; }
.drag_module_box1 { width: 600px; height: auto; margin: 25px 0 0 0; padding: 5px; border: 1px solid #f00; }
.drag_module_main { position: static; width: 600px; height: 80px; margin-bottom: 5px; border: 1px solid blue; background: #ccc; }
.drag_module_maindash { position: absolute; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed blue; background: #ececec; opacity: 0.7; }
.drag_module_hide { width: 600px; height: 80px; margin-bottom: 5px; }
.drag_module_dash { position: sta;tic; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed #f00; };
</style>
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready( function () {
var range = { x: 0, y: 0 };//鼠标元素偏移量
var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //拖拽对象的四个坐标
var tarPos = { x: 0, y: 0, x1: 0, y1: 0 }; //目标元素对象的坐标初始化
var theDiv = null, move = false;//拖拽对象 拖拽状态
var theDivId =0, theDivHeight = 0, theDivHalf = 0; tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
var tarDiv = null, tarFirst, tempDiv; //要插入的目标元素的对象, 临时的虚线对象
function loopbox(){ //循环初始化
$(".drag_module_box").find(".drag_module_main").each(function(){
console.log( 'find' );
$(this).mousedown(function (event){
//拖拽对象
theDiv = $(this);
//鼠标元素相对偏移量
range.x = event.pageX - theDiv.offset().left;
range.y = event.pageY - theDiv.offset().top;
theDivId = theDiv.index();
theDivHeight = theDiv.height();
theDivHalf = theDivHeight/2;
move = true;
theDiv.attr("class","drag_module_maindash");
// 创建新元素 插入拖拽元素之前的位置(虚线框)
$("<div class='drag_module_dash'></div>").insertBefore(theDiv);
});
});
}
loopbox();
$(".drag_module_box").mousemove(function(event) {
console.log( 'mousemove' );
if (!move) return false;
lastPos.x = event.pageX - range.x;
lastPos.y = event.pageY - range.y;
lastPos.y1 = lastPos.y + theDivHeight;
// 拖拽元素随鼠标移动
theDiv.css({left: lastPos.x + 'px',top: lastPos.y + 'px'});
// 拖拽元素随鼠标移动 查找插入目标元素
var $main = $('.drag_module_main'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
tempDiv = $(".drag_module_dash"); //获得临时 虚线框的对象
$main.each(function () {
tarDiv = $(this);
tarPos.x = tarDiv.offset().left;
tarPos.y = tarDiv.offset().top;
tarPos.y1 = tarPos.y + tarDiv.height()/2;
tarFirst = $main.eq(0); // 获得第一个元素
tarFirstY = tarFirst.offset().top + theDivHalf ; // 第一个元素对象的中心纵坐标
//拖拽对象 移动到第一个位置
if (lastPos.y <= tarFirstY) {
tempDiv.insertBefore(tarFirst);
}
//判断要插入目标元素的 坐标后， 直接插入
if (lastPos.y >= tarPos.y - theDivHalf && lastPos.y1 >= tarPos.y1 ) {
tempDiv.insertAfter(tarDiv);
}
});
}).mouseup(function(event) {
console.log( 'mouseup' );
if(theDiv==null) return false;
theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
theDiv.attr("class", "drag_module_main"); //恢复对象的初始样式
$('.drag_module_dash').remove(); // 删除新建的虚线div
move=false;
});
$("#drag_module_insert").click(function(){
$("#drag_module_box1").html($("#drag_module_box1").html()+$("#drag_module_box2").html());
loopbox();
});
$("#drag_module_seque").click(function(){
$(".drag_module_box").find(".drag_module_main").each(function(){
console.log($(this).attr('id'));
});
});
});
</script>
</head>
<body>
<div class="drag_module_box" id="drag_module_box1">
<div class="drag_module_main" id="main1">div1</div>
<div class="drag_module_main" id="main2">div2</div>
<div class="drag_module_main" id="main3">div3</div>
<div class="drag_module_main" id="main4">div4</div>
<div class="drag_module_main" id="main5">div5</div>
<div class="drag_module_main" id="main6">div6</div>
</div>
<div class="drag_module_box1" id="drag_module_box2">
<div class="drag_module_main" id="main_first">div7</div>
</div>
<input type="button" value="新建" id="drag_module_insert"/>
<input type="button" value="确定" id="drag_module_seque"/>
</body>
</html>
\ No newline at end of file
T1(1).html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.Center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.i1 {
background: url(./img/空心.png) no-repeat;
width: 53px;
height: 58px;
z-index: 11;
}
.i1:hover {
transform: translate(-50%, -50%) scale(1.2);
-webkit-transform: translate(-50%, -50%) scale(1.2);
-moz-transform: translate(-50%, -50%) scale(1.2);
-o-transform: translate(-50%, -50%) scale(1.2);
-ms-transform: translate(-50%, -50%) scale(1.2);
}
.i2 {
background: url(./img/归墟.png) no-repeat;
width: 243px;
height: 242px;
z-index: 10;
transform: translate(-50%, -50%) rotate(0deg) scale(1.0);
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.i2:hover {
transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
-webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
-moz-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
-o-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
-ms-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
}
.i3 {
background: url(./img/盘轨1.png) no-repeat;
width: 360px;
height: 360px;
}
.Roller {
transition: all .8s linear;
transform: translate(-50%, 0) rotate(0deg);
position: absolute;
left: 50%;
top: 25px;
width: 159px;
height: 73px;
background-color: cornflowerblue;
transform-origin: 80px 135px;
display: block;
opacity: 0;
}
.Rotater {
position: absolute;
left: 50%;
top: 22px;
width: 100px;
height: 50px;
background-color: cornflowerblue;
opacity: 0;
transform-origin: 50px 160px;
display: block;
z-index: 11;
}
</style>
</head>
<body style="background: #404040">
<div class="i3 Center">
<div class="i1 Center"></div>
<div class="i2 Center"></div>
<div class="Roller" style="background: url('./img/图片项1.png')"></div>
<div class="Roller" style="background: url('./img/纯色项1.png')"></div>
<div class="Roller" style="background: url('./img/圆角项1.png')"></div>
<div class="Roller" style="background: url('./img/视相1.png')"></div>
<div class="Roller" style="background: url('./img/文相1.png')"></div>
<div class="Roller" style="background: url('./img/音相1.png')"></div>
<div class="Rotater r1" style="transform: translate(-50%,0) rotate(20deg)"></div>
<div class="Rotater r1" style="transform: translate(-50%,0) rotate(60deg)"></div>
<div class="Rotater r1" style="transform:translate(-50%,0) rotate(100deg)"></div>
<div class="Rotater" style="transform:translate(-50%,0) rotate(140deg)"></div>
<div class="Rotater" style="transform:translate(-50%,0) rotate(180deg)"></div>
<div class="Rotater" style="transform:translate(-50%,0) rotate(220deg)"></div>
<div class="Rotater r2" style="transform:translate(-50%,0) rotate(260deg)"></div>
<div class="Rotater r2" style="transform:translate(-50%,0) rotate(300deg)"></div>
<div class="Rotater r2" style="transform:translate(-50%,0) rotate(340deg)"></div>
</div>
<script>
const Roller = document.getElementsByClassName('Roller')
//背景三个选项
const r1 = document.getElementsByClassName('r1')
const r2 = document.getElementsByClassName('r2')
for (let i = 0; i < r1.length++; i++) {
r1[i].onmouseover = () => {
Roller[0].style.top = '-44px';
Roller[0].style.transform = 'translate(-50%, 0) rotate(380deg)';
Roller[0].style.transformOrigin = '80px 224px';
Roller[0].style.opacity = '1';
Roller[1].style.top = '-44px';
Roller[1].style.transform = 'translate(-50%, 0) rotate(420deg)';
Roller[1].style.transformOrigin = '80px 224px';
Roller[1].style.opacity = '1'
Roller[2].style.top = '-44px';
Roller[2].style.transform = 'translate(-50%, 0) rotate(460deg)';
Roller[2].style.transformOrigin = '80px 224px';
Roller[2].style.opacity = '1'
}
r1[i].onmouseleave = () => {
Roller[0].style.top = '25px';
Roller[0].style.transform = 'translate(-50%, 0) rotate(0deg)';
Roller[0].style.transformOrigin = '80px 205px';
Roller[0].style.opacity = '0'
Roller[1].style.top = '25px';
Roller[1].style.transform = 'translate(-50%, 0) rotate(0deg)'
Roller[1].style.transformOrigin = '50px 205px'
Roller[1].style.opacity = '0'
Roller[2].style.top = '25px';
Roller[2].style.transform = 'translate(-50%, 0) rotate(0deg)';
Roller[2].style.transformOrigin = '50px 205px';
Roller[2].style.opacity = '0'
}
}
//相型三个选项
for (let i = 0; i < r2.length++; i++) {
r2[i].onmouseover = () => {
Roller[3].style.top = '-44px';
Roller[3].style.transform = 'translate(-50%, 0) rotate(260deg)';
Roller[3].style.transformOrigin = '80px 224px';
Roller[3].style.opacity = '1';
Roller[4].style.top = '-44px';
Roller[4].style.transform = 'translate(-50%, 0) rotate(300deg)';
Roller[4].style.transformOrigin = '80px 224px';
Roller[4].style.opacity = '1';
Roller[5].style.top = '-44px';
Roller[5].style.transform = 'translate(-50%, 0) rotate(340deg)';
Roller[5].style.transformOrigin = '80px 224px';
Roller[5].style.opacity = '1';
}
r2[i].onmouseleave = () => {
Roller[3].style.top = '25px';
Roller[3].style.transform = 'translate(-50%, 0) rotate(0deg)';
Roller[3].style.transformOrigin = '80px 205px';
Roller[3].style.opacity = '0';
Roller[4].style.top = '25px';
Roller[4].style.transform = 'translate(-50%, 0) rotate(0deg)'
Roller[4].style.transformOrigin = '80px 205px'
Roller[4].style.opacity = '0';
Roller[5].style.top = '25px';
Roller[5].style.transform = 'translate(-50%, 0) rotate(0deg)';
Roller[5].style.transformOrigin = '80px 205px';
Roller[5].style.opacity = '0';
}
}
</script>
</body>
</html>
assets/airplay.svg 0 → 100644
<?xml version="1.0" ?><svg viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg"><path d="M288 90v96c0 20-16 36-36 36h-10c-16 0-16-24 0-24h10c7 0 12-5 12-12V90c0-7-5-12-12-12H36c-7 0-12 5-12 12v96c0 7 5 12 12 12h10c16 0 16 24 0 24H36c-20 0-36-16-36-36V90c0-20 16-36 36-36h216c20 0 36 16 36 36zm-120 62l48 68c14 20 1 38-20 38H92c-21 0-34-18-20-38l48-68c13-18 35-18 48 0z"/></svg>
\ No newline at end of file
assets/camera.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z"></path>
</svg>
\ No newline at end of file
assets/comment-off.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M27.090 0.131h-22.731c-2.354 0-4.262 1.839-4.262 4.109v16.401c0 2.269 1.908 4.109 4.262 4.109h4.262v-2.706h8.469l-8.853 8.135 1.579 1.451 7.487-6.88h9.787c2.353 0 4.262-1.84 4.262-4.109v-16.401c0-2.27-1.909-4.109-4.262-4.109v0zM28.511 19.304c0 1.512-1.272 2.738-2.841 2.738h-8.425l-0.076-0.070-0.076 0.070h-11.311c-1.569 0-2.841-1.226-2.841-2.738v-13.696c0-1.513 1.272-2.739 2.841-2.739h19.889c1.569 0 2.841-0.142 2.841 1.37v15.064z"></path>
</svg>
\ No newline at end of file
assets/comment.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M27.128 0.38h-22.553c-2.336 0-4.229 1.825-4.229 4.076v16.273c0 2.251 1.893 4.076 4.229 4.076h4.229v-2.685h8.403l-8.784 8.072 1.566 1.44 7.429-6.827h9.71c2.335 0 4.229-1.825 4.229-4.076v-16.273c0-2.252-1.894-4.076-4.229-4.076zM28.538 19.403c0 1.5-1.262 2.717-2.819 2.717h-8.36l-0.076-0.070-0.076 0.070h-11.223c-1.557 0-2.819-1.217-2.819-2.717v-13.589c0-1.501 1.262-2.718 2.819-2.718h19.734c1.557 0 2.819-0.141 2.819 1.359v14.947zM9.206 10.557c-1.222 0-2.215 0.911-2.215 2.036s0.992 2.035 2.215 2.035c1.224 0 2.216-0.911 2.216-2.035s-0.992-2.036-2.216-2.036zM22.496 10.557c-1.224 0-2.215 0.911-2.215 2.036s0.991 2.035 2.215 2.035c1.224 0 2.215-0.911 2.215-2.035s-0.991-2.036-2.215-2.036zM15.852 10.557c-1.224 0-2.215 0.911-2.215 2.036s0.991 2.035 2.215 2.035c1.222 0 2.215-0.911 2.215-2.035s-0.992-2.036-2.215-2.036z"></path>
</svg>
\ No newline at end of file
assets/full-web.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 33">
<path d="M24.965 24.38h-18.132c-1.366 0-2.478-1.113-2.478-2.478v-11.806c0-1.364 1.111-2.478 2.478-2.478h18.132c1.366 0 2.478 1.113 2.478 2.478v11.806c0 1.364-1.11 2.478-2.478 2.478zM6.833 10.097v11.806h18.134l-0.002-11.806h-18.132zM2.478 28.928h5.952c0.684 0 1.238-0.554 1.238-1.239 0-0.684-0.554-1.238-1.238-1.238h-5.952v-5.802c0-0.684-0.554-1.239-1.238-1.239s-1.239 0.556-1.239 1.239v5.802c0 1.365 1.111 2.478 2.478 2.478zM30.761 19.412c-0.684 0-1.238 0.554-1.238 1.238v5.801h-5.951c-0.686 0-1.239 0.554-1.239 1.238 0 0.686 0.554 1.239 1.239 1.239h5.951c1.366 0 2.478-1.111 2.478-2.478v-5.801c0-0.683-0.554-1.238-1.239-1.238zM0 5.55v5.802c0 0.683 0.554 1.238 1.238 1.238s1.238-0.555 1.238-1.238v-5.802h5.952c0.684 0 1.238-0.554 1.238-1.238s-0.554-1.238-1.238-1.238h-5.951c-1.366-0.001-2.478 1.111-2.478 2.476zM32 11.35v-5.801c0-1.365-1.11-2.478-2.478-2.478h-5.951c-0.686 0-1.239 0.554-1.239 1.238s0.554 1.238 1.239 1.238h5.951v5.801c0 0.683 0.554 1.237 1.238 1.237 0.686 0.002 1.239-0.553 1.239-1.236z"></path>
</svg>
\ No newline at end of file
assets/full.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 33">
<path d="M6.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v4h4c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333zM30.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h4v-4c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM30.667 12c-0.8 0-1.333-0.533-1.333-1.333v-4h-4c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM1.333 12c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333h-4v4c0 0.8-0.533 1.333-1.333 1.333z"></path>
</svg>
\ No newline at end of file
assets/loading.svg 0 → 100644
<svg height="100%" version="1.1" viewBox="0 0 22 22">
<svg x="7" y="1">
<circle class="diplayer-loading-dot diplayer-loading-dot-0" cx="4" cy="4" r="2"></circle>
</svg>
<svg x="11" y="3">
<circle class="diplayer-loading-dot diplayer-loading-dot-1" cx="4" cy="4" r="2"></circle>
</svg>
<svg x="13" y="7">
<circle class="diplayer-loading-dot diplayer-loading-dot-2" cx="4" cy="4" r="2"></circle>
</svg>
<svg x="11" y="11">
<circle class="diplayer-loading-dot diplayer-loading-dot-3" cx="4" cy="4" r="2"></circle>
</svg>
<svg x="7" y="13">
<circle class="diplayer-loading-dot diplayer-loading-dot-4" cx="4" cy="4" r="2"></circle>
</svg>
<svg x="3" y="11">
<circle class="diplayer-loading-dot diplayer-loading-dot-5" cx="4" cy="4" r="2"></circle>
</svg>
<svg x="1" y="7">
<circle class="diplayer-loading-dot diplayer-loading-dot-6" cx="4" cy="4" r="2"></circle>
</svg>
<svg x="3" y="3">
<circle class="diplayer-loading-dot diplayer-loading-dot-7" cx="4" cy="4" r="2"></circle>
</svg>
</svg>
\ No newline at end of file
assets/pallette.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M19.357 2.88c1.749 0 3.366 0.316 4.851 0.946 1.485 0.632 2.768 1.474 3.845 2.533s1.922 2.279 2.532 3.661c0.611 1.383 0.915 2.829 0.915 4.334 0 1.425-0.304 2.847-0.915 4.271-0.611 1.425-1.587 2.767-2.928 4.028-0.855 0.813-1.811 1.607-2.869 2.38s-2.136 1.465-3.233 2.075c-1.099 0.61-2.198 1.098-3.296 1.465-1.098 0.366-2.115 0.549-3.051 0.549-1.343 0-2.441-0.438-3.296-1.311-0.854-0.876-1.281-2.41-1.281-4.608 0-0.366 0.020-0.773 0.060-1.221s0.062-0.895 0.062-1.343c0-0.773-0.183-1.353-0.55-1.738-0.366-0.387-0.793-0.58-1.281-0.58-0.652 0-1.21 0.295-1.678 0.886s-0.926 1.23-1.373 1.921c-0.447 0.693-0.905 1.334-1.372 1.923s-1.028 0.886-1.679 0.886c-0.529 0-1.048-0.427-1.556-1.282s-0.763-2.259-0.763-4.212c0-2.197 0.529-4.241 1.587-6.133s2.462-3.529 4.21-4.912c1.75-1.383 3.762-2.471 6.041-3.264 2.277-0.796 4.617-1.212 7.018-1.253zM7.334 15.817c0.569 0 1.047-0.204 1.434-0.611s0.579-0.875 0.579-1.404c0-0.569-0.193-1.047-0.579-1.434s-0.864-0.579-1.434-0.579c-0.529 0-0.987 0.193-1.373 0.579s-0.58 0.864-0.58 1.434c0 0.53 0.194 0.998 0.58 1.404 0.388 0.407 0.845 0.611 1.373 0.611zM12.216 11.79c0.691 0 1.292-0.254 1.8-0.763s0.762-1.107 0.762-1.8c0-0.732-0.255-1.343-0.762-1.831-0.509-0.489-1.109-0.732-1.8-0.732-0.732 0-1.342 0.244-1.831 0.732-0.488 0.488-0.732 1.098-0.732 1.831 0 0.693 0.244 1.292 0.732 1.8s1.099 0.763 1.831 0.763zM16.366 25.947c0.692 0 1.282-0.214 1.77-0.64s0.732-0.987 0.732-1.678-0.244-1.261-0.732-1.709c-0.489-0.448-1.078-0.671-1.77-0.671-0.65 0-1.21 0.223-1.678 0.671s-0.702 1.018-0.702 1.709c0 0.692 0.234 1.25 0.702 1.678s1.027 0.64 1.678 0.64zM19.113 9.592c0.651 0 1.129-0.203 1.433-0.611 0.305-0.406 0.459-0.874 0.459-1.404 0-0.488-0.154-0.947-0.459-1.373-0.304-0.427-0.782-0.641-1.433-0.641-0.529 0-1.008 0.193-1.434 0.58s-0.64 0.865-0.64 1.434c0 0.571 0.213 1.049 0.64 1.434 0.427 0.389 0.905 0.581 1.434 0.581zM24.848 12.826c0.57 0 1.067-0.213 1.495-0.64 0.427-0.427 0.64-0.947 0.64-1.556 0-0.57-0.214-1.068-0.64-1.495-0.428-0.427-0.927-0.64-1.495-0.64-0.611 0-1.129 0.213-1.555 0.64-0.428 0.427-0.642 0.926-0.642 1.495 0 0.611 0.213 1.129 0.642 1.556s0.947 0.64 1.555 0.64z"></path>
</svg>
\ No newline at end of file
assets/pause.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 17 32">
<path d="M14.080 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048zM2.88 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048z"></path>
</svg>
\ No newline at end of file
assets/play.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 32">
<path d="M15.552 15.168q0.448 0.32 0.448 0.832 0 0.448-0.448 0.768l-13.696 8.512q-0.768 0.512-1.312 0.192t-0.544-1.28v-16.448q0-0.96 0.544-1.28t1.312 0.192z"></path>
</svg>
\ No newline at end of file
assets/right.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z"></path>
</svg>
\ No newline at end of file
assets/send.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M13.725 30l3.9-5.325-3.9-1.125v6.45zM0 17.5l11.050 3.35 13.6-11.55-10.55 12.425 11.8 3.65 6.1-23.375-32 15.5z"></path>
</svg>
\ No newline at end of file
assets/setting.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 28">
<path d="M28.633 17.104c0.035 0.21 0.026 0.463-0.026 0.76s-0.14 0.598-0.262 0.904c-0.122 0.306-0.271 0.581-0.445 0.825s-0.367 0.419-0.576 0.524c-0.209 0.105-0.393 0.157-0.55 0.157s-0.332-0.035-0.524-0.105c-0.175-0.052-0.393-0.1-0.655-0.144s-0.528-0.052-0.799-0.026c-0.271 0.026-0.541 0.083-0.812 0.17s-0.502 0.236-0.694 0.445c-0.419 0.437-0.664 0.934-0.734 1.493s0.009 1.092 0.236 1.598c0.175 0.349 0.148 0.699-0.079 1.048-0.105 0.14-0.271 0.284-0.498 0.432s-0.476 0.284-0.747 0.406-0.555 0.218-0.851 0.288c-0.297 0.070-0.559 0.105-0.786 0.105-0.157 0-0.306-0.061-0.445-0.183s-0.236-0.253-0.288-0.393h-0.026c-0.192-0.541-0.52-1.009-0.982-1.402s-1-0.589-1.611-0.589c-0.594 0-1.131 0.197-1.611 0.589s-0.816 0.851-1.009 1.375c-0.087 0.21-0.218 0.362-0.393 0.458s-0.367 0.144-0.576 0.144c-0.244 0-0.52-0.044-0.825-0.131s-0.611-0.197-0.917-0.327c-0.306-0.131-0.581-0.284-0.825-0.458s-0.428-0.349-0.55-0.524c-0.087-0.122-0.135-0.266-0.144-0.432s0.057-0.397 0.197-0.694c0.192-0.402 0.266-0.86 0.223-1.375s-0.266-0.991-0.668-1.428c-0.244-0.262-0.541-0.432-0.891-0.511s-0.681-0.109-0.995-0.092c-0.367 0.017-0.742 0.087-1.127 0.21-0.244 0.070-0.489 0.052-0.734-0.052-0.192-0.070-0.371-0.231-0.537-0.485s-0.314-0.533-0.445-0.838c-0.131-0.306-0.231-0.62-0.301-0.943s-0.087-0.59-0.052-0.799c0.052-0.384 0.227-0.629 0.524-0.734 0.524-0.21 0.995-0.555 1.415-1.035s0.629-1.017 0.629-1.611c0-0.611-0.21-1.144-0.629-1.598s-0.891-0.786-1.415-0.996c-0.157-0.052-0.288-0.179-0.393-0.38s-0.157-0.406-0.157-0.616c0-0.227 0.035-0.48 0.105-0.76s0.162-0.55 0.275-0.812 0.244-0.502 0.393-0.72c0.148-0.218 0.31-0.38 0.485-0.485 0.14-0.087 0.275-0.122 0.406-0.105s0.275 0.052 0.432 0.105c0.524 0.21 1.070 0.275 1.637 0.197s1.070-0.327 1.506-0.747c0.21-0.209 0.362-0.467 0.458-0.773s0.157-0.607 0.183-0.904c0.026-0.297 0.026-0.568 0-0.812s-0.048-0.419-0.065-0.524c-0.035-0.105-0.066-0.227-0.092-0.367s-0.013-0.262 0.039-0.367c0.105-0.244 0.293-0.458 0.563-0.642s0.563-0.336 0.878-0.458c0.314-0.122 0.62-0.214 0.917-0.275s0.533-0.092 0.707-0.092c0.227 0 0.406 0.074 0.537 0.223s0.223 0.301 0.275 0.458c0.192 0.471 0.507 0.886 0.943 1.244s0.952 0.537 1.546 0.537c0.611 0 1.153-0.17 1.624-0.511s0.803-0.773 0.996-1.297c0.070-0.14 0.179-0.284 0.327-0.432s0.301-0.223 0.458-0.223c0.244 0 0.511 0.035 0.799 0.105s0.572 0.166 0.851 0.288c0.279 0.122 0.537 0.279 0.773 0.472s0.423 0.402 0.563 0.629c0.087 0.14 0.113 0.293 0.079 0.458s-0.070 0.284-0.105 0.354c-0.227 0.506-0.297 1.039-0.21 1.598s0.341 1.048 0.76 1.467c0.419 0.419 0.934 0.651 1.546 0.694s1.179-0.057 1.703-0.301c0.14-0.087 0.31-0.122 0.511-0.105s0.371 0.096 0.511 0.236c0.262 0.244 0.493 0.616 0.694 1.113s0.336 1 0.406 1.506c0.035 0.297-0.013 0.528-0.144 0.694s-0.266 0.275-0.406 0.327c-0.542 0.192-1.004 0.528-1.388 1.009s-0.576 1.026-0.576 1.637c0 0.594 0.162 1.113 0.485 1.559s0.747 0.764 1.27 0.956c0.122 0.070 0.227 0.14 0.314 0.21 0.192 0.157 0.323 0.358 0.393 0.602v0zM16.451 19.462c0.786 0 1.528-0.149 2.227-0.445s1.305-0.707 1.821-1.231c0.515-0.524 0.921-1.131 1.218-1.821s0.445-1.428 0.445-2.214c0-0.786-0.148-1.524-0.445-2.214s-0.703-1.292-1.218-1.808c-0.515-0.515-1.122-0.921-1.821-1.218s-1.441-0.445-2.227-0.445c-0.786 0-1.524 0.148-2.214 0.445s-1.292 0.703-1.808 1.218c-0.515 0.515-0.921 1.118-1.218 1.808s-0.445 1.428-0.445 2.214c0 0.786 0.149 1.524 0.445 2.214s0.703 1.297 1.218 1.821c0.515 0.524 1.118 0.934 1.808 1.231s1.428 0.445 2.214 0.445v0z"></path>
</svg>
\ No newline at end of file
assets/subtitle.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M26.667 5.333h-21.333c-0 0-0.001 0-0.001 0-1.472 0-2.666 1.194-2.666 2.666 0 0 0 0.001 0 0.001v-0 16c0 0 0 0.001 0 0.001 0 1.472 1.194 2.666 2.666 2.666 0 0 0.001 0 0.001 0h21.333c0 0 0.001 0 0.001 0 1.472 0 2.666-1.194 2.666-2.666 0-0 0-0.001 0-0.001v0-16c0-0 0-0.001 0-0.001 0-1.472-1.194-2.666-2.666-2.666-0 0-0.001 0-0.001 0h0zM5.333 16h5.333v2.667h-5.333v-2.667zM18.667 24h-13.333v-2.667h13.333v2.667zM26.667 24h-5.333v-2.667h5.333v2.667zM26.667 18.667h-13.333v-2.667h13.333v2.667z"></path>
</svg>
\ No newline at end of file
assets/volume-down.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 32">
<path d="M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z"></path>
</svg>
\ No newline at end of file
assets/volume-off.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 32">
<path d="M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z"></path>
</svg>
\ No newline at end of file
assets/volume-up.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 32">
<path d="M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528zM25.152 16q0 2.72-1.536 5.056t-4 3.36q-0.256 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.704 0.672-1.056 1.024-0.512 1.376-0.8 1.312-0.96 2.048-2.4t0.736-3.104-0.736-3.104-2.048-2.4q-0.352-0.288-1.376-0.8-0.672-0.352-0.672-1.056 0-0.448 0.32-0.8t0.8-0.352q0.224 0 0.48 0.096 2.496 1.056 4 3.36t1.536 5.056z"></path>
</svg>
\ No newline at end of file
css/iconfont.css 0 → 100644
@font-face {
font-family:"iconfont";
src: url('//at.alicdn.com/t/font_2407178_4brpf48p065.eot?t=1615200631196');
/* IE9 */
src: url('//at.alicdn.com/t/font_2407178_4brpf48p065.eot?t=1615200631196#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQMAAsAAAAACagAAAPAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqHCIVkATYCJAMMCwgABCAFhG0HPhsyCFGU7UmF7MsDbg6cB8tQUIzQqKLi3p3HchMgHGPIV1WDWrxdrrEWD19jrPd3FxFNqt2nkxgSkUQkZJdOJXSGEmhkubt8zfZ/LnPEwub5Y3XvFAxQoS7lt5y+NB0pdnrCT29CbsJtE9vy1azBz7KYNXF4s4mz6qztFuKntiqanxYC1TZX3P7tIRL6rgGifJsdHEv+aGrOA3qwV4q8r+ppRFICDSiidaOJbsK4RTyX7kLlMTdeJlBr0Fhl4/D8CtoKelYg9kLfhnbiUjrYodpa2XBjEVc4sup0TPgCLs3fxy/LaJNUZPRVm7sHHmw+6d8RnzDIcIZw0P4CGN1GxhRQiJ3G0Laawyljqm0y1buxkgRD2lcWwwD1EivZPzySICpRUz2hjJUTn3ShDuYz0N5rzZM7vRKjIGZA7Dt1i3C0nw4iCZcrEYrl0/GsfqmC4vHdZ+pLYWnfjfn8Ggd67L+EJb3M6jOMMhiVW9GVuef8vHrZ67yE0YrIdgaJY5zq0ey4qDxCYju4hvs6HN14dc0jDnQtPhczz+duLL3d/h7GGeBTZZGH7l3IGcchZ3w6qnuHYWKVxx5C655qoDokTH+tYzZm9qAAyvXPYUyegDve1YUqQOV1Lvc9cHLEeOEKvuOIAgGBAZ5Ay+ehTLr9nLu3BzaZ//x38FoJKlBgfEB3k9lE6k/KpzlRCCqR9XT66cxULocoQMVTV/s4l6/jc1+YRyd6H/WtcHjG3dt/qlftk/7NP/MbjQlDAKIElNe78k9nkcgUReDGoQa8DqV5fK3AJN0Z3IRbPTNW3djcc59zrSivYEHsrAvUsOSfGoZBVnLwgsO3HWHrOFoQtHyH9izq/ytnAfw/S2zzv/yZ+aud5J3b4Ngo9ZvG/Plt+Vj2ziT+VwDXDqol0Jo/lgY5rix11J3LXC3U62r2RPO1OdUuo/5DY61+t/d22FclVOsIkFQZgKzaEKFQpqBCnSWoVG0Zak06ur1OG1ETpQYT3gsIzT4gafQKWbNvQqH8QIVOf1CpOWpQayuED6wzEmEXELKVPHQeMHQ5M9yrXdt9QX6Z2BLrjPCGpAizuPD48uoRZST7uKS49ZeqBo1wiofF6yhJGHPhiFydBqr5euadbfqmqcspdK0TxKaIBzkeoJCLZYzaXHUrv3+B+EoJm3QMupC9QUQh3D9amJojCEemDDXouRxeuOVbUsqUpxmCpdAhBEjCSgzlzcdFiEtNBVsUcmszMpnBmqbHt6Sv7x6oRd+SI0WOoma/5MegtMNF2zkBAA==') format('woff2'), url('//at.alicdn.com/t/font_2407178_4brpf48p065.woff?t=1615200631196') format('woff'), url('//at.alicdn.com/t/font_2407178_4brpf48p065.ttf?t=1615200631196') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_2407178_4brpf48p065.svg?t=1615200631196#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size: 30px;
color:#9850ff;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iDrag:before {
content:"\e694";
left: -2px;
top:-4px;
position: absolute;
}
.icon-tuozhuai:before {
content:"\e609";
}
\ No newline at end of file
css/menu.css 0 → 100644
#wrapper {
display: none;
position: absolute;
z-index: 100;
}
.Center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.i1 {
background: url(../img/空心.png) no-repeat;
width: 53px;
height: 58px;
z-index: 111;
}
.i1:hover {
transition: all .8s;
transform: translate(-50%, -50%) scale(1.2);
-webkit-transform: translate(-50%, -50%) scale(1.2);
-moz-transform: translate(-50%, -50%) scale(1.2);
-o-transform: translate(-50%, -50%) scale(1.2);
-ms-transform: translate(-50%, -50%) scale(1.2);
}
.i2 {
background: url(../img/归墟.png) no-repeat;
width: 243px;
height: 242px;
z-index: 110;
transform: translate(-50%, -50%) rotate(0deg) scale(1.0);
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.i2:hover {
transition: all .8s;
transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
-webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
-moz-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
-o-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
-ms-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
}
.i3 {
background: url(../img/盘轨1.png) no-repeat;
width: 360px;
height: 360px;
}
.Roller{
transition: All .7s linear;
-webkit-transition: All .7s linear;
-moz-transition: All .7s linear;
transform: translate(-50%, 0) rotate(0deg);
position: absolute;
left: 50%;
top: 25px;
width: 159px;
height: 73px;
transform-origin: 80px 135px;
display: block;
opacity: 0;
z-index: 10;
}
.Roller #canvasId{
transform: translate(-138px, -6px) rotate(0deg);
position: absolute;
width:450;
height:450;
opacity: 0;
}
.Roller:hover{
filter:hue-rotate(70deg);
}
.Rotater {
position: absolute;
left: 50%;
top: 22px;
width: 100px;
height: 50px;
opacity: 1;
transform-origin: 50px 160px;
display: block;
z-index: 111;
}
#Radius:hover #canvasId{
opacity: 1;
}
div #Layer{
opacity: 0;
}
div #Layer:hover{
opacity: 1;
}
/*幕的进度条样式*/
.sliderRage{
border-radius: 10px;
transition: all .1s linear;
-webkit-appearance: none;
appearance: none;
width: 100px;/*滑动条的高低*/
height:11px;/*滑动条的粗细*/
position: absolute;
top: 0;
right: 2px;/*滑动条距离左边元素的位置*/
}
.sliderRage:focus {
outline: none;
}
.sliderRage::-webkit-slider-thumb {
-webkit-appearance: none;
height: 16px; /*滑动圆球的大小*/
width: 16px;/*滑动圆球的大小*/
margin-top: -4px;/* 设置滑动圆球的左右位置*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.2em rgba(110, 190, 255, 0.5); /*设置边框*/
box-shadow: 0 .09em .09em #baeffa; /*添加底部阴影*/
transition: all .1s linear;
}
.sliderRage::-webkit-slider-runnable-track {
height: 11px;/*滑动条的粗细 */
width: 100px;/*滑动条的高低*/
border-radius: 10px; /*将轨道设为圆角的*/
border: solid 0.1em #0d1112;
box-shadow: 0 0 0 #0d1112, 0 0 0 #0d1112;
transition: all .1s linear;
}
.sliderRage::-webkit-slider-thumb:hover{
border: solid 0.4em rgba(29, 116, 187, 0.747);
box-shadow: 0 .2em .3em #baeffa; /*添加底部阴影*/
}
.Rotater span{
font-family: 华文新魏, sans-serif;
font-size: 15px;
position: absolute;
bottom: -13px;
transform: translate(-50%,0) rotate(180deg);
left: 50%;
}
.sliderRage:focus {
outline: none;
}
/* 幕的选择对勾样式-动画设置 */
@-moz-keyframes dhbottomcheck {
0% {
height:0;
}
100% {
height:20px;
}
}@-webkit-keyframes dhbottomcheck {
0% {
height:0;
}
100% {
height:20px;
}
}@keyframes dhbottomcheck {
0% {
height:0;
}
100% {
height:20px;
}
}
@keyframes dhtopcheck {
0% {
height:0;
}
50% {
height:0;
}
100% {
height:50px;
}
}
@-webkit-keyframes dhtopcheck {
0% {
height:0;
}
50% {
height:0;
}
100% {
height:50px;
}
}
@-moz-keyframes dhtopcheck {
0% {
height:0;
}
50% {
height:0;
}
100% {
height:50px;
}
}
.fullCheck {
display:none;
height:20px;
width:20px;
}
.curtainCheck{
display:none;
height:20px;
width:20px;
}
.check-box1 {
height:50px;
width:50px;
left: 20px;
background-color:transparent;
position:relative;
display:inline-block;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-transition:border-color ease 0.2s;
-o-transition:border-color ease 0.2s;
-webkit-transition:border-color ease 0.2s;
transition:border-color ease 0.2s;
cursor:pointer;
transform: rotate(180deg);
}
.check-box1::before,.check-box1::after {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
height:0;
width:10px;
background-color:#0d09e7;
display:inline-block;
-moz-transform-origin:left top;
-ms-transform-origin:left top;
-o-transform-origin:left top;
-webkit-transform-origin:left top;
transform-origin:left top;
border-radius:5px;
content:' ';
-webkit-transition:opacity ease .5;
-moz-transition:opacity ease .5;
transition:opacity ease .5;
}
.check-box1::before {
top:52px;
left:21px;
-moz-transform:rotate(-135deg);
-ms-transform:rotate(-135deg);
-o-transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
transform:rotate(-135deg);
}
.check-box1::after {
top:35px;
left:3px;
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
input[class=curtainCheck]:checked + .check-box1,.check-box1.checked {
border-color:#0d09e7;
}
input[class=curtainCheck]:checked + .check-box1::after,.check-box1.checked::after {
height:23px;
-moz-animation:dhbottomcheck 0.2s ease 0s forwards;
-o-animation:dhbottomcheck 0.2s ease 0s forwards;
-webkit-animation:dhbottomcheck 0.2s ease 0s forwards;
animation:dhbottomcheck 0.2s ease 0s forwards;
}
input[class=curtainCheck]:checked + .check-box1::before,.check-box1.checked::before {
height:60px;
-moz-animation:dhtopcheck 0.4s ease 0s forwards;
-o-animation:dhtopcheck 0.4s ease 0s forwards;
-webkit-animation:dhtopcheck 0.4s ease 0s forwards;
animation:dhtopcheck 0.4s ease 0s forwards;
}
/* 全屏对勾的动画 */
/* 幕的选择对勾样式-动画设置 */
@-moz-keyframes dhbottomcheck {
0% {
height:0;
}
100% {
height:20px;
}
}@-webkit-keyframes dhbottomcheck {
0% {
height:0;
}
100% {
height:20px;
}
}@keyframes dhbottomcheck {
0% {
height:0;
}
100% {
height:20px;
}
}
@keyframes dhtopcheck {
0% {
height:0;
}
50% {
height:0;
}
100% {
height:50px;
}
}
@-webkit-keyframes dhtopcheck {
0% {
height:0;
}
50% {
height:0;
}
100% {
height:50px;
}
}
@-moz-keyframes dhtopcheck {
0% {
height:0;
}
50% {
height:0;
}
100% {
height:50px;
}
}
.check-box {
height:50px;
width:50px;
left: 50px;
background-color:transparent;
position:relative;
display:inline-block;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-transition:border-color ease 0.2s;
-o-transition:border-color ease 0.2s;
-webkit-transition:border-color ease 0.2s;
transition:border-color ease 0.2s;
cursor:pointer;
transform: rotate(180deg);
}
.check-box::before,.check-box::after {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
height:0;
width:10px;
background-color:#0d09e7;
display:inline-block;
-moz-transform-origin:left top;
-ms-transform-origin:left top;
-o-transform-origin:left top;
-webkit-transform-origin:left top;
transform-origin:left top;
border-radius:5px;
content:' ';
-webkit-transition:opacity ease .5;
-moz-transition:opacity ease .5;
transition:opacity ease .5;
}
.check-box::before {
top:52px;
left:21px;
-moz-transform:rotate(-135deg);
-ms-transform:rotate(-135deg);
-o-transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
transform:rotate(-135deg);
}
.check-box::after {
top:35px;
left:3px;
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
input[class=fullCheck]:checked + .check-box,.check-box.checked {
border-color:#0d09e7;
}
input[class=fullCheck]:checked + .check-box::after,.check-box.checked::after {
height:23px;
-moz-animation:dhbottomcheck 0.2s ease 0s forwards;
-o-animation:dhbottomcheck 0.2s ease 0s forwards;
-webkit-animation:dhbottomcheck 0.2s ease 0s forwards;
animation:dhbottomcheck 0.2s ease 0s forwards;
}
input[class=fullCheck]:checked + .check-box::before,.check-box.checked::before {
height:60px;
-moz-animation:dhtopcheck 0.4s ease 0s forwards;
-o-animation:dhtopcheck 0.4s ease 0s forwards;
-webkit-animation:dhtopcheck 0.4s ease 0s forwards;
animation:dhtopcheck 0.4s ease 0s forwards;
}
\ No newline at end of file
css/style.css 0 → 100644
html, body {
overflow: hidden;
background: #363B40;
user-select: none;
}
* {
padding: 0;
margin: 0;
border: 0;
}
/*拾色器*/
.picker {
display: inline-block;
width: 15px;
height: 15px;
cursor: pointer;
border-radius: 5px;
border: 2px #fff solid;
position: absolute;
top: 5px;
left: 70px;
}
/*文字大小*/
#opt1 {
position: relative;
}
span {
font-family: 华文新魏, sans-serif;
font-size: 17px;
}
.Div {
cursor: url(../img/手.png),auto;;
background: skyblue;
position: absolute;
text-align: center;
}
.DivSon {
float: left;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.textarea {
}
.menuDiv {
height: 35px;
line-height: 30px;
background: #ccc;
border-radius: 5px;
position: absolute;
top: -32px;
}
/*字体大小模块*/
.sliderDemo {
border-radius: 10px;
transition: all .1s linear;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-webkit-appearance: none;
-moz-transform: rotate(270deg);
-moz-appearance: none;
appearance: none;
width: 100px;/*滑动条的高低*/
height:11px;/*滑动条的粗细*/
position: absolute;
top: 0;
left: 58px;/*滑动条距离左边元素的位置*/
display: none;
}
.sliderDemo:focus {
outline: none;
}
/*滑块 兼容谷歌*/
.sliderDemo::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 16px; /*滑动圆球的大小*/
width: 16px;/*滑动圆球的大小*/
margin-top: -4.1px;/* 设置滑动圆球的左右位置*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.3em rgba(110, 190, 255, 0.5); /*设置边框*/
box-shadow: 0 .09em .09em #baeffa; /*添加底部阴影*/
transition: all .1s linear;
}
.sliderDemo::-webkit-slider-runnable-track {
-webkit-appearance: none;
appearance: none;
height: 11px;/*滑动条的粗细*/
border-radius: 10px; /*将轨道设为圆角的*/
border: solid 0.1em #0d1112;
box-shadow: 0 0 0 #0d1112, 0 0 0 #0d1112;
transition: all .1s linear;
}
.sliderDemo::-webkit-slider-thumb:hover {
-webkit-appearance: none;
appearance: none;
border: solid 0.4em rgba(29, 116, 187, 0.747);
box-shadow: 0 .2em .3em #baeffa; /*添加底部阴影*/
}
/*滑块 兼容火狐*/
.sliderDemo::-moz-range-thumb {
-webkit-appearance: none;
height: 19px;
width: 19px;
margin-top: -4.1px; /*使滑块超出轨道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.3em rgba(110, 190, 255, 0.5); /*设置边框*/
box-shadow: 0 .11em .11em #baeffa; /*添加底部阴影*/
transition: all .1s linear;
}
.sliderDemo::-moz-range-thumb:hover {
border: solid 0.5em rgba(110, 190, 255, 0.5);
box-shadow: 0 .3em .3em #baeffa; /*添加底部阴影*/
}
.sliderDemo::-moz-range-thumb:hover .sliderDemo {
box-shadow: 0 3px 3px #0d1112, 0 .3em .3em #0d1112;
}
.sliderDemo::-moz-range-track {
height: 15px;
border-radius: 10px; /*将轨道设为圆角的*/
border: solid 0.1em #0d1112;
box-shadow: 0 0 0 #0d1112, 0 0 0 #0d1112;
transition: all .1s linear;
}
.inputText {
width: 35px;
height: 20px;
border-radius: 5px;
outline: none;
}
/*UI 表单*/
.layui-form {
width: 75px;
position: absolute;
top: 100px;
left: 100px;
border-radius: 5px;
}
.layui-input {
height: 28px;
}
.layui-form input[type=checkbox], .layui-form input[type=radio], .layui-form select {
display: block;
}
select {
border-radius: 5px
}
/*文本域的滚动条*/
.textarea::-webkit-scrollbar {
width: 15px;
height: 15px;
}
.textarea::-webkit-scrollbar-thumb {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background-color: #c3c3c3;
}
.textarea::-webkit-scrollbar-track {
background-color: transparent;
}
.textarea {
scrollbar-color: pink #c3c3c3;
scrollbar-width: thin;
-ms-overflow-style: none;
}
/*滑块 兼容谷歌*/
.sliderD::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 16px; /*滑动圆球的大小*/
width: 16px;/*滑动圆球的大小*/
margin-top: -4.1px;/* 设置滑动圆球的左右位置*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.3em rgba(110, 190, 255, 0.5); /*设置边框*/
box-shadow: 0 .09em .09em #baeffa; /*添加底部阴影*/
transition: all .1s linear;
}
.sliderD::-webkit-slider-runnable-track {
-webkit-appearance: none;
appearance: none;
height: 11px;/*滑动条的粗细*/
border-radius: 10px; /*将轨道设为圆角的*/
border: solid 0.1em #0d1112;
box-shadow: 0 0 0 #0d1112, 0 0 0 #0d1112;
transition: all .1s linear;
}
.sliderD::-webkit-slider-thumb:hover {
border: solid 0.4em rgba(29, 116, 187, 0.747);
box-shadow: 0 .2em .3em #baeffa; /*添加底部阴影*/
}
/* .playerDemo{
margin:20px auto 10px auto
}
*/
.Voicer_Btn{
outline: none;
border: rgb(129, 114, 221);
border-width: 2px;
border-radius: 9px;
border-style: solid;
width: 70px;
height: 28px;
background-color: rgba(100, 148, 237, 0.315);
color: white;
font-size: 14px;
transition-duration: 1s;
}
.Voicer_Btn:hover{
border-radius: 16px;
/* border-width: 3px; */
background-color:rgb(129, 114, 221);
border: rgba(0, 0, 0, 0);;
}
.Voicer_Btn:active{
background-color: thistle;
}
\ No newline at end of file
css/timer.css 0 → 100644
/* .sidderbar {
position: fixed;
bottom: 0px;
right: 0;
width: 50px;
height: 286px;
text-align: center;
line-height: 50px;
background-color: #fff;
不解无知，不知无解。
animation: name duration timing-function delay iteration-count direction fill-mode;
} */
#timer{
width: 100%;
height: 286px;
position: fixed;
display: flex;
justify-content: flex-start;
/* background-color: blueviolet; */
background-image: url('../img/MinWid.png');
background-repeat: repeat-x;
background-position: bottom;
bottom:0px;
transition: 1.3s;
z-index: 9;
}
#timer:hover{
bottom:0px;
}
#timer_L{
width: 336px;
height: 286px;
background: url(../img/timer/御相枢L.png) no-repeat;
}
#timer_M{
width: 327px;
height: 286px;
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%,0%);
background-color:red;
background: url(../img/timer/御相枢EM.png) no-repeat;
}
#timer_R{
height: 286px;
width:216px;
position: absolute;
right: 0px;
background: url(../img/timer/御相枢R.png) no-repeat;
}
#timeScale{
width: 81px;
height: 101px;
position: absolute;
transform: translate(-50%, -24px);
user-select: contain;
left: 0px;
background: url(../img/timer/时标.png) no-repeat;
z-index: 3;
}
.times{
width:37px;
text-align: center;
margin-top: 69px;
/* transform: translateX(-50%); */
/* margin-left: 9px; */
font-size: 14px;
text-shadow: white 0 0 3px;
color: aliceblue;
display: inline-block;
box-sizing: border-box;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
user-select: none;
}
.times1{
width:60px;
text-align: center;
margin-top: 12px;
transform: translateX(-50%);
text-shadow: white 0 0 3px;
color: aliceblue;
display: inline-block;
box-sizing: border-box;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
user-select: none;
}
.times3{
width:120px;
text-align: center;
margin-top: 12px;
transform: translateX(-50%);
text-shadow: white 0 0 3px;
color: aliceblue;
display: inline-block;
box-sizing: border-box;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
user-select: none;
}
.Vessel{
width: 100%;
height: 269px;
position: absolute;
overflow-x:auto;
overflow-y:hidden;
bottom: 0px;
z-index: 1;
white-space: nowrap;
background-clip: padding-box;
user-select:none;
}
/* .Vessel:hover::-webkit-scrollbar-thumb{
background: #f9f9ff9c;
} */
.TimeLine{
width: auto;
/*background: url(../img/timer/Ruler3.png) repeat-x;
background-position-y: 56px; */
margin-top: 56px;
}
.Time1Line{
width: auto;
background: url(../img/timer/ruler.png) repeat-x;
/* background-position-y: 56px; */
margin-top: 56px;
}
.Time3Line{
width: auto;
background: url(../img/timer/Ruler3.png) repeat-x;
/* background-position-y: 56px; */
margin-top: 56px;
}
.TimeBox{
color: white;
position:absolute;
right: 20px;
top: 39px;
font-size: 23px;
text-shadow: white 0 0 3px;
}
.Pivot{
color: white;
text-shadow: white 0 0 3px;
margin: 3px 0px;
width: 100%;
height: 37px;
border: aliceblue solid 1px;
border-radius: 12px;
box-shadow: white 0 0 3px;
cursor: url(../img/手.png),auto;
transition:1s all;
}
.Pivot:hover{
box-shadow: white 0 0 19px;
}
.Pwrap{
/* margin-top: 39px; */
/* z-index: 10; */
transition: 1s all;
}
.Pwrap:hover{
/* padding-top: 37px; */
}
.Pivot div{
font-size: 23px;
width: 29px;
height: 29px;
border-radius: 23px;
box-shadow: #e08eff 0 0 3px;
border: #9ed2ff solid 1px;
text-align: center;
transform: translate(7px,3px);
}
.pWrapper{
width:100%;
height: 169px;
/* overflow-y:visible; */
overflow-y: auto;
overflow-x: hidden;
}
.PivotBox{
width: auto;
overflow-x:hidden;
white-space: nowrap;
background-clip: padding-box;
overflow: auto;
}
::selection { background:#330969b7; color: rgb(168, 223, 255); }
::-webkit-scrollbar {/*滚动条整体样式*/
height: 13px ;
width: 13px ;
scrollbar-track-color: #adb8ffe3;
overflow:hidden;
transition: 1s;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/
height: 6px !important;
-webkit-box-shadow: inset 0 0 5px rgba(28, 24, 255, 0.2);
background: #f9f9ff9c;
border-radius: 13px;
background-clip: padding-box;
/* background: #00000000; */
-webkit-transition:all 3s;
transition:all 3s;
}
::-webkit-scrollbar-thumb:hover {
background:#f9f9ffe5;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
/* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
/* border-radius: 10px; */
box-shadow: inset 0 0 0px rgb(80, 121, 255);
/* background: #EDEDED; */
background-color: rgba(180, 177, 255, 0);
transition: 1s;
}
/* ::-webkit-scrollbar-track:hover {
box-shadow: inset 0 0 6px rgb(80, 121, 255);
} */
::-webkit-scrollbar-track:hover::-webkit-scrollbar {/*滚动条里面小方块*/
width: 13px ; /*高宽分别对应横竖滚动条的尺寸*/
height: 13px ;
}
/* ::-webkit-scrollbar:hover {
height: 13px;
} */
/*
*/
::-webkit-scrollbar-track-piece{
-webkit-border-radius:0;
}
::-webkit-scrollbar-corner{
background-color: #00000000;
}
.Burin{
width: 46px;
height: 46px;
position:absolute;
transform: translate(-50%,0);
left: 50%;
font-family:KaiTi;
font-size: 39px;
color:azure;
border-radius: 50%;
/* border-width: 30px; */
border: aliceblue solid 0px;
text-shadow: aliceblue 0 0 13px;
transition: 1s all;
text-align: center;
}
.Burin:hover{
/* left:0%; */
border: aliceblue solid 1px;
text-shadow: aliceblue 0 0 23px;
color: #fceeff;
}
.CoreBox{
width: 327px;
transform: translate(-50%,0);
left: 50%;
position:absolute;
top: 16px;
z-index: 9;
}
.CoreBtn{
top: 28px;
border-radius: 3px;
position: absolute;
box-shadow: aliceblue 0 0 0px;
transform:translate(-50%,0);
/* padding: 6px; */
}
.CoreBtn:hover{
box-shadow: aliceblue 0 0 13px;
}
/* 灵笺 */
\ No newline at end of file
debug.log 0 → 100644
[0108/093321.388:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
img/01.png 0 → 100644
img/01.png

2.24 KB
img/03.png 0 → 100644
img/03.png

3.44 KB
img/04.png 0 → 100644
img/04.png

9.52 KB
img/DivScrool.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.t-ctn {
}
.s-ctn {
height: 150px;
white-space: nowrap;
font-size: 0;
width: 100%;
overflow-x: auto;
}
.s-ctn div {
font-size: 14px;
box-sizing: border-box;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
display: inline-block;
width: 200px;
height: 100%;
border: 10px solid red;
}
</style>
<body>
<!-- <div class="t-ctn"> -->
<div class="s-ctn">
<div>
<p>titletitletitletitletitletitletitletitletitletitletitletitletitle</p>
<p>body</p>
<img src="./logo.png" alt="">
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
there has been no one to compare with him it self
as the man like this,it had very storng gravity bettwen isomerism,
but no one in his eyes,he rufuse many different isomerism request
he never care classical emotion bettwen isomerism,it just a gene order to persecution for species it reproduce
but,he encount a different guy,it had emotion scar doubtless, comprehend,priciate,like it,then refuse,sounds like he never escape this black hole,
after enlighten,he can't stop to think "why people always expecation think about stimulation with sex?"
again other girl confession to him,but this one, he with a short time thinking, then he did't refuse,this onece,he wnat to go through it self to practices verify what it's really is.
then he got a conclusion,he still a asexuality,
Not saying no is not wanting to hurt people right now
Not accepting is because you don't want to hurt someone later
</div>
</div>
<!-- </div> -->
</body>
</html>
img/Test.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.Roller {
transition: all .8s linear;
transform: translate(-50%, 0) rotate(0deg);
position: absolute;
left: 50%;
top: 90px;
width: 100px;
height: 50px;
background-color: cornflowerblue;
transform-origin: 50px 160px;
display: block;
}
.Rotater {
position: absolute;
left: 50%;
top: 90px;
width: 100px;
height: 50px;
background-color: cornflowerblue;
opacity: 0.7;
transform-origin: 50px 160px;
display: block;
}
.Tigger {
/* justify-content: center */
/* transition: all .5s linear; */
position: absolute;
background-image: url('./总览.png');
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500px;
background-size: cover;
height: 500px;
}
.Tigger:hover {
/* display: none; */
/* background-color:lightblue */
/* transition: all .5s linear; */
}
.Tigger:hover .Roller {
/* display: none; */
top: 0px;
transform: translate(-50%, 0) rotate(360deg);
transform-origin: 50px 250px;
}
</style>
</head>
<body>
<div class="container">
<div class="cu_toolbar">
</div>
</div>
<div class="Tigger">
<!-- <div class="" style="display: block;position: absolute;width: 245px;height: 250px;background-color: darkkhaki;"></div> -->
<div class="Roller" style=""></div>
<div class="Rotater" style="transform: translate(-50%,0) rotate(20deg);"></div>
<div class="Rotater" style="transform: translate(-50%,0) rotate(60deg);"></div>
<div class="Rotater" style="transform:translate(-50%,0) rotate(100deg)"></div>
<div class="Rotater" style="transform:translate(-50%,0) rotate(140deg)"></div>
<div class="Rotater" style="transform:translate(-50%,0) rotate(180deg)"></div>
<div class="Rotater" style="transform:translate(-50%,0) rotate(220deg)"></div>
<div class="Rotater" style="transform:translate(-50%,0) rotate(260deg)"></div>
<div class="Rotater" style="transform:translate(-50%,0) rotate(300deg)"></div>
<div class="Rotater" style="transform:translate(-50%,0) rotate(340deg)"></div>
<!-- <div class="cu_toolbar"></div> -->
</div>
</body>
</html>
img/img.7z 0 → 100644
File added
img/手.png 0 → 100644
img/手.png

1.99 KB
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布类</title>
<link rel="stylesheet" href="./css/menu.css">
<link rel="stylesheet" href="./css/style.css">
<link href="./css/APlayer.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/timer.css">
</head>
<body>
<div id="wrapper">
<!-- i3盘轨 -->
<div class="i3 Center" id="i3">
<!-- i1中心按钮 -->
<div class="i1 Center"></div>
<!-- i2是归墟按钮 -->
<div class="i2 Center" id="second" ></div>
<div class="Roller" style="background: url('./img/图片项1.png'); z-index: 110;">
<!---此处定义了一个文件上传输入框，不显示样式，用于选择更换编辑div的背景图片--->
<input type="file" id="inp" name="selectImg" accept="image/png, image/jpeg" style="display: none">
</div>
<div class="Roller" id="cp" style="background: url('./img/纯色项1.png');z-index: 110;"></div>
<div class="Roller" id="Radius" style="background: url('./img/圆角项1.png')">
<canvas id="canvasId" width="450" height="450"></canvas>
</div>
<div class="Roller" id="Vision" style="background: url('./img/视相1.png')"></div>
<div class="Roller" id="Texter" style="background: url('./img/文相1.png')"></div>
<div class="Roller" id="viocer" style="background: url('./img/音相1.png')"></div>
<div class="Roller" id="Foption" style="background: url('./img/全屏相3.png')"><input type="checkbox" class="fullCheck" id="fullcheck"><label for="fullcheck" id="fullOp" class="check-box"></label></div>
<div class="Rotater r1" id="R1" style="transform: translate(-50%,0) rotate(20deg)"></div>
<div class="Rotater r1" style="transform: translate(-50%,0) rotate(60deg)"></div>
<div class="Rotater r1" style="transform:translate(-50%,0) rotate(100deg)"></div>
<div class="Rotater" id="Layer" style="transform:translate(-50%,0) rotate(140deg)"></div>
<div class="Rotater" id="Yuan" style="transform:translate(-50%,0) rotate(180deg)"></div>
<div class="Rotater" id="Cur" style="transform:translate(-50%,0) rotate(220deg)"><input type="checkbox" class="curtainCheck" id="curtianchb">
<label for="curtianchb" id="curtianOp" class="check-box1"></label></div>
<div class="Rotater r2" style="transform:translate(-50%,0) rotate(260deg)"></div>
<div class="Rotater r2" style="transform:translate(-50%,0) rotate(300deg)"></div>
<div class="Rotater r2" style="transform:translate(-50%,0) rotate(340deg)"></div>
</div>
</div>
<div class="sidderbar" id="timerSlider">
<div id="timer" class="con">
<div id="CoreBox" class='CoreBox'>
<div class="CoreBtn" style="background-image:url('./img/timer/上一缘.png');width: 15px;height: 17px;top:27px;left: 76px;"></div>
<div class="CoreBtn" style="background-image:url('./img/timer/上一帧.png');width: 13px;height: 15px;left: 109px;"></div>
<div class="CoreBtn" style="background-image:url('./img/timer/下一帧.png');width: 13px;height: 15px;right: 99px;"></div>
<div class="CoreBtn" style="background-image:url('./img/timer/下一缘.png');width: 15px;height: 17px;top:27px;right: 66px;"></div>
<div></div>
<div id="Burin" class="Burin" title="对当前动画帧进行记录，并自动计算与其他动画帧的动画，快捷键K">
缘
</div>
</div>
<div id="Vessel" class="Vessel">
<div id="TimeLine" class="TimeLine">
<div id="timeScale"></div>
</div>
<div id="pWrapper" class="pWrapper" >
<div id="PivotBox" class="PivotBox">
</div>
</div>
</div>
<div id="timer_L">
</div>
<div id="timer_M">
</div>
<div id="timer_R">
</div>
</div>
</div>
<div id="Scene" style="width:100%;height: 100%;"></div>
<script src='js/jquery-3.5.1.min.js'></script>
<script src="./js/color_change.js"></script>
<script src="./js/APlayer.min.js"></script>
<script src="./js/DPlayer.min.js"></script>
<script src="./js/jsmediatags.min.js"></script>
<script src="./js/Toolkit.js"></script>
<script src="./js/jquery-1.9.1.js"></script>
<script src="./js/Timer.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
\ No newline at end of file
js/DPlayer.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
js/Timer.js 0 → 100644
This diff is collapsed. Click to expand it.
js/Toolkit.js 0 → 100644
This diff is collapsed. Click to expand it.
js/index.js 0 → 100644
This diff is collapsed. Click to expand it.
js/jquery-1.9.1.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
mp3/Higher.mp3 0 → 100644
File added
test.html 0 → 100644
This diff is collapsed. Click to expand it.
测试.md 0 → 100644
This diff is collapsed. Click to expand it.
音相test.html 0 → 100644
This diff is collapsed. Click to expand it.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment