add first exam
This commit is contained in:
parent
b248a8f99a
commit
4541a49ee5
|
|
@ -0,0 +1,350 @@
|
|||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100vw;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 100vw;
|
||||
height: 7vh;
|
||||
flex-direction: row;
|
||||
background-color: #11132b;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.leftnav {
|
||||
margin-left: 10vw;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.rightnav {
|
||||
margin-left: auto;
|
||||
margin-right: 10vw;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 4vh;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
animation: logo_bigger 1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes logo_bigger {
|
||||
100% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.itemlist {
|
||||
margin: 5vh 0 0 0;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 4.6vw;
|
||||
border-radius: 5px;
|
||||
border-color: #353B65;
|
||||
border-width: 1px;
|
||||
background-color: #373737;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
.lists {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #8d8a8a;
|
||||
position: relative;
|
||||
margin: 0 0.5vw;
|
||||
}
|
||||
|
||||
.lists:hover .itemlist {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.itemf {
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
margin: 1.3vh 0.3vw;
|
||||
width: 4.5vw;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: small;
|
||||
display: block;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
padding: 5px 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: linear-gradient(-135deg, #89f7fe, #66a6ff);
|
||||
}
|
||||
|
||||
.item:hover+.itemlist {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.index {
|
||||
font-size: large;
|
||||
color: white;
|
||||
width: 4.5vw;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 4vh;
|
||||
margin: 1vh;
|
||||
}
|
||||
|
||||
.navbars {
|
||||
width: 100vw;
|
||||
height: 7vh;
|
||||
background-color: #11132b;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
height: 93vh;
|
||||
width: 100vw;
|
||||
background-color: #11132B;
|
||||
}
|
||||
|
||||
.searchcon {
|
||||
flex-direction: inherit;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 93vh;
|
||||
}
|
||||
|
||||
.simg {
|
||||
width: 100vw;
|
||||
height: 93vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.sbar {
|
||||
position: absolute;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
width: 40vw;
|
||||
height: 10vh;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 1.5em;
|
||||
}
|
||||
|
||||
.sicon {
|
||||
height: 7vh;
|
||||
margin: 1vh 2vw;
|
||||
}
|
||||
|
||||
.sin {
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 9vh;
|
||||
width: 30vw;
|
||||
font-size: 50px;
|
||||
color: #373737;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.horse,
|
||||
.videos {
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 120vh;
|
||||
background-color: #11132b;
|
||||
}
|
||||
|
||||
.tz {
|
||||
margin: 5vh 5vw;
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
.circle {
|
||||
margin: 1vh;
|
||||
display: block;
|
||||
width: 3vh;
|
||||
height: 3vh;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(66deg, #76e9d6, #9faee6);
|
||||
}
|
||||
|
||||
.rhorse {
|
||||
width: 70vw;
|
||||
height: 80vh;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.ltz {
|
||||
margin-bottom: 1vh;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hr {
|
||||
width: 70vw;
|
||||
height: 60vh;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p1 {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.p2 {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p3 {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.timebar {
|
||||
position: absolute;
|
||||
justify-content: left;
|
||||
height: 0.5vh;
|
||||
width: 6vw;
|
||||
background-color: #fef2bc;
|
||||
top: 7.5vh;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.cbar {
|
||||
height: 0.3vh;
|
||||
width: 6vw;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.deps {
|
||||
left: 67vw;
|
||||
top: 175vh;
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
margin-top: auto;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dep {
|
||||
width: 6vw;
|
||||
height: 8vh;
|
||||
color: blue;
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.d1 {
|
||||
background-color: #fce26b;
|
||||
}
|
||||
|
||||
.d2 {
|
||||
background-color: #f1e6ba;
|
||||
}
|
||||
|
||||
.d3 {
|
||||
background-color: #dbdac9;
|
||||
}
|
||||
|
||||
.ret {
|
||||
z-index: 15;
|
||||
left: 25vw;
|
||||
top: 135vh;
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
height: 30vh;
|
||||
transform-origin: center -100px;
|
||||
}
|
||||
|
||||
.scr,
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 120vh;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.scps {
|
||||
perspective: 100vw;
|
||||
width: 80vw;
|
||||
height: 97vh;
|
||||
}
|
||||
|
||||
.sp {
|
||||
width: 20vw;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.s3 {
|
||||
transform: translate(-21vw, 16vh);
|
||||
}
|
||||
|
||||
.s2 {
|
||||
transform: translate(3vw, -14vh);
|
||||
}
|
||||
|
||||
.s1 {
|
||||
transform: translate(26vw, 1vh);
|
||||
}
|
||||
|
||||
.vs {
|
||||
width: 80vw;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.v {
|
||||
margin: 3vw;
|
||||
width: 35vw;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100vw;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.tzw {
|
||||
font-size: xx-large;
|
||||
margin-top: 10vh;
|
||||
color: white;
|
||||
font-family: 'dmd';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'dmd';
|
||||
src: url('1.ttf');
|
||||
}
|
||||
|
||||
.bm {
|
||||
color: #999999;
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hello 挑战网</title>
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav">
|
||||
<div class="leftnav">
|
||||
<a href="https://www.tiaozhan.com/"> <img
|
||||
src="https://picture-1300689095.file.myqcloud.com/2022/10/02/c432cb2f65758.png" class="logo"
|
||||
alt="logo.png" /></a>
|
||||
<div class="list">
|
||||
<div class="index">首页</div>
|
||||
<div class="lists">
|
||||
<span class="itemf">全部商品</span>
|
||||
<ul class="itemlist">
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<span class="itemf">活动特惠</span>
|
||||
<ul class="itemlist">
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<span class="itemf">设计服务</span>
|
||||
<ul class="itemlist">
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<span class="itemf">家具灵感</span>
|
||||
<ul class="itemlist">
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<span class="itemf">新品一览</span>
|
||||
<ul class="itemlist">
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<span class="itemf">售后服务</span>
|
||||
<ul class="itemlist">
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
<li class="item">我的商品</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightnav">
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/02/4bf2f3dc003ab.svg" class="icon"
|
||||
alt="云端上传.svg" />
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/02/0ea28152f1b9d.svg" class="icon"
|
||||
alt="铃铛.svg" />
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/02/39fe9100bec89.svg" class="icon"
|
||||
alt="登录.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbars"></div>
|
||||
<div class="content">
|
||||
<div class="searchcon">
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/02/f838bb8f31975.jpg" class="simg">
|
||||
<div class="sbar">
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/03/0de49d235da50.svg" class="sicon"
|
||||
alt="搜索，猫客.svg" onclick="search()" />
|
||||
<input type="text" class="sin" onfocus="changeBack()" onblur="backBack()" value="Search what I want">
|
||||
</div>
|
||||
</div>
|
||||
<div class="horse">
|
||||
<div class="nbar">
|
||||
<div class="tz">
|
||||
<div class="circle"></div>
|
||||
<p class="ltz">来挑战，兴风作浪</p>
|
||||
</div>
|
||||
<div class="tz">
|
||||
<div class="circle"></div>
|
||||
<p class="ltz">来挑战，兴风作浪</p>
|
||||
</div>
|
||||
<div class="tz">
|
||||
<div class="circle"></div>
|
||||
<p class="ltz">来挑战，兴风作浪</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rhorse">
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/03/4b1ccd780121a.jpg" class="hr p1" />
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/03/fb0bf6e6e291b.jpg" class="hr p2" />
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/03/9c27204cd5a60.jpg" class="hr p3" />
|
||||
<canvas class="ret"></canvas>
|
||||
<div class="deps">
|
||||
<div class="dep d1" onclick="chorse(2)">电子产品</div>
|
||||
<div class="dep d2" onclick="chorse(0)">食品酒水</div>
|
||||
<div class="dep d3" onclick="chorse(1)">家居用品</div>
|
||||
<div class="timebar">
|
||||
<div class="cbar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scr">
|
||||
<div class="nbar test">
|
||||
<div class="tz">
|
||||
<div class="circle"></div>
|
||||
<p class="ltz">来挑战，兴风作浪</p>
|
||||
</div>
|
||||
<div class="tz">
|
||||
<div class="circle"></div>
|
||||
<p class="ltz">来挑战，兴风作浪</p>
|
||||
</div>
|
||||
<div class="tz">
|
||||
<div class="circle"></div>
|
||||
<p class="ltz">来挑战，兴风作浪</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scps">
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/04/6c03c5a788526.jpg" class="sp s1">
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/04/5780788c85552.jpg" class="sp s2">
|
||||
<img src="https://picture-1300689095.file.myqcloud.com/2022/10/04/6868c9e8d0a09.jpg" class="sp s3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="videos">
|
||||
<div class="nbar">
|
||||
<div class="tz">
|
||||
<div class="circle"></div>
|
||||
<p class="ltz">来挑战，兴风作浪</p>
|
||||
</div>
|
||||
<div class="tz">
|
||||
<div class="circle"></div>
|
||||
<p class="ltz">来挑战，兴风作浪</p>
|
||||
</div>
|
||||
<div class="tz">
|
||||
<div class="circle"></div>
|
||||
<p class="ltz">来挑战，兴风作浪</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vs">
|
||||
<video src="https://picture-1300689095.file.myqcloud.com/2022/10/05/2d016a157a7f4.mp4" class="v v1"
|
||||
controls></video>
|
||||
<video src="test.mp4" class="v v2" controls></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<h1 class="tzw">挑战网</h1>
|
||||
<p class="bm">技术部|美工部|视频部|来挑战兴风作浪就是说</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
vh = window.innerHeight / 100;
|
||||
vw = window.innerWidth / 100;;
|
||||
function search() {
|
||||
value = document.getElementsByClassName("sin")[0].value;
|
||||
if (value == "") return;
|
||||
window.location.href = "https://cn.bing.com/search?q=" + value;
|
||||
}
|
||||
function changeBack() {
|
||||
simg = document.getElementsByClassName("simg")[0];
|
||||
simg.style.filter = "blur(2px)";
|
||||
sin = document.getElementsByClassName("sin")[0];
|
||||
sin.value = "";
|
||||
}
|
||||
function backBack() {
|
||||
simg = document.getElementsByClassName("simg")[0];
|
||||
simg.style.filter = "none";
|
||||
sin = document.getElementsByClassName("sin")[0];
|
||||
sin.value = "Search what I want";
|
||||
}
|
||||
function drawCanvas(img) {
|
||||
c = document.getElementsByClassName("ret")[0];
|
||||
ctx = c.getContext("2d");
|
||||
ctx.drawImage(img, 35 * vw, 30 * vh, 30 * vw, 36 * vh, 0, 0, 25 * vw, 30 * vh);
|
||||
// ctx.drawImage(img, 25 * vw, 12 * vh, 30 * vw, 36 * vh, 1*vw, 1*vh, 16 * vw, 16 * vh);
|
||||
ctx.clearRect(1 * vw, 1 * vw, 15.4 * vw, 14 * vh);
|
||||
}
|
||||
tick = 0; cs = -1;
|
||||
pid = -1; p = [], d = [];
|
||||
function runHorse() {
|
||||
if (tick == 99999) tick = 0;
|
||||
p[0] = document.getElementsByClassName("p1")[0];
|
||||
p[1] = document.getElementsByClassName("p2")[0];
|
||||
p[2] = document.getElementsByClassName("p3")[0];
|
||||
d[0] = document.getElementsByClassName("d1")[0];
|
||||
d[1] = document.getElementsByClassName("d2")[0];
|
||||
d[2] = document.getElementsByClassName("d3")[0];
|
||||
tb = document.getElementsByClassName("timebar")[0];
|
||||
cb = document.getElementsByClassName("cbar")[0];
|
||||
ret = document.getElementsByClassName("ret")[0];
|
||||
tick += 1;
|
||||
if (tick == 1) drawCanvas(p[0]);
|
||||
if (cs != -1) {
|
||||
tick += 9;
|
||||
if (tick % 10 < 10 && tick / 10 > 1) tick -= tick % 10;
|
||||
}
|
||||
m = tick / 100;
|
||||
pid = parseInt((m / 5) % 3);
|
||||
pid = (pid + 2) % 3;
|
||||
cb.style.width = m % 5 / 5 * 6 * vw + "px";
|
||||
if (m % 5 > 0 && m % 5 <= 1 && m / 5 >= 1) {
|
||||
p[pid].style.width = (1 - m % 5) * 70 + "vw";
|
||||
ret.style.opacity = 1 - m % 5;
|
||||
ret.style.transform = "rotate(" + 20 * (m % 5) + "deg)";
|
||||
}
|
||||
if (m % 5 == 1 && m > 5) {
|
||||
drawCanvas(p[parseInt(m / 5) % 3]);
|
||||
p[0].style["z-index"] = (getComputedStyle(p[0])["z-index"] + 1) % 3;
|
||||
p[1].style["z-index"] = (getComputedStyle(p[1])["z-index"] + 1) % 3;
|
||||
p[2].style["z-index"] = (getComputedStyle(p[2])["z-index"] + 1) % 3;
|
||||
}
|
||||
if (m % 5 > 1 && m % 5 <= 2 && m / 5 >= 1) {
|
||||
ret.style.opacity = m % 5 - 1;
|
||||
ret.style.transform = "rotate(-" + 20 * (2 - m % 5) + "deg)";
|
||||
}
|
||||
if (m % 5 == 0) {
|
||||
if (pid != -1) p[(pid + 1) % 3].style.width = "70vw";
|
||||
if (pid == cs) cs = -1;
|
||||
tb.style.left = (m / 5) % 3 * 6 + "vw";
|
||||
// d[pid].style["background-color"] = "#dbdac9";
|
||||
// d[(m / 5) % 3].style["background-color"] = "#fce26b";
|
||||
}
|
||||
}
|
||||
setInterval(runHorse, 10);
|
||||
function chorse(id) {
|
||||
if (pid == id) return;
|
||||
cs = id;
|
||||
}
|
||||
window.onload = function () {
|
||||
sin = document.getElementsByClassName("sin")[0];
|
||||
sin.onkeydown = function (event) {
|
||||
if (event.keyCode == 13) {
|
||||
search();
|
||||
}
|
||||
};
|
||||
};
|
||||
window.onscroll = function () {
|
||||
sbar = document.getElementsByClassName("sbar")[0];
|
||||
simg = document.getElementsByClassName("simg")[0];
|
||||
horse = document.getElementsByClassName("horse")[0];
|
||||
sbarTop = sbar.getBoundingClientRect().top;
|
||||
simgTop = simg.getBoundingClientRect().top;
|
||||
horseTop = horse.getBoundingClientRect().top;
|
||||
if (simgTop > - 30 * vh) {
|
||||
sbar.style.top = "unset";
|
||||
sbar.style.position = "absolute";
|
||||
sbar.style["z-index"] = "unset";
|
||||
}
|
||||
else if (sbarTop < 10 * vh) {
|
||||
sbar.style.top = "10vh";
|
||||
sbar.style.position = "fixed";
|
||||
sbar.style["z-index"] = 99;
|
||||
}
|
||||
if (horseTop > 23 * vh) {
|
||||
simg.style.top = "unset";
|
||||
simg.style.position = "relative";
|
||||
simg.style["z-index"] = "unset";
|
||||
horse.style["margin-top"] = "unset";
|
||||
}
|
||||
else if (simgTop < -70 * vh) {
|
||||
simg.style.top = "-70vh";
|
||||
simg.style.position = "fixed";
|
||||
simg.style["z-index"] = 99;
|
||||
horse.style["margin-top"] = "93vh";
|
||||
}
|
||||
test = document.getElementsByClassName("test")[0];
|
||||
cart = 20;
|
||||
//console.log(parseInt(test.getBoundingClientRect().top)/vh);
|
||||
if (test.getBoundingClientRect().top < cart * vh) {
|
||||
delta_top = 1 - (cart - parseInt(test.getBoundingClientRect().top) / vh) / (cart + 20);
|
||||
console.log(delta_top);
|
||||
if (delta_top < 0) delta_top = 0;
|
||||
s1 = document.getElementsByClassName("s1")[0];
|
||||
s2 = document.getElementsByClassName("s2")[0];
|
||||
s3 = document.getElementsByClassName("s3")[0];
|
||||
s3.style.transform = "translate(" + (25 - 39 * delta_top) + "vw," + 16 * delta_top + "vh) rotateY(" + 50 * delta_top + "deg)";
|
||||
s2.style.transform = "translate(" + 3 * delta_top + "vw," + -14 * delta_top + "vh) rotateY(" + -5 * delta_top + "deg)";
|
||||
s1.style.transform = "translate(" + (-25 + 46 * delta_top) + "vw," + 1 * delta_top + "vh) rotateY(" + -45 * delta_top + "deg)";
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue