毕业设计[项目三]个人网站设计
这个项目很早就做了和本网站是同期，当初没有设计项目方案，单纯想做个网站显摆技术
项目工程包：
项目主要文件：
html文件
主网页index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vincent Cassano</title>
<link rel="icon" type="image/png" href="annex/image/logo/vimeo-v-blue.png">
<!-- ============================== CSS引入 ============================== -->
<link rel="stylesheet" href="css/daohang-kuangjia.css">
<link rel="stylesheet" href="css/shouye-jianjie.css">
<link rel="stylesheet" href="css/zuoping-jinli.css">
<link rel="stylesheet" href="css/gongjuji.css">
<link rel="stylesheet" href="css/changpian.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<link rel="stylesheet" href="css/hshwk.css">
<!-- ============================== Bootstrap5引入 ============================== -->
<div>
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400&display=swap');
/* 全局样式 */
body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
/* 设置导航栏背景透明并置于顶层 */
.navbar-custom {
background-color: transparent !important;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
padding: 8px;
padding-left: 12px;
font-size: 1.3rem;
/* 设置很大的字体大小 */
text-shadow:
-1px -1px 0 #f5f5f5,
1px -1px 0 #f5f5f5,
-1px 1px 0 #f5f5f5,
1px 1px 0 #f5f5f5;
/* 多重阴影实现1px的白色描边效果 */
}
.modal-content {
border-radius: 35px;
overflow: hidden;
/* 确保子元素的背景不会超出容器的边界 */
background-color: rgb(37, 37, 37);
/* 容器背景色，用于显示圆角效果 */
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
/* 添加阴影 */
color: #f5f5f5;
}
</style>
</head>
<body class="hide-scrollbar">
<!-- ============================== 导航部分 ============================== -->
<!-- 导航 -->
<div>
<nav class="navbar navbar-expand-lg bg-transparent navbar-custom dh">
<div class="container-fluid">
<a class="navbar-brand" href="http://47.121.128.98:8090/">
<svg t="1717370979436" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1249" width="26" height="26">
<path
d="M959.59133 307.2c-4 87.2-64.8 206.6-182.8 358.2-121.8 158.4-224.8 237.6-309.2 237.6-52.2 0-96.4-48.2-132.6-144.6C264.59133 500 234.59133 348.6 176.39133 348.6c-6.8 0-30.2 14.2-70.4 42.2L63.99133 336.4c103.2-90.6 201.8-191.4 263.6-197 69.8-6.8 112.6 41 128.8 143 57.4 363 82.8 417.8 187.2 253.4 37.4-59.2 57.6-104.2 60.4-135.2 9.6-91.8-71.6-85.6-126.6-62 44-144.2 128.2-214.2 252.4-210.2 91.6 2.4 135 62.2 129.8 178.8z"
fill="#8a8a8a" p-id="1250"></path>
</svg>
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-black-50" href="#shouye">首页</a>
</li>
<li class="nav-item">
<a class="nav-link text-black-50" href="#jianjie">简介</a>
</li>
<li class="nav-item">
<a class="nav-link text-black-50" href="#zuopin">作品</a>
</li>
<li class="nav-item">
<a class="nav-link text-black-50" href="#jinliyurongyu">经历与荣誉</a>
</li>
<li class="nav-item">
<a class="nav-link text-black-50" href="gongjuji.html">工具集</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ============================== 主要部分 ============================== -->
<main>
<!-- 模块 1 封面-->
<section class="layer layer1" id="shouye" name="shouye">
<div class="content">
<h1 class="content-h1"><a href="http://47.121.128.98:8090/"><svg t="1716811595875" class="icon"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15636"
width="130" height="130">
<path
d="M959.59133 307.2c-4 87.2-64.8 206.6-182.8 358.2-121.8 158.4-224.8 237.6-309.2 237.6-52.2 0-96.4-48.2-132.6-144.6C264.59133 500 234.59133 348.6 176.39133 348.6c-6.8 0-30.2 14.2-70.4 42.2L63.99133 336.4c103.2-90.6 201.8-191.4 263.6-197 69.8-6.8 112.6 41 128.8 143 57.4 363 82.8 417.8 187.2 253.4 37.4-59.2 57.6-104.2 60.4-135.2 9.6-91.8-71.6-85.6-126.6-62 44-144.2 128.2-214.2 252.4-210.2 91.6 2.4 135 62.2 129.8 178.8z"
fill="#ffffff" p-id="15637"></path>
</svg></a></h1>
<p class="content-p">Hi! I'm Vincent.<br>Welcome to my web.</p>
</div>
</section>
<!-- 黑神话悟空倒计时-->
<section class="layer layer2" id="shouye" name="shouye">
<div class="yklogo">
<div class="yklogo1">
<img src="annex/image/hshwkdjs/img_logo_gs.png" width="120px">
</div>
<div class="yklogo2">
<img src="annex/image/hshwkdjs/img_logo_bm.png" width="40px">
</div>
</div>
<div class="djs">
<img src="annex/image/hshwkdjs/home-logo-zh.png" width="480px">
<p>游戏已发售:</p>
<div class="countdown">
<div>
<span id="days">0</span>
<span class="label">天</span>
</div>
<div>
<span id="hours">0</span>
<span class="label">小时</span>
</div>
<div>
<span id="minutes">0</span>
<span class="label">分钟</span>
</div>
<div>
<span id="seconds">0</span>
<span class="label">秒</span>
</div>
</div>
</div>
<a href="https://www.heishenhua.com/" target="_blank"><img
src="annex/image/hshwkdjs/img_bg_introduce_1_a.png" width="100%"></a>
</section>
<!-- 模块 2 名片-->
<section class="layer-3 " id="jianjie" name="jianjie">
<div class="header-big canvas-fx mb-4">
<iframe class="canvas-bg bjdhb" scrolling="no" sandbox="allow-scripts allow-same-origin"
src="https://www.tboxn.com/wp-content/themes/onenav/fx/io-fx07.html">
</iframe>
<div class="shell">
<img src="annex/image/body/Mp/touxiang.jpg" alt="" class="cover">
<div class="head">
<div class="data">
<div class="title1">陆炳阳<span>Dt</span></div>
<div class="title2">Vincent Cassano</div>
</div>
</div>
<div class="foot">
<div class="tags">
<span class="tag">#风光摄影</span>
<span class="tag">#骑行</span>
<span class="tag">#音乐</span><br>
<span class="tag">#看书和写作</span>
<span class="tag">#马克思主义者</span><br>
<span class="tag">#林俊杰&周杰伦</span>
<span class="tag">#上海人</span><br>
<span class="tag">#新青年</span>
<span class="tag">#努力学习</span>
</div>
<div class="introduce">
<p>
我叫陆炳阳，也可以叫我Vincent。现任上海市现代职业技术学校番禺学区22403班团支部书记兼宣传委员，并在学生会中担任执行主席。
工作上，我负责协调各部门工作，擅长团队合作，沟通协调能力强，工作效率高且质量优。在班级中，我积极宣传马列主义思想，责任心强，品行端正。
学习上，我成绩优秀，具有钻研精神，严格要求自己，善于将理论联系实际，展现出较高的学习能力和综合素质。
</p>
<div class="lianxifangshi">
<ul class="nav">
<!-- 微信 -->
<li class="nav-item2">
<button type="button" class="btn" data-bs-toggle="modal"
data-bs-target="#myModal"><svg t="1716886797767" class="icon"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="22269" width="30" height="30">
<path
d="M208.979592 1024h606.040816c115.461224 0 208.979592-93.518367 208.979592-208.979592V208.979592C1024 93.518367 930.481633 0 815.020408 0H208.979592C93.518367 0 0 93.518367 0 208.979592v606.040816c0 115.461224 93.518367 208.979592 208.979592 208.979592z"
fill="#03DB6C" p-id="22270"></path>
<path
d="M308.558367 226.429388c83.382857-29.257143 175.333878-21.420408 252.656327 21.420408l-0.731429-0.313469c58.514286 30.72 100.728163 85.472653 115.461225 150.047346a265.404082 265.404082 0 0 0-197.799184 65.097143c-31.764898 28.630204-53.080816 66.873469-60.604082 108.878368-4.91102 30.406531-2.089796 61.44 8.045715 90.383673-37.929796 1.149388-75.859592-4.284082-112.117551-15.986939l-89.025306 48.169796c8.881633-26.226939 16.927347-52.349388 26.122449-78.576326a235.091592 235.091592 0 0 1-98.533878-134.478368c-12.747755-51.2-4.075102-105.430204 24.032653-149.942857 31.137959-48.901224 77.844898-85.786122 132.493061-104.698775z m217.547755 97.802449c-10.03102-7.209796-22.987755-9.195102-34.690612-5.22449a37.616327 37.616327 0 0 0-23.614694 29.152653c-2.089796 13.270204 3.030204 26.540408 13.479184 35.004082 10.762449 8.672653 25.39102 10.762449 38.138776 5.224489a37.302857 37.302857 0 0 0 22.256326-31.451428v-1.253878c0.20898-12.434286-5.642449-24.137143-15.56898-31.451428z m-217.547755-3.866123c-16.718367 6.060408-26.853878 23.092245-24.346122 40.751021a37.626776 37.626776 0 0 0 34.795102 32.287347c17.763265 1.149388 33.854694-10.34449 38.661224-27.480817 3.239184-13.583673-1.044898-27.794286-11.284898-37.198367-10.13551-9.404082-24.659592-12.643265-37.825306-8.359184z m461.740409 119.118368a201.247347 201.247347 0 0 1 93.831836 96.026122v-1.044898c19.644082 45.244082 17.972245 96.966531-4.702041 140.852245a218.770286 218.770286 0 0 1-68.440816 75.546122c6.791837 21.733878 13.583673 42.422857 20.58449 64.156735-25.286531-11.807347-47.020408-27.480816-73.142857-37.929796-42.840816 14.001633-88.398367 17.136327-132.702041 9.195102a220.891429 220.891429 0 0 1-149.733878-98.429387 160.956082 160.956082 0 0 1-20.37551-121.208164c13.061224-55.902041 50.886531-102.713469 102.71347-127.164081a255.038694 255.038694 0 0 1 231.967347 0zM561.737143 522.44898c-8.986122 12.016327-7.732245 28.943673 2.925714 39.497142a29.988571 29.988571 0 0 0 49.110204-10.448979 30.197551 30.197551 0 0 0-13.374694-37.302857 30.093061 30.093061 0 0 0-38.661224 8.254694z m168.64653-10.971429c-15.986939 0-25.077551 14.837551-28.525714 28.734694 1.358367 8.045714 4.806531 15.56898 10.24 21.733877 6.896327 6.582857 16.613878 9.508571 26.017959 7.941225 9.404082-1.671837 17.554286-7.523265 22.047347-16.091429 4.493061-9.717551 3.552653-21.106939-2.612245-29.884081a29.80049 29.80049 0 0 0-27.167347-12.434286z"
fill="#FFFFFF" p-id="22271"></path>
</svg></button>
</li>
<!-- 邮件 -->
<li class="nav-item2">
<a class="nav-link" target="_blank"
href="mailto:w15316153525wct@outlook.com"><svg t="1716886688131"
class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="19403" width="30" height="30">
<path
d="M208.979592 1024h606.040816c115.461224 0 208.979592-93.518367 208.979592-208.979592V208.979592C1024 93.518367 930.481633 0 815.020408 0H208.979592C93.518367 0 0 93.518367 0 208.979592v606.040816c0 115.461224 93.518367 208.979592 208.979592 208.979592z"
fill="#e6e6e6" p-id="19404"
data-spm-anchor-id="a313x.search_index.0.i31.12693a816ibIRd"
class="selected"></path>
<path
d="M386.612245 846.367347h438.857143c23.092245 0 41.795918-18.703673 41.795918-41.795918V219.428571c0-23.092245-18.703673-41.795918-41.795918-41.795918H386.612245c-23.092245 0-41.795918 18.703673-41.795918 41.795918v585.142858c0 23.092245 18.703673 41.795918 41.795918 41.795918z"
fill="#0364B8" p-id="19405"></path>
<path
d="M344.816327 261.22449h522.448979v-41.795919c0-23.092245-18.703673-41.795918-41.795918-41.795918H386.612245c-23.092245 0-41.795918 18.703673-41.795918 41.795918v41.795919z"
fill="#0358A7" p-id="19406"></path>
<path
d="M344.816327 428.408163h177.632653V261.22449H344.816327v167.183673zM344.816327 595.591837h177.632653V428.408163H344.816327v167.183674zM344.816327 762.77551h177.632653V595.591837H344.816327v167.183673z"
fill="#0078D4" p-id="19407"></path>
<path
d="M689.632653 428.408163h177.632653V261.22449H689.632653v167.183673z"
fill="#50D9FF" p-id="19408"></path>
<path
d="M689.632653 595.591837h177.632653V428.408163H689.632653v167.183674z"
fill="#28A8EA" p-id="19409"></path>
<path
d="M689.632653 762.77551h177.632653V595.591837H689.632653v167.183673z"
fill="#0078D4" p-id="19410"></path>
<path
d="M522.44898 428.408163h167.183673V261.22449H522.44898v167.183673z"
fill="#28A8EA" p-id="19411"></path>
<path
d="M522.44898 595.591837h167.183673V428.408163H522.44898v167.183674z"
fill="#0078D4" p-id="19412"></path>
<path
d="M522.44898 762.77551h167.183673V595.591837H522.44898v167.183673z"
fill="#0364B8" p-id="19413"></path>
<path
d="M856.816327 553.795918l31.346938-20.897959-31.346938-20.897959v41.795918z"
fill="#123B6D" p-id="19414"></path>
<path
d="M846.346449 846.367347a41.77502 41.77502 0 0 0 25.80898-8.881633c9.717551-7.627755 15.986939-19.539592 15.986938-32.914285V532.897959l-282.122449 156.734694-266.13551 147.853061c7.105306 5.537959 16.091429 8.881633 25.80898 8.881633h480.653061z"
fill="#1F93DE" p-id="19415"></path>
<path
d="M846.367347 846.367347c9.717551 0 18.703673-3.343673 25.80898-8.881633L606.040816 689.632653 323.918367 532.897959v271.67347c0 13.374694 6.269388 25.286531 15.986939 32.914285A41.77502 41.77502 0 0 0 365.714286 846.367347h480.653061z"
fill="#29A9EA" p-id="19416"></path>
<path
d="M188.081633 700.081633h292.571428c23.092245 0 41.795918-18.703673 41.795919-41.795919V365.714286c0-23.092245-18.703673-41.795918-41.795919-41.795919H188.081633c-23.092245 0-41.795918 18.703673-41.795919 41.795919v292.571428c0 23.092245 18.703673 41.795918 41.795919 41.795919z"
fill="#0163CC" p-id="19417"></path>
<path
d="M428.408163 516.597551c0 30.093061-10.866939 52.662857-10.866939 52.662857-10.866939 22.674286-31.137959 34.899592-31.137959 34.899592C366.132245 616.489796 339.905306 616.489796 339.905306 616.489796c-25.913469 0-46.28898-12.120816-46.288979-12.120816-20.37551-12.225306-31.555918-34.795102-31.555919-34.795102-11.180408-22.465306-11.284898-51.826939-11.284898-51.826939v-10.031021c0-30.093061 11.075918-52.871837 11.075919-52.871836 11.180408-22.883265 31.346939-35.108571 31.346938-35.108572C313.469388 407.510204 339.591837 407.510204 339.591837 407.510204c26.122449 0 46.393469 12.225306 46.393469 12.225306 20.27102 12.225306 31.346939 35.108571 31.346939 35.108572C428.408163 477.622857 428.408163 507.506939 428.408163 507.506939z m-55.275102-57.782857c-11.807347-16.613878-33.541224-16.613878-33.541224-16.613878-21.629388 0-33.332245 16.404898-33.332245 16.404898-11.807347 16.404898-11.911837 48.065306-11.911837 48.065306v9.926531c0 31.137959 11.702857 48.378776 11.702857 48.378776 11.807347 17.136327 33.854694 17.136327 33.854694 17.136326 21.629388 0 33.227755-16.509388 33.227755-16.509388 11.598367-16.613878 11.702857-48.274286 11.702857-48.274285v-9.926531c0-31.973878-11.702857-48.587755-11.702857-48.587755z"
fill="#FFFFFF" p-id="19418"></path>
</svg></a>
</li>
<!-- Github -->
<li class="nav-item2">
<a class="nav-link" target="_blank"
href="https://github.com/VincentCassano"><svg t="1718689605249" class="icon"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2357" width="30" height="30">
<path
d="M950.857143 512q0 143.428571-83.714286 258t-216.285714 158.571429q-15.428571 2.857143-22.571429-4t-7.142857-17.142857l0-120.571429q0-55.428571-29.714286-81.142857 32.571429-3.428571 58.571429-10.285714t53.714286-22.285714 46.285714-38 30.285714-60 11.714286-86q0-69.142857-45.142857-117.714286 21.142857-52-4.571429-116.571429-16-5.142857-46.285714 6.285714t-52.571429 25.142857l-21.714286 13.714286q-53.142857-14.857143-109.714286-14.857143t-109.714286 14.857143q-9.142857-6.285714-24.285714-15.428571t-47.714286-22-49.142857-7.714286q-25.142857 64.571429-4 116.571429-45.142857 48.571429-45.142857 117.714286 0 48.571429 11.714286 85.714286t30 60 46 38.285714 53.714286 22.285714 58.571429 10.285714q-22.857143 20.571429-28 58.857143-12 5.714286-25.714286 8.571429t-32.571429 2.857143-37.428571-12.285714-31.714286-35.714286q-10.857143-18.285714-27.714286-29.714286t-28.285714-13.714286l-11.428571-1.714286q-12 0-16.571429 2.571429t-2.857143 6.571429 5.142857 8 7.428571 6.857143l4 2.857143q12.571429 5.714286 24.857143 21.714286t18 29.142857l5.714286 13.142857q7.428571 21.714286 25.142857 35.142857t38.285714 17.142857 39.714286 4 31.714286-2l13.142857-2.285714q0 21.714286 2.857143 50.857143t2.857143 30.857143q0 10.285714-7.428571 17.142857t-22.857143 4q-132.571429-44-216.285714-158.571429t-83.714286-258q0-119.428571 58.857143-220.285714t159.714286-159.714286 220.285714-58.857143 220.285714 58.857143 159.714286 159.714286 58.857143 220.285714z"
p-id="2358"></path>
</svg></a>
</li>
<!-- 抖音 -->
<li class="nav-item2">
<a class="nav-link" target="_blank" href="https://v.douyin.com/ijw2Jsnu/"><svg
t="1716886528970" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="7641" width="30" height="30">
<path
d="M0 0m184.32 0l655.36 0q184.32 0 184.32 184.32l0 655.36q0 184.32-184.32 184.32l-655.36 0q-184.32 0-184.32-184.32l0-655.36q0-184.32 184.32-184.32Z"
fill="#111111" p-id="7642"></path>
<path
d="M204.27776 670.59712a246.25152 246.25152 0 0 1 245.97504-245.97504v147.57888a98.49856 98.49856 0 0 0-98.38592 98.38592c0 48.34304 26.14272 100.352 83.54816 100.352 3.81952 0 93.55264-0.88064 93.55264-77.19936V134.35904h157.26592a133.31456 133.31456 0 0 0 133.12 132.99712l-0.13312 147.31264a273.152 273.152 0 0 1-142.62272-38.912l-0.06144 317.98272c0 146.00192-124.24192 224.77824-241.14176 224.77824-131.74784 0.03072-231.1168-106.56768-231.1168-247.92064z"
fill="#FF4040" p-id="7643"></path>
<path
d="M164.92544 631.23456a246.25152 246.25152 0 0 1 245.97504-245.97504v147.57888a98.49856 98.49856 0 0 0-98.38592 98.38592c0 48.34304 26.14272 100.352 83.54816 100.352 3.81952 0 93.55264-0.88064 93.55264-77.19936V94.99648h157.26592a133.31456 133.31456 0 0 0 133.12 132.99712l-0.13312 147.31264a273.152 273.152 0 0 1-142.62272-38.912l-0.06144 317.98272c0 146.00192-124.24192 224.77824-241.14176 224.77824-131.74784 0.03072-231.1168-106.56768-231.1168-247.92064z"
fill="#00F5FF" p-id="7644"></path>
<path
d="M410.91072 427.58144c-158.8224 20.15232-284.44672 222.72-154.112 405.00224 120.40192 98.47808 373.68832 41.20576 380.70272-171.85792l-0.17408-324.1472a280.7296 280.7296 0 0 0 142.88896 38.62528V261.2224a144.98816 144.98816 0 0 1-72.8064-54.82496 135.23968 135.23968 0 0 1-54.70208-72.45824h-123.66848l-0.08192 561.41824c-0.11264 78.46912-130.9696 106.41408-164.18816 30.2592-83.18976-39.77216-64.37888-190.9248 46.31552-192.57344z"
fill="#FFFFFF" p-id="7645"></path>
</svg></a>
</li>
<!-- bilibili -->
<li class="nav-item2">
<a class="nav-link" target="_blank"
href="https://space.bilibili.com/661875163"><svg t="1716886493254"
class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="6599" width="30" height="30">
<path
d="M201.076364 0h621.847272C956.974545 0 1024 67.025455 1024 201.076364v621.521454c0 134.050909-67.025455 201.076364-201.076364 201.076364H201.076364c-134.050909 0-201.076364-67.025455-201.076364-201.076364V201.076364C0 67.025455 67.025455 0 201.076364 0z"
fill="#F4518C" p-id="6600"></path>
<path
d="M776.192 239.941818h-135.819636l61.533091-61.579636a24.482909 24.482909 0 0 0 0-36.119273 24.482909 24.482909 0 0 0-36.119273 0L561.896727 246.225455h-101.934545L356.072727 142.242909c-8.517818-10.612364-21.224727-12.706909-33.978182-6.283636-2.048 0-2.048 2.094545-4.282181 4.189091a24.482909 24.482909 0 0 0 0 36.119272l63.674181 63.674182H245.713455a136.704 136.704 0 0 0-135.819637 135.819637v337.361454c0 72.052364 61.44 133.585455 135.819637 133.585455h21.224727c0.139636 24.576 20.014545 44.497455 44.544 44.683636 23.272727 0 44.544-21.364364 44.544-44.683636h314.042182c2.094545 25.6 23.319273 44.683636 48.872727 42.449454 23.272727-2.094545 40.215273-19.083636 42.449454-42.402909h16.896a136.797091 136.797091 0 0 0 135.819637-135.819636V373.527273a138.100364 138.100364 0 0 0-137.914182-133.585455z m-4.189091 524.008727H254.138182c-27.508364 0-48.733091-23.272727-50.827637-50.827636L201.076364 369.338182A51.665455 51.665455 0 0 1 252.043636 318.370909h517.725091c27.601455 0 48.872727 23.319273 50.920728 50.967273l2.094545 343.784727c-2.094545 29.602909-23.272727 50.827636-50.827636 50.827636z"
fill="#FFFFFF" opacity=".15" p-id="6601"></path>
<path
d="M421.748364 435.106909l12.706909 63.627636-169.704728 31.837091-12.706909-63.674181 169.704728-31.790546z m163.467636 63.627636l12.706909-63.627636 169.751273 31.790546-12.706909 63.674181-169.751273-31.837091z m33.931636 133.725091c0 2.094545 0 6.423273-2.094545 8.517819-10.612364 23.272727-33.978182 38.120727-61.579636 40.354909-17.035636 0-33.931636-8.517818-44.544-21.364364-12.660364 12.846545-27.601455 21.364364-44.637091 21.364364a77.730909 77.730909 0 0 1-61.44-40.354909c0-2.234182-2.187636-4.328727-2.187637-8.517819 0-8.517818 6.376727-14.894545 14.894546-17.035636h2.094545c6.423273 0 10.612364 2.234182 12.706909 8.517818 0 0 17.035636 23.319273 31.837091 23.319273 29.742545 0 29.742545-25.413818 46.731637-44.544 19.037091 21.224727 19.037091 44.544 46.638545 44.544 19.130182 0 31.837091-23.272727 31.837091-23.272727 2.094545-4.235636 8.517818-8.564364 12.706909-8.564364 8.517818-2.094545 14.894545 4.328727 17.035636 12.706909v4.328727z"
fill="#FFFFFF" opacity=".15" p-id="6602"></path>
<path
d="M759.528727 602.856727c-5.911273-5.911273-13.824-9.867636-19.735272-13.824a236.916364 236.916364 0 0 0-63.441455-21.829818c-21.829818-3.956364-45.381818-7.912727-69.166545-5.911273-3.956364 0-5.957818 0-9.867637 1.954909-9.867636-82.990545-13.824-164.165818-9.867636-247.342545-25.786182 8.052364-47.476364 19.874909-71.307637 27.787636 23.784727 120.645818 37.608727 241.384727 47.476364 363.985455h7.912727c17.873455 0 33.652364 0 51.432728-3.909818 21.829818-2.001455 43.52-7.912727 65.396363-13.963637 21.690182-7.912727 41.425455-15.778909 57.344-31.557818 9.867636-7.912727 17.780364-15.825455 19.735273-27.741091 5.911273-9.867636 3.956364-19.735273-5.911273-27.648z m-120.645818 67.211637c-3.956364-23.691636-5.911273-45.521455-9.867636-67.211637 23.691636 5.911273 45.381818 15.825455 67.211636 23.691637-17.873455 15.918545-37.608727 29.742545-57.344 43.52z m-324.421818-69.166546a139.031273 139.031273 0 0 0-21.876364-13.824c-19.735273-10.007273-41.565091-15.918545-63.301818-19.874909a242.176 242.176 0 0 0-65.210182-3.956364c-3.956364 0-5.911273 0-9.867636 2.001455-10.007273-83.037091-15.918545-166.167273-11.962182-249.344-23.738182 6.050909-47.476364 19.874909-69.213091 27.787636 23.784727 120.645818 37.608727 241.384727 47.476364 363.985455h7.912727a395.403636 395.403636 0 0 0 96.954182-11.822546 207.732364 207.732364 0 0 0 73.169454-33.652363c9.960727-7.912727 19.828364-17.780364 23.784728-29.742546 5.911273-11.822545 2.001455-21.690182-7.912728-31.557818zM193.629091 670.068364c-3.956364-23.691636-5.911273-45.521455-9.867636-67.211637 7.912727 0 59.345455 19.735273 65.256727 23.691637-15.825455 15.918545-35.514182 29.742545-55.389091 43.52z m243.386182-75.124364c-1.954909-17.873455-1.954909-33.652364-3.956364-51.432727a641.815273 641.815273 0 0 1-3.956364-61.300364c-1.954909-17.873455-1.954909-37.608727-3.909818-55.389091-2.001455-19.874909-2.001455-39.563636-3.956363-59.438545 0-5.957818 0-5.957818-5.911273-5.957818h-2.141091c-7.912727 0-15.778909 0-21.690182 2.001454-5.911273 0-11.822545 1.954909-17.780363 1.954909 17.780364 98.955636 27.648 199.866182 37.515636 300.776727 11.962182 0 23.831273 1.954909 35.653818 1.95491v-7.912728a194.932364 194.932364 0 0 1-9.867636-65.256727z m445.067636 15.825455c-1.954909-19.781818-3.956364-37.655273-3.956364-57.390546-1.954909-19.735273-3.909818-41.565091-5.911272-61.300364-1.954909-19.735273-1.954909-37.608727-3.956364-57.344-1.954909-23.831273-3.909818-45.521455-3.909818-69.352727 0-5.911273 0-5.911273-5.957818-5.911273h-17.873455c-7.912727 0-15.825455 1.954909-25.646545 3.956364 17.733818 98.909091 27.741091 199.819636 37.608727 300.730182 11.869091 0 23.691636 2.001455 35.514182 2.001454v-2.001454l-5.911273-53.387636z m-61.300364-41.611637c-1.954909-15.778909-3.956364-33.512727-7.912727-49.431273 0-3.956364-1.954909-3.956364-3.909818-3.956363h-19.735273c-8.052364 1.954909-15.918545 1.954909-25.786182 3.956363 9.867636 53.387636 21.690182 106.821818 31.65091 160.209455 11.869091-1.954909 23.738182-1.954909 35.560727-3.909818-1.954909-13.824-1.954909-25.693091-3.956364-37.515637a9662.836364 9662.836364 0 0 1-5.911273-69.352727z m-445.067636 0c-2.001455-15.778909-3.956364-31.557818-5.911273-49.431273 0-3.956364-2.001455-3.956364-5.957818-3.956363-9.960727 0-19.828364 1.954909-27.741091 1.954909-5.911273 0-9.867636 2.001455-15.825454 3.956364 9.914182 53.434182 21.736727 106.821818 31.650909 160.256 11.915636-2.001455 23.738182-2.001455 35.607273-3.956364v-1.954909c-1.954909-13.824-1.954909-29.649455-3.956364-43.566546-3.909818-21.690182-5.911273-43.426909-7.912727-63.301818z m126.557091-41.565091c0-5.911273 0-5.911273-5.911273-5.911272-13.824-1.954909-27.648 0-43.566545 0 5.911273 55.389091 9.867636 108.823273 15.918545 162.210909h35.514182v-5.911273c0-49.477818 0-98.955636-1.954909-150.341818z m447.162182 96.954182c0-31.557818-2.094545-63.301818-2.094546-96.954182 0-5.911273 0-5.911273-5.911272-5.911272-13.824-1.954909-29.602909 0-43.426909 0 5.911273 55.389091 9.867636 108.823273 15.825454 162.210909h35.607273v-3.956364a259.537455 259.537455 0 0 0 0-55.389091zM336.151273 456.424727c1.954909 11.822545 3.956364 25.786182 3.956363 37.608728l1.954909 2.001454c5.911273 0 13.824 0 19.87491-2.001454 0-7.912727-2.094545-13.777455-2.094546-19.828364-2.001455-13.824-2.001455-25.693091-3.956364-39.470546l-1.954909-2.001454a40.354909 40.354909 0 0 0-21.736727 0v3.956364c3.956364 7.912727 3.956364 13.824 3.956364 19.735272z m453.12 39.563637c5.911273 0 13.777455 0 19.735272-1.954909 0-7.912727-2.001455-13.777455-2.001454-21.829819-1.954909-11.822545-1.954909-25.646545-3.956364-37.469091a1.954909 1.954909 0 0 0-1.954909-2.001454 40.96 40.96 0 0 0-21.876363 0v2.001454c2.001455 19.735273 4.002909 39.470545 7.912727 59.29891 0 2.001455 2.141091 2.001455 2.141091 2.001454z m-308.642909 2.001454c0 2.001455 0 2.001455 1.954909 2.001455h19.735272v-55.389091c0-3.956364 0-3.956364-3.956363-5.957818-5.911273 0-11.822545 0-17.780364-1.954909v61.300363z m447.022545 3.956364h19.735273V442.600727l-1.954909-1.954909c-7.912727 0-13.824-2.001455-21.736728-2.001454v2.001454c0 19.735273 0 39.563636 2.001455 59.345455a1.954909 1.954909 0 0 0 1.954909 1.954909z m-595.456-3.956364c2.001455 0 2.001455-1.954909 2.001455-3.956363 0-5.911273 0-11.822545-2.001455-15.77891-1.954909-11.962182-3.956364-25.786182-5.911273-37.608727 0-2.001455 0-3.956364-3.956363-2.001454-5.911273 0-11.822545 2.001455-17.873455 2.001454 4.049455 19.735273 8.005818 41.565091 11.962182 61.300364 5.911273-1.954909 9.867636-3.956364 15.825455-3.956364z m443.112727 0a4.189091 4.189091 0 0 0 3.956364-3.956363c-2.001455-11.822545-2.001455-21.829818-3.956364-33.652364 0-5.911273-1.954909-13.824-3.956363-19.735273 0-2.001455 0-3.956364-1.954909-3.956363-5.911273 0-11.869091 1.954909-19.735273 1.954909 3.956364 19.735273 7.912727 41.611636 11.822545 61.346909 3.956364 0 9.867636 0 13.824-2.001455z m140.520728 3.956364l1.954909-1.954909v-55.389091c-1.954909-2.001455-1.954909-3.956364-3.956364-3.956364-5.911273 0-13.824 0-19.828364 1.954909 2.094545 19.735273 2.094545 41.565091 4.049455 61.300364 5.911273-1.954909 11.822545-1.954909 17.780364-1.954909z m-445.114182 0l2.001454-1.954909v-55.389091l-2.001454-2.001455c-6.050909 0-13.917091 0-19.828364 2.001455 1.954909 19.735273 1.954909 41.565091 3.956364 61.300363 5.911273-3.956364 9.867636-3.956364 15.872-3.956363z"
fill="#FFFFFF" p-id="6603"></path>
</svg></a>
</li>
<!-- 个人博客 -->
<li class="nav-item2">
<a class="nav-link" target="_blank" href="http://47.121.128.98:8090/"><svg
t="1718062815662" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1256" width="30" height="30">
<path
d="M959.59133 307.2c-4 87.2-64.8 206.6-182.8 358.2-121.8 158.4-224.8 237.6-309.2 237.6-52.2 0-96.4-48.2-132.6-144.6C264.59133 500 234.59133 348.6 176.39133 348.6c-6.8 0-30.2 14.2-70.4 42.2L63.99133 336.4c103.2-90.6 201.8-191.4 263.6-197 69.8-6.8 112.6 41 128.8 143 57.4 363 82.8 417.8 187.2 253.4 37.4-59.2 57.6-104.2 60.4-135.2 9.6-91.8-71.6-85.6-126.6-62 44-144.2 128.2-214.2 252.4-210.2 91.6 2.4 135 62.2 129.8 178.8z"
fill="#2c2c2c" p-id="1257"></path>
</svg></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 模块 3 作品-->
<section class="layer-4 layer4" id="zuopin" name="zuopin">
<div class="container">
<div class="title">摄影作品</div>
<div class="subtitle">Photography Works</div>
<p class="divider"></p>
<div class="gallery">
<div class="gallery-item">
<a href="/zuopin/zuopin-fg.html"><img src="annex/image/body/zp/fg/IMG_4494.jpg"
alt="风光摄影作品"></a>
<div class="description">
<a class="zplj1" href="/zuopin/zuopin-fg.html">
<div class="zpsvg"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="45"
height="45" viewBox="0 0 32 32">
<path fill="#FFFFFF"
d="M21.333 31.664c-0.071 0-0.14-0.011-0.211-0.033l-3.897-1.3h-2.451l-3.897 1.3c-0.265 0.085-0.553 0.003-0.727-0.211-0.175-0.213-0.2-0.516-0.061-0.752l2.372-4.109-1.299-6.060-8.985 2.475c-0.2 0.055-0.416 0.013-0.581-0.112-0.167-0.124-0.263-0.323-0.263-0.528v-4c0-0.208 0.099-0.409 0.267-0.531l10.448-7.835c0.504-3.204 1.52-6 3.369-9.293 0.117-0.207 0.34-0.339 0.58-0.339h0.003c0.24 0 0.461 0.129 0.58 0.336 1.855 3.265 2.751 5.727 3.367 9.289l10.453 7.841c0.168 0.125 0.267 0.323 0.267 0.531v4c0 0.205-0.097 0.407-0.263 0.528-0.167 0.128-0.383 0.164-0.581 0.112l-8.985-2.476-1.299 6.060 2.373 4.109c0.139 0.243 0.112 0.539-0.063 0.752-0.128 0.16-0.321 0.245-0.516 0.245zM14.667 28.997h2.667c0.073 0 0.143 0.013 0.211 0.033l2.333 0.779-1.623-2.812c-0.084-0.143-0.109-0.309-0.076-0.472l1.5-7c0.039-0.18 0.149-0.336 0.305-0.432 0.159-0.093 0.347-0.123 0.524-0.073l8.823 2.435v-2.795l-10.4-7.8c-0.139-0.103-0.231-0.253-0.257-0.423-0.523-3.135-1.251-5.361-2.672-8.052-1.467 2.804-2.259 5.2-2.677 8.039-0.025 0.173-0.119 0.331-0.26 0.436l-10.4 7.8v2.795l8.823-2.435c0.176-0.047 0.365-0.024 0.523 0.073 0.157 0.093 0.268 0.251 0.305 0.432l1.5 7c0.035 0.161 0.008 0.328-0.075 0.472l-1.623 2.812 2.333-0.779c0.073-0.020 0.144-0.033 0.216-0.033z">
</path>
</svg></div>
<div class="main-info">风光摄影作品</div>
<div class="extra-info">Landscape photography</div>
</a>
</div>
</div>
<div class="gallery-item">
<a href="zhengzaixie.html"><img src="annex/image/body/zp/rx/luoan/2023-04-24-214112.jpg"
alt="人像摄影作品"></a>
<div class="description">
<a class="zplj1" href="zhengzaixie.html">
<div class="zpsvg"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="45"
height="45" viewBox="0 0 32 32">
<path fill="#FFFFFF"
d="M20.572 17.633h-9.144c-4.333 0-6.531-2.2-6.531-6.531 0-6.124 4.981-11.103 11.103-11.103 6.123 0 11.101 4.98 11.101 11.103 0 6.531-4.915 6.531-6.529 6.531zM16 1.305c-5.401 0-9.796 4.392-9.796 9.796 0 4.631 2.793 5.224 5.224 5.224h9.143c2.713 0 5.224-0.632 5.224-5.224 0.001-5.403-4.392-9.796-9.795-9.796zM19.265 32h-6.531c-0.36 0-0.653-0.293-0.653-0.653v-3.917c0-0.36 0.293-0.652 0.653-0.652h6.531c0.36 0 0.652 0.293 0.652 0.652v3.917c0 0.36-0.292 0.653-0.652 0.653zM13.388 30.695h5.224v-2.612h-5.224v2.612zM22.531 13.061c-1.081 0-1.96-0.879-1.96-1.959 0-0.36-0.293-0.653-0.653-0.653s-0.652 0.293-0.652 0.653c0 1.080-0.879 1.959-1.96 1.959-1.080 0-1.959-0.879-1.959-1.959 0-0.36-0.293-0.653-0.653-0.653-0.361 0-0.653 0.293-0.653 0.653 0 1.080-0.879 1.959-1.96 1.959-1.080 0-1.959-0.879-1.959-1.959 0-0.36-0.293-0.653-0.653-0.653s-0.653 0.293-0.653 0.653c0 1.080-0.879 1.959-1.959 1.959-1.081 0-1.96-0.879-1.96-1.959h1.305c0 0.359 0.293 0.653 0.653 0.653s0.653-0.295 0.653-0.653c0-1.081 0.879-1.96 1.959-1.96s1.959 0.879 1.959 1.96c0 0.359 0.293 0.653 0.653 0.653 0.361 0 0.653-0.295 0.653-0.653 0-1.081 0.879-1.96 1.96-1.96 1.080 0 1.959 0.879 1.959 1.96 0 0.359 0.293 0.653 0.653 0.653s0.653-0.295 0.653-0.653c0-1.081 0.879-1.96 1.959-1.96 1.081 0 1.96 0.879 1.96 1.96 0 0.359 0.293 0.653 0.653 0.653s0.652-0.295 0.652-0.653c0-1.081 0.879-1.96 1.96-1.96 1.080 0 1.959 0.879 1.959 1.96h-1.305c0-0.36-0.293-0.653-0.652-0.653-0.361 0-0.653 0.293-0.653 0.653 0 1.080-0.879 1.959-1.959 1.959zM12.147 27.717l-5.957-12.158 1.173-0.575 5.957 12.158-1.173 0.575zM19.85 27.719l-1.167-0.581 6.121-12.297 1.167 0.581-6.121 12.297zM14.175 27.935l-1.428-10.449 1.295-0.177 1.428 10.449-1.295 0.177zM17.917 27.519l-1.296-0.176 1.417-10.452 1.296 0.176-1.417 10.452z">
</path>
</svg></div>
<div class="main-info">人像摄影作品</div>
<div class="extra-info">Portrait photography</div>
</a>
</div>
</div>
</div>
</div>
</section>
<div id="jinliyurongyu" name="jinliyurongyu" style="width: 10px; height: 25px;"></div>
<!-- 模块 4 经历与荣誉-->
<section class="layer-5 layer5">
<div class="experience-honors">
<div class="main2">
<h1>个人经历与荣誉</h1>
</div>
<div class="timeline2">
<div class="column2">
<div class="title2">
<h1> 2022年 </h1>
<h2>2022年</h2>
</div>
<div class="description2">
<p>
2022学年第一学期荣获“勤奋好学之心”称号<br>
2022学年第二学期荣获“职业体验日”志愿者证书<br>
2022学年第二学期荣获“校三好学生”称号<br>
2022学年第二学期荣获“校优秀志愿者”称号
</p>
</div>
</div>
<div class="column2">
<div class="title2">
<h1> 2023年 </h1>
<h2>2023年</h2>
</div>
<div class="description2">
<p>
2023学年第一学期荣获“东方绿舟国防教育”优秀营员称号<br>
2023学年第一学期荣获“校优秀团员”称号<br>
2023学年第一学期荣获“校优秀学生会干部”称号<br>
2023年11月荣获“2023年上海市青少年模拟政协提案征集活动”纪念证书<br>
2023年12月荣获“爱上海 我讲上海故事”上海市三等奖<br>
2023年12月荣获“上海市中小学生暑期读书系列活动”长宁区二等奖<br>
2023学年第二学期荣获“校三好学生”称号<br>
2023学年第二学期荣获“校优秀团干部”称号<br>
<br>
2023年6月2日，加入光荣的中国共产主义青年团<br>
2023年9月4日，出任上海市现代职业技术学校番禺学区学生会国旗部部长<br>
2023年7月14日至22日，在四川绵阳参与防务课程训练-标准作业流程培训\全流程红蓝对抗<br>
2023年10月28日，参加2023年上海市高中阶段学校9月份初任团支部书记培训班
</p>
</div>
</div>
<div class="column2">
<div class="title2">
<h1> 2024年 </h1>
<h2>2024年</h2>
</div>
<div class="description2">
<p>
2024年8月28日，荣获2024年上海市长宁区中学生主题团日活动“优秀主题团日活动”比赛证书<br>
2024年8月28日，荣获2024年中国“互联网+”大学生创新创业大赛职教赛道（上海赛区）铜奖<br>
2024年11月20日，荣获2023~2024学年中等职业教育上海市奖学金<br>
2024年11月16日，荣获2024一带一路暨金砖国家技能发展与技术创新大赛之首届基于信创平台的软件应用与开发赛项（上海市选拔赛）银奖<br>
<br>
2024年4月12日，作为学生代表参加上海市长宁区学生联合会第十三次代表大会<br>
2024年6月27日，在上海市现代职业技术学校结业式上以学生代表身份发言<br>
2024年7月2日至4日，参加上海市长宁区马克思主义读书会<br>
2024年7月26日至29日，在印尼雅加达参与防务课程训练-手枪战斗应用射击训练\狭小空间战斗培训<br>
2024年8月27日至28日，参加上海市长宁区中学骨干训练营<br>
2024年9月2日，出任上海市现代职业技术学校番禺学区学生会执行主席<br>
</p>
</div>
</div>
</div>
</div>
<div class="calendar-widget">
<div class="calendar5">
<div class="calendar-header5">
<span class="month-picker5" id="month-picker5"> May </span>
<div class="year-picker5" id="year-picker5">
<span class="year-change5" id="pre-year5">
<pre><</pre>
</span>
<span id="year5">2020 </span>
<span class="year-change5" id="next-year5">
<pre>></pre>
</span>
</div>
</div>
<div class="calendar-body5">
<div class="calendar-week-days5">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div class="calendar-days5">
</div>
</div>
<div class="calendar-footer5">
</div>
<div class="date-time-formate5">
<div class="day-text-formate5">TODAY</div>
<div class="date-time-value5">
<div class="time-formate5">02:51:20</div>
<div class="date-formate5">23 - july - 2022</div>
</div>
</div>
<div class="month-list5"></div>
</div>
</div>
</section>
<!-- 模块 5 底部-->
<section class="layer-di layerdi" id="gongjuji" name="gongjuji">
<div class="di">
<h1 class="di-h1"><svg t="1716811595875" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="15636" width="25" height="25">
<path
d="M959.59133 307.2c-4 87.2-64.8 206.6-182.8 358.2-121.8 158.4-224.8 237.6-309.2 237.6-52.2 0-96.4-48.2-132.6-144.6C264.59133 500 234.59133 348.6 176.39133 348.6c-6.8 0-30.2 14.2-70.4 42.2L63.99133 336.4c103.2-90.6 201.8-191.4 263.6-197 69.8-6.8 112.6 41 128.8 143 57.4 363 82.8 417.8 187.2 253.4 37.4-59.2 57.6-104.2 60.4-135.2 9.6-91.8-71.6-85.6-126.6-62 44-144.2 128.2-214.2 252.4-210.2 91.6 2.4 135 62.2 129.8 178.8z"
fill="#ffffff" p-id="15637"></path>
</svg></h1>
<p class="di-p">© 2024 Vincent Cassano. 保留所有权利<br>京ICP备******号</p>
</div>
</section>
</main>
<!-- ============================== 唱片部分 ============================== -->
<!-- 唱片容器 -->
<div id="record-container">
<!-- 唱片图片 -->
<img id="record" src="annex/image/cp/changpian.png" alt="Record">
</div>
<!-- 音频元素 -->
<audio id="audio" preload="auto">
<source src="annex/Music/Low_Roar_-_Don_t_Be_So_Serious.mp3" type="audio/mpeg">
</audio>
<!-- 模态框 -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="container-mt">
<div class="left-mt image-container"><img src="annex/image/body/Mp/touxiang.jpg" width="160px"
height="160px"></div>
<div class="right-mt">
<div class="right-top-mt">念</div>
<div class="right-bottom-mt">微信号：Vincent_Cas</div>
</div>
</div>
<button type="button" class="btn" data-bs-dismiss="modal" style="color: #f5f5f5;">关闭</button>
</div>
</div>
</div>
<!-- ============================== 唱片JS代码部分 ============================== -->
<script>
// 当文档内容加载完成时执行
document.addEventListener('DOMContentLoaded', function () {
const record = document.getElementById('record'); // 获取唱片元素
const audio = document.getElementById('audio'); // 获取音频元素
let rotationDegree = 0; // 当前旋转角度
let isPaused = true; // 记录播放状态
let lastTime = 0; // 上一次播放或暂停的时间
// 设置音频音量
audio.volume = 0.4;
// 获取元素的当前旋转角度
function getRotationDegrees(element) {
const computedStyle = window.getComputedStyle(element); // 获取元素的计算样式
const transformMatrix = computedStyle.getPropertyValue('transform'); // 获取 transform 属性的值
if (transformMatrix !== 'none') {
const values = transformMatrix.split('(')[1].split(')')[0].split(',');
const a = values[0];
const b = values[1];
let angle = Math.round(Math.atan2(b, a) * (180 / Math.PI)); // 计算旋转角度
return (angle < 0) ? angle + 360 : angle; // 确保角度为正
}
return 0;
}
// 设置元素的旋转角度
function setRotation(element, degree) {
element.style.transform = `rotate(${degree}deg)`; // 设置旋转角度
}
// 在暂停动画时计算并设置当前旋转角度
function pauseAnimationAtCurrentPosition() {
const computedStyle = window.getComputedStyle(record); // 获取唱片的计算样式
const animationDuration = 6; // 动画持续时间（秒）
const elapsedTime = (new Date().getTime() - lastTime) / 1000; // 计算经过时间（秒）
const rotationOffset = (elapsedTime % animationDuration) / animationDuration * 360; // 计算旋转偏移量
rotationDegree = (rotationDegree + rotationOffset) % 360; // 更新旋转角度
setRotation(record, rotationDegree); // 设置旋转角度
record.style.animationPlayState = 'paused'; // 暂停动画
}
// 添加点击事件监听器
record.addEventListener('click', function () {
if (audio.paused) { // 如果音频已暂停
audio.play(); // 播放音频
record.style.animation = `spin 6s linear infinite`; // 应用旋转动画
record.style.animationPlayState = 'running'; // 启动动画
lastTime = new Date().getTime(); // 记录当前时间
} else { // 如果音频正在播放
audio.pause(); // 暂停音频
pauseAnimationAtCurrentPosition(); // 暂停动画并记录旋转角度
}
isPaused = !isPaused; // 切换播放状态
});
// 当音频开始播放时的处理
audio.addEventListener('play', function () {
lastTime = new Date().getTime(); // 记录当前时间
isPaused = false; // 更新播放状态
record.style.animation = `spin 6s linear infinite`; // 应用旋转动画
record.style.animationPlayState = 'running'; // 启动动画
});
// 当音频暂停时的处理
audio.addEventListener('pause', function () {
isPaused = true; // 更新播放状态
pauseAnimationAtCurrentPosition(); // 暂停动画并记录旋转角度
});
// 初始状态：播放音频并启动动画
audio.play();
record.style.animation = `spin 6s linear infinite`;
record.style.animationPlayState = 'running';
lastTime = new Date().getTime();
});
</script>
<!-- ============================== 黑神话:悟空倒计时 ============================== -->
<script>
// 设置起始日期和时间
const startDate = new Date('2024-08-20T02:00:00Z'); // Z 表示 UTC 时间
// 更新计时器函数
function updateTimer() {
// 获取当前日期和时间
const now = new Date();
// 计算当前时间与起始时间之间的差异（经过的毫秒数）
const timeDifference = now - startDate;
const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
// 更新页面上显示天数的元素
document.getElementById('days').innerText = days;
document.getElementById('hours').innerText = hours;
document.getElementById('minutes').innerText = minutes;
document.getElementById('seconds').innerText = seconds;
}
// 每秒更新一次计时器
const timerInterval = setInterval(updateTimer, 1000);
// 页面加载时立即调用一次更新函数，以确保计时器立即显示
updateTimer();
</script>
<!-- ============================== 日历部分 ============================== -->
<script>
const isLeapYear = (year) => {
return (
(year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) ||
(year % 100 === 0 && year % 400 === 0)
);
};
const getFebDays = (year) => {
return isLeapYear(year) ? 29 : 28;
};
let calendar5 = document.querySelector('.calendar5');
const month_names = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
let month_picker5 = document.querySelector('#month-picker5');
const dayTextFormate5 = document.querySelector('.day-text-formate5');
const timeFormate5 = document.querySelector('.time-formate5');
const dateFormate5 = document.querySelector('.date-formate5');
month_picker5.onclick = () => {
month_list5.classList.remove('hideonce5');
month_list5.classList.remove('hide5');
month_list5.classList.add('show5');
dayTextFormate5.classList.remove('showtime5');
dayTextFormate5.classList.add('hidetime5');
timeFormate5.classList.remove('showtime5');
timeFormate5.classList.add('hideTime5');
dateFormate5.classList.remove('showtime5');
dateFormate5.classList.add('hideTime5');
};
const generateCalendar5 = (month, year) => {
let calendar_days5 = document.querySelector('.calendar-days5');
calendar_days5.innerHTML = '';
let calendar_header_year5 = document.querySelector('#year5');
let days_of_month = [
31,
getFebDays(year),
31,
30,
31,
30,
31,
31,
30,
31,
30,
31,
];
let currentDate = new Date();
month_picker5.innerHTML = month_names[month];
calendar_header_year5.innerHTML = year;
let first_day = new Date(year, month);
for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
let day = document.createElement('div');
if (i >= first_day.getDay()) {
day.innerHTML = i - first_day.getDay() + 1;
if (i - first_day.getDay() + 1 === currentDate.getDate() &&
year === currentDate.getFullYear() &&
month === currentDate.getMonth()
) {
day.classList.add('current-date5');
}
}
calendar_days5.appendChild(day);
}
};
let month_list5 = calendar5.querySelector('.month-list5');
month_names.forEach((e, index) => {
let month = document.createElement('div');
month.innerHTML = `<div>${e}</div>`;
month_list5.append(month);
month.onclick = () => {
currentMonth5.value = index;
generateCalendar5(currentMonth5.value, currentYear5.value);
month_list5.classList.replace('show5', 'hide5');
dayTextFormate5.classList.remove('hideTime5');
dayTextFormate5.classList.add('showtime5');
timeFormate5.classList.remove('hideTime5');
timeFormate5.classList.add('showtime5');
dateFormate5.classList.remove('hideTime5');
dateFormate5.classList.add('showtime5');
};
});
(function () {
month_list5.classList.add('hideonce5');
})();
document.querySelector('#pre-year5').onclick = () => {
--currentYear5.value;
generateCalendar5(currentMonth5.value, currentYear5.value);
};
document.querySelector('#next-year5').onclick = () => {
++currentYear5.value;
generateCalendar5(currentMonth5.value, currentYear5.value);
};
let currentDate5 = new Date();
let currentMonth5 = { value: currentDate5.getMonth() };
let currentYear5 = { value: currentDate5.getFullYear() };
generateCalendar5(currentMonth5.value, currentYear5.value);
const todayShowTime5 = document.querySelector('.time-formate5');
const todayShowDate5 = document.querySelector('.date-formate5');
const currshowDate = new Date();
const showCurrentDateOption = {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long',
};
const currentDateFormate = new Intl.DateTimeFormat(
'en-US',
showCurrentDateOption
).format(currshowDate);
todayShowDate5.textContent = currentDateFormate;
setInterval(() => {
const timer = new Date();
const option = {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
};
const formateTimer = new Intl.DateTimeFormat('en-us', option).format(timer);
let time = `${`${timer.getHours()}`.padStart(
2,
'0'
)}:${`${timer.getMinutes()}`.padStart(
2,
'0'
)}: ${`${timer.getSeconds()}`.padStart(2, '0')}`;
todayShowTime5.textContent = formateTimer;
}, 1000);
</script>
</body>
</html>工具集网页gongjuji.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vincent的工具集</title>
<link rel="icon" type="image/png" href="annex/image/logo/vimeo-v-blue.png">
<!-- ============================== CSS引入 ============================== -->
<link rel="stylesheet" href="css/daohang-kuangjia.css">
<link rel="stylesheet" href="css/shouye-jianjie.css">
<link rel="stylesheet" href="css/zuoping-jinli.css">
<link rel="stylesheet" href="css/gongjuji.css">
<link rel="stylesheet" href="css/changpian.css">
<!-- ============================== Bootstrap5引入 ============================== -->
<div>
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
</div>
<style>
/* 全局样式 */
body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
/* 设置导航栏背景透明并置于顶层 */
.navbar-custom {
background-color: transparent !important;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
padding: 8px;
padding-left: 12px;
font-size: 1.3rem;
/* 设置很大的字体大小 */
text-shadow:
-1px -1px 0 #f5f5f5,
1px -1px 0 #f5f5f5,
-1px 1px 0 #f5f5f5,
1px 1px 0 #f5f5f5;
/* 多重阴影实现1px的白色描边效果 */
}
</style>
</head>
<body>
<!-- ============================== 导航部分 ============================== -->
<!-- 导航 -->
<div>
<nav class="navbar navbar-expand-lg bg-transparent navbar-custom dh">
<div class="container-fluid">
<a class="navbar-brand" href="http://47.121.128.98:8090/">
<svg t="1717370979436" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1249" width="26" height="26">
<path
d="M959.59133 307.2c-4 87.2-64.8 206.6-182.8 358.2-121.8 158.4-224.8 237.6-309.2 237.6-52.2 0-96.4-48.2-132.6-144.6C264.59133 500 234.59133 348.6 176.39133 348.6c-6.8 0-30.2 14.2-70.4 42.2L63.99133 336.4c103.2-90.6 201.8-191.4 263.6-197 69.8-6.8 112.6 41 128.8 143 57.4 363 82.8 417.8 187.2 253.4 37.4-59.2 57.6-104.2 60.4-135.2 9.6-91.8-71.6-85.6-126.6-62 44-144.2 128.2-214.2 252.4-210.2 91.6 2.4 135 62.2 129.8 178.8z"
fill="#8a8a8a" p-id="1250"></path>
</svg>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-black-50" href="index.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link text-black-50" href="gongjuji.html">工具集</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ============================== 主要部分 ============================== -->
<main>
<!-- 模块 5 -->
<section class="layer-6 layer6" id="gongjuji" name="gongjuji">
<div>
<!-- 右侧书签 -->
<div class="youceshuqian">
</div>
<div>
<!-- 搜索框部分 -->
<div class="sousuolan">
<div class="search-container">
<form id="bingSearchForm" action="https://www.bing.com/search" method="GET" target="_blank">
<input type="text" id="searchQuery" name="q" placeholder="发现不一样的世界..." required>
<button type="submit">Bing搜索</button><span class="rounded-span">AI</span>
</form>
</div>
<script>
// 监听回车键，提交表单
document.getElementById('searchQuery').addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
document.getElementById('bingSearchForm').submit();
}
});
</script>
</div>
<!-- 链接部分 -->
<div class="lianjie">
<div class="row">
<!-- AI网站 -->
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://chatgpt.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="OpenAI出品的AI模型">ChatGPT</a></div>
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://kimi.moonshot.cn/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="Kimi国内还算不错的AI">Kimi</a></div>
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://copilot.microsoft.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="微软出品的使用GPT4模型训练的AI">Copilot</a>
</div>
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://gemini.google.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="Google出品的AI模型">Gemini</a></div>
<!-- GoogleAI -->
<!-- 搜索引擎 -->
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://www.google.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="Google搜索引擎">Google</a></div>
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://www.bing.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="微软出品的搜索引擎Bing">Bing</a></div>
<!-- 技术网站 -->
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://github.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="各种大佬开源的项目源码平台">Github</a></div>
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://www.runoob.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="零基础入门计算机技术网站">Runoob菜鸟</a></div>
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://www.w3school.com.cn/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="一个学习web前端后端的网站">W3School</a></div>
<!-- 免费图库 -->
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://www.pexels.com/zh-cn/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="免费图库">Pexels</a></div>
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://unsplash.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="免费图库">Unsplash</a></div>
<!-- 个人推荐 -->
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://www.wolai.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="本人正在使用的笔记软件">wolai</a></div>
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://www.marxists.org/chinese/index.html" target="_blank"
class="tooltip-destroy" data-toggle="tooltip" data-placement="top"
title="学习这个世界上最伟大的思想">马克思主义文库</a></div>
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://www.bilibili.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="国内知名的视频弹幕网站">bilibili</a></div>
<div class="ljk col-lg-2 col-md-3 col-sm-4 col-6 runoob-padding"><a
href="https://store.steampowered.com/" target="_blank" class="tooltip-destroy"
data-toggle="tooltip" data-placement="top" title="目前最大的游戏平台">Steam</a></div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>维护页面weihu.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抱歉！网站正在维护中！</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #3a6bff, #00c3ff, #5aff91, #d4ff5d);
background-size: 400% 400%;
animation: gradientAnimation 10s ease infinite;
font-family: Arial, sans-serif;
font-size: 2rem;
color: white;
text-align: center;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 样式部分 */
.close-button {
position: fixed;
top: 10px;
left: 10px;
background-color: #3d3d3d;
/* 红色背景 */
color: white;
/* 白色字体 */
border: none;
/* 无边框 */
padding: 11px 17px 9px 17px;
/* 内边距 */
text-align: center;
/* 文字居中 */
text-decoration: none;
/* 无下划线 */
display: inline-block;
/* 行内块 */
cursor: pointer;
/* 鼠标指针 */
border-radius: 50%;
/* 圆形边框 */
}
.close-button:hover {
background-color: #797979;
/* 悬停时的背景色 */
}
</style>
</head>
<body>
<!-- 固定在页面左上角的链接按钮 -->
<a href="index.html#jianjie" class="close-button"><svg t="1720367181329" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="972" width="22" height="22">
<path
d="M765.44 258.56c12.714667 12.731733 12.2368 34.048-0.6656 48.810667l-1.911467 2.048L560.2816 512l202.581333 202.581333c14.7456 14.7456 15.889067 37.512533 2.56 50.858667-12.714667 12.714667-34.048 12.2368-48.776533-0.6656l-2.048-1.911467L512 560.2816l-202.581333 202.581333c-14.7456 14.7456-37.512533 15.889067-50.858667 2.56-12.714667-12.714667-12.2368-34.048 0.648533-48.776533l1.928534-2.048L463.7184 512l-202.581333-202.581333c-14.7456-14.7456-15.889067-37.512533-2.56-50.858667 12.714667-12.714667 34.030933-12.2368 48.776533 0.648533l2.048 1.928534L512 463.7184l202.5984-202.581333c14.7456-14.7456 37.512533-15.889067 50.858667-2.56z"
fill="#ffffff" p-id="973"></path>
</svg></a>
抱歉！网站正在维护中！<br>╮(๑•́ ₃•̀๑)╭
</body>
</html>没有或没写或正在写zhengzaixie.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>没有人像作品!</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #3a6bff, #00c3ff, #5aff91, #d4ff5d);
background-size: 400% 400%;
animation: gradientAnimation 10s ease infinite;
font-family: Arial, sans-serif;
font-size: 2rem;
color: white;
text-align: center;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 样式部分 */
.close-button {
position: fixed;
top: 10px;
left: 10px;
background-color: #3d3d3d;
/* 红色背景 */
color: white;
/* 白色字体 */
border: none;
/* 无边框 */
padding: 11px 17px 9px 17px;
/* 内边距 */
text-align: center;
/* 文字居中 */
text-decoration: none;
/* 无下划线 */
display: inline-block;
/* 行内块 */
cursor: pointer;
/* 鼠标指针 */
border-radius: 50%;
/* 圆形边框 */
}
.close-button:hover {
background-color: #797979;
/* 悬停时的背景色 */
}
</style>
</head>
<body>
<!-- 固定在页面左上角的链接按钮 -->
<a href="index.html#zuopin" class="close-button"><svg t="1720367181329" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="972" width="22" height="22">
<path
d="M765.44 258.56c12.714667 12.731733 12.2368 34.048-0.6656 48.810667l-1.911467 2.048L560.2816 512l202.581333 202.581333c14.7456 14.7456 15.889067 37.512533 2.56 50.858667-12.714667 12.714667-34.048 12.2368-48.776533-0.6656l-2.048-1.911467L512 560.2816l-202.581333 202.581333c-14.7456 14.7456-37.512533 15.889067-50.858667 2.56-12.714667-12.714667-12.2368-34.048 0.648533-48.776533l1.928534-2.048L463.7184 512l-202.581333-202.581333c-14.7456-14.7456-15.889067-37.512533-2.56-50.858667 12.714667-12.714667 34.030933-12.2368 48.776533 0.648533l2.048 1.928534L512 463.7184l202.5984-202.581333c14.7456-14.7456 37.512533-15.889067 50.858667-2.56z"
fill="#ffffff" p-id="973"></path>
</svg></a>
没写!<br>没有人像作品!<br>╮(๑•́ ₃•̀๑)╭
</body>
</html>作品页风光1 zuopin-fg.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vincent的作风光摄影品集</title>
<!-- ============================== CSS引入 ============================== -->
<link rel="stylesheet" href="css/daohang-kuangjia.css">
<!-- ============================== Bootstrap5引入 ============================== -->
<div>
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
</div>
<style>
body {
align-items: center;
background: linear-gradient(45deg, #a73bff, #292cff, #39e8ff, #32ff4e, #d3ff32);
background-size: 300% 300%;
animation: gradientAnimation 12s ease infinite;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.qhst {
color: #ffffff;
text-decoration: none;
}
/* 设置导航栏背景透明并置于顶层 */
.navbar-custom {
background-color: transparent !important;
width: 100%;
top: 0;
padding: 8px;
padding-left: 12px;
font-size: 1.3rem;
/* 设置很大的字体大小 */
text-shadow:
-1px -1px 0 #f5f5f5,
1px -1px 0 #f5f5f5,
-1px 1px 0 #f5f5f5,
1px 1px 0 #f5f5f5;
/* 多重阴影实现1px的白色描边效果 */
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1500px;
}
.box {
flex: 1 1 calc(24%);
flex-direction: column;
justify-content: space-between;
align-items: center;
border-radius: 10px;
background-color: #fff;
margin: 30px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
height: 300px;
transition: transform 0.2s;
border: 1px solid black;
}
.box:hover {
transform: scale(1.05);
}
.box-img {
height: 230px;
overflow: hidden;
/* 隐藏超出容器的部分 */
}
.box img {
width: 100%;
height: 100%;
object-fit: cover;
/* 图片覆盖容器，可能会裁剪 */
}
.box a {
text-decoration: none;
}
.box .text {
font-size: 1.6rem;
padding: 15px;
text-align: center;
color: #333;
}
h1 {
text-align: center;
padding-top: 30px;
font-size: 54px;
}
.switch-view {
position: absolute;
top: 20px;
/* 调整按钮距离顶部的距离 */
right: 50px;
/* 将按钮靠右对齐，并设置外边距为50px */
background-color: black;
/* 黑色背景 */
color: white;
/* 白色字体 */
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
pointer-events: none;
}
.switch-view:hover {
background-color: #333;
/* 鼠标悬停时背景变深 */
}
</style>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg bg-transparent navbar-custom dh">
<div class="container-fluid">
<a class="navbar-brand" href="http://47.121.128.98:8090/">
<svg t="1717370979436" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1249" width="26" height="26">
<path
d="M959.59133 307.2c-4 87.2-64.8 206.6-182.8 358.2-121.8 158.4-224.8 237.6-309.2 237.6-52.2 0-96.4-48.2-132.6-144.6C264.59133 500 234.59133 348.6 176.39133 348.6c-6.8 0-30.2 14.2-70.4 42.2L63.99133 336.4c103.2-90.6 201.8-191.4 263.6-197 69.8-6.8 112.6 41 128.8 143 57.4 363 82.8 417.8 187.2 253.4 37.4-59.2 57.6-104.2 60.4-135.2 9.6-91.8-71.6-85.6-126.6-62 44-144.2 128.2-214.2 252.4-210.2 91.6 2.4 135 62.2 129.8 178.8z"
fill="#8a8a8a" p-id="1250"></path>
</svg>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-black-50" href="../index.html#zuopin">返回</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<h1>Vincent的作品集</h1>
<a class="qhst" href="zuopin-fg2.html"><span class="switch-view">切换视图</span></a> <!-- 切换视图按钮 -->
</div>
<div class="container">
<div class="box box1">
<a href="fg/shanghai.html">
<div class="box-img">
<img src="../annex/image/body/zp/fg/shanghai/IMG_3616.png" alt="Image 1">
</div>
<div class="text">上海</div>
</a>
</div>
<div class="box box2">
<a href="fg/changshu.html">
<div class="box-img">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021140741.jpg" alt="Image 4">
</div>
<div class="text">江苏省 • 常熟</div>
</a>
</div>
<div class="box box3">
<a href="fg/hangzhou.html">
<div class="box-img">
<img src="../annex/image/body/zp/fg/hangzhou/IMG20231125102852.jpg" alt="Image 5">
</div>
<div class="text">浙江省 • 杭州</div>
</a>
</div>
<div class="box box4">
<a href="fg/fuzhou.html">
<div class="box-img">
<img src="../annex/image/body/zp/fg/fuzhou/IMG_20240214_210151.jpg" alt="Image 6">
</div>
<div class="text">福建省 • 福州</div>
</a>
</div>
<div class="box box5">
<a href="fg/changsha.html">
<div class="box-img">
<img src="../annex/image/body/zp/fg/changsha/IMG_20240423_011135.jpg" alt="Image 7">
</div>
<div class="text">湖南省 • 长沙</div>
</a>
</div>
<div class="box box6">
<a href="fg/shenzhen.html">
<div class="box-img">
<img src="../annex/image/body/zp/fg/shenzhen/640488395-19558159.jpg" alt="Image 8">
</div>
<div class="text">广东省 • 深圳</div>
</a>
</div>
<div class="box box7">
<a href="fg/haerbin.html">
<div class="box-img">
<img src="../annex/image/body/zp/fg/haerbin/IMG_4497.png" alt="Image 9">
</div>
<div class="text">黑龙江省 • 哈尔滨</div>
</a>
</div>
<div class="box box8">
<a href="fg/xianggang.html">
<div class="box-img">
<img src="../annex/image/body/zp/fg/xianggang/mmexport1703395779480.jpg" alt="Image 10">
</div>
<div class="text">中国 • 香港</div>
</a>
</div>
<div class="box box9">
<a href="fg/xini.html">
<div class="box-img">
<img src="../annex/image/body/zp/fg/xini/1660409262591.jpg" alt="Image 11">
</div>
<div class="text">澳大利亚 • 悉尼</div>
</a>
</div>
<div class="box box10">
<div class="box-img">
<img src="../annex/image/body/Mp/1.jpg" alt="Image 12">
</div>
<div class="text">正在拍摄中...</div>
</div>
</div>
</body>
</html>作品页风光2 zuopin-fg2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vincent的作风光摄影品集</title>
<!-- ============================== CSS引入 ============================== -->
<link rel="stylesheet" href="css/daohang-kuangjia.css">
<!-- ============================== Bootstrap5引入 ============================== -->
<div>
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
</div>
<style>
.qhst {
color: #ffffff;
text-decoration: none;
}
/* 设置导航栏背景透明并置于顶层 */
.navbar-custom {
background-color: transparent !important;
width: 100%;
top: 0;
padding: 8px;
padding-left: 12px;
font-size: 1.3rem;
/* 设置很大的字体大小 */
text-shadow:
-1px -1px 0 #f5f5f5,
1px -1px 0 #f5f5f5,
-1px 1px 0 #f5f5f5,
1px 1px 0 #f5f5f5;
/* 多重阴影实现1px的白色描边效果 */
}
h1 {
text-align: center;
padding-top: 30px;
font-size: 54px;
}
.switch-view {
position: absolute;
top: 20px;
/* 调整按钮距离顶部的距离 */
right: 50px;
/* 将按钮靠右对齐，并设置外边距为50px */
background-color: black;
/* 黑色背景 */
color: white;
/* 白色字体 */
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.switch-view:hover {
background-color: #333;
/* 鼠标悬停时背景变深 */
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
/* IE 10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE 10 */
flex-wrap: wrap;
--bs-gutter-x: 0rem;
margin-top: 28px;
padding: 0 14px;
height: 14000px;
}
/* Create two equal columns that sits next to each other */
.column {
-ms-flex: 50%;
/* IE 10 */
flex: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
.didian {
background-color: rgb(95, 95, 95);
/* 设置背景颜色为黑色 */
color: white;
/* 设置字体颜色为白色 */
font-size: 18px;
/* 设置字体大小 */
padding-left: 4px;
padding-right: 4px;
padding-top: 3px;
padding-bottom: 3px;
/* 内边距，确保内容不会贴边 */
/* 使元素的尺寸适应内容 */
top: 2px;
display: none;
width: auto;
text-align: center;
}
.zptp:hover+.didian {
display: block;
}
.dibulan {
width: 100%;
height: 20vh;
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
}
.di {
color: #fff;
/* 文字颜色 */
background-color: #3f3f3f;
display: grid;
text-align: center;
place-items: center;
/* 使内容居中 */
}
</style>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg bg-transparent navbar-custom dh">
<div class="container-fluid">
<a class="navbar-brand" href="http://47.121.128.98:8090/">
<svg t="1717370979436" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1249" width="26" height="26">
<path
d="M959.59133 307.2c-4 87.2-64.8 206.6-182.8 358.2-121.8 158.4-224.8 237.6-309.2 237.6-52.2 0-96.4-48.2-132.6-144.6C264.59133 500 234.59133 348.6 176.39133 348.6c-6.8 0-30.2 14.2-70.4 42.2L63.99133 336.4c103.2-90.6 201.8-191.4 263.6-197 69.8-6.8 112.6 41 128.8 143 57.4 363 82.8 417.8 187.2 253.4 37.4-59.2 57.6-104.2 60.4-135.2 9.6-91.8-71.6-85.6-126.6-62 44-144.2 128.2-214.2 252.4-210.2 91.6 2.4 135 62.2 129.8 178.8z"
fill="#8a8a8a" p-id="1250"></path>
</svg>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-black-50" href="../index.html#zuopin">返回</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- 标题和切换视图的按钮 -->
<div>
<h1>Vincent的作品集</h1>
<a class="qhst" href="zuopin-fg.html"><span class="switch-view">切换视图</span></a> <!-- 切换视图按钮 -->
</div>
<div class="row">
<div class="column">
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20220811_225302.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20230109_123032.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20230104_001500.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20230104_001702.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20230104_002231.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20230104_003015.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20230104_003223.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4300.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021074331.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021083707.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021094227.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021094443.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021095531.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021101310.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021101310.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021101730.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021115514.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021120206.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021120429.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021120936.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021132424.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG20231125102852.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG20231125144814.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG20231125144832.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG20231125145209.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG20231125150946.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5776.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG20231125152305.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG20231125152544.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG20231125154908.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20231201_220905.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20231201_221056.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG20231125155219.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
</div>
<div class="column">
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20230109_122129.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20220811_225752.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20230109_123437.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4190.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20230119_210839.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4294.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4296.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4301.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021133208.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021133407.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021133534.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021133826.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021134011.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021134020.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021134123.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021134245.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021140659.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021140741.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021141200.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021142546.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021131742.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20220930_123016.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20220930_143708.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20230227_205544.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20230227_211413.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20230228_205859.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20230228_211325.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20231201_220515.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20231201_220657.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5680.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
</div>
<div class="column">
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4175.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4178.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4182.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_20230109_123950.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4198.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4295.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4304.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai//IMG_4424.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022100327.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022100630.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022101014.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022101239.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022101650.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022103153.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022103225.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022110807.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20231201_221342.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20231201_221544.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20231201_221742.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20231201_222027.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20231201_222303.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20231201_222541.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_20240613_115332.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_4705.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5682.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5685.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
</div>
<div class="column">
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4215.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4292.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_3616.PNG" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4201.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4299.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4399.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4378.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/shanghai/IMG_4379.jpg" width="100%">
</div>
<div class="didian">上海</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022100957.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022104019.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022100514.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021132529.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021132859.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021133112.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231021185431.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022100152.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022101848.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/changshu/IMG20231022111120.jpg" width="100%">
</div>
<div class="didian">江苏省 • 常熟</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5733.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5750.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5761.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5766.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5768.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5774.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
<div class="zptp">
<img src="../annex/image/body/zp/fg/hangzhou/IMG_5785.jpg" width="100%">
</div>
<div class="didian">浙江省 • 杭州</div>
</div>
</div>
<div class="dibulan">
<h1>懒得填充了. . .</h1>
<div class="di">
<h1 class="di-h1"><svg t="1716811595875" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="15636" width="25" height="25">
<path
d="M959.59133 307.2c-4 87.2-64.8 206.6-182.8 358.2-121.8 158.4-224.8 237.6-309.2 237.6-52.2 0-96.4-48.2-132.6-144.6C264.59133 500 234.59133 348.6 176.39133 348.6c-6.8 0-30.2 14.2-70.4 42.2L63.99133 336.4c103.2-90.6 201.8-191.4 263.6-197 69.8-6.8 112.6 41 128.8 143 57.4 363 82.8 417.8 187.2 253.4 37.4-59.2 57.6-104.2 60.4-135.2 9.6-91.8-71.6-85.6-126.6-62 44-144.2 128.2-214.2 252.4-210.2 91.6 2.4 135 62.2 129.8 178.8z"
fill="#ffffff" p-id="15637"></path>
</svg></h1>
<p class="di-p">© 2024 Vincent Cassano. 保留所有权利<br>京ICP备******号</p>
</div>
</div>
</body>
</html>css文件
唱片机changpian.css
/* ============================== 唱片机部分 ============================== */
/* 唱片容器样式 */
#record-container {
position: fixed;
bottom: 15px;
right: 15px;
width: 80px;
height: 80px;
}
/* 唱片图片样式 */
#record {
width: 100%;
height: 100%;
cursor: pointer;
-webkit-user-drag: none;
}
/* 定义旋转动画 */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 应用旋转动画，初始状态为暂停 */
#record.spin {
animation: spin 6s linear infinite;
animation-play-state: paused;
}导航框架daohang-kuangjia.css
/* ============================== 导航部分 ============================== */
/* 导航外边距 */
#daohangmargin {
margin-left: 15px;
}
.nav-item {
padding-left: 14px;
}
/* 导航栏文字加粗 */
.navbar-custom .nav-link {
font-weight: bold;
}
/* ============================== 主要部分 ============================== */
/* 主容器样式 */
.main {
position: relative;
width: 100%;
overflow: hidden;
z-index: 1;
margin-top: 60px;
/* 调整为导航栏高度，避免内容被覆盖 */
}
/* 堆叠层级 */
.layer {
position: relative;
width: 100%;
height: 110vh;
/* 占据整个视口高度 */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
/* 文字颜色 */
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
/* 图片填充样式 */
.layer1 {
background-image: url('../annex/image/body/1.png');
}
.layer2 {
background-color: rgba(0, 0, 0, 0.97);
background-image: url('../annex/image/hshwkdjs/img_bg_introduce_1_b.png');
}
.layer-3 {
position: relative;
width: 100%;
height: 110vh;
/* 占据整个视口高度 */
overflow: hidden;
justify-content: center;
align-items: center;
color: #ffffff;
/* 文字颜色 */
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.layer-4 {
position: relative;
width: 100%;
height: 110vh;
/* 占据整个视口高度 */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.layer4 {
background-color: #f5f5f5;
/* 白色 */
}
.layer-5 {
position: relative;
width: 100%;
height: 130vh;
/* 占据整个视口高度 */
overflow: hidden;
justify-content: center;
align-items: center;
display: flex;
}
.layer5 {
background-color: #f5f5f5;
}
.layer-6 {
position: relative;
width: 100%;
height: 100vh;
/* 占据整个视口高度 */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
/* 文字颜色 */
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.layer6 {
background-color: #f5f5f5;
}
.layer-di{
position: relative;
width: 100%;
height: 14vh;
/* 占据整个视口高度 */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
/* 文字颜色 */
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.layerdi {
background-color: #3f3f3f;
}
/* 模块内容样式 */
.content {
position: absolute;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
/* 模块内容h1样式 */
.content-h1 {
font-size: 3rem;
/* 设置很大的字体大小 */
margin: 0;
margin-bottom: 10px;
}
/* 模块内容p样式 */
.content-p {
font-size: 2rem;
/* 设置很大的字体大小 */
margin: 0;
}工具集gongjuji.css
/* ============================== 工具集部分 ============================== */
.search-container {
text-align: center;
margin-bottom: 80px;
}
#searchQuery {
padding: 10px;
width: 300px;
margin-right: 8px;
}
#bingSearchForm button {
padding: 10px 20px;
cursor: pointer;
}
.lianjie {
width: 1000px;
margin: 25px;
padding: 10px;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ljk {
margin: 15px;
}
.ljk a {
text-decoration: none;
color: rgb(0, 0, 0);
display: block;
/* 让链接块级显示，方便设置边框和背景 */
border: 1px solid #ccc;
/* 边框颜色和宽度 */
border-radius: 10px;
/* 圆角半径 */
background-color: #fafafa;
/* 背景颜色 */
padding: 10px;
/* 内边距 */
text-align: center;
/* 文本居中 */
text-decoration: none;
/* 移除默认下划线 */
color: #000;
/* 文字颜色 */
transition: background-color 0.3s;
/* 背景颜色变化的过渡效果 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ljk a:hover {
background-color: #e6e6e6;
/* 悬停时背景颜色 */
}
.rounded-span {
margin-left: 6px;
display: inline-block;
/* 让span成为内联块元素 */
background-color: rgb(0, 0, 0);
/* 背景颜色 */
border-radius: 10px;
/* 圆角半径 */
padding: 2px 5px;
/* 内边距 */
font-weight: bold;
/* 字体加粗 */
color: rgb(255, 255, 255);
/* 文字颜色 */
}
.zplj1 {
text-decoration:none;
color: #ffffff;
}
.zplj1:hover {
color: #d3fffe;
}
黑神话：悟空hshwk.css
.yklogo {
bottom: 320px;
left: 1160px;
}
.yklogo1 {
margin-left: 60px;
}
.yklogo2 {
margin-top: 40px;
margin-left: 140px;
}
.djs {
font-size: 2.0rem;
position: absolute;
left: 10.5rem;
}
.djs p {
font-size: 3.2rem;
margin-top: 40px;
font-weight: bold;
font-family: Arial, Helvetica, serif;
}
.countdown {
width: 400px;
display: flex;
font-weight: bold;
justify-content: center;
align-items: center;
text-align: center;
font-size: 2em;
background: #333;
color: #fff;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
display: flex;
gap: 15px;
}
.countdown div {
display: flex;
flex-direction: column;
align-items: center;
}
.label {
font-size: 0.5em;
margin-top: 5px;
}首页和简介shouye-jianjie.css
/* ============================== 名片部分 ============================== */
.bjdhb {
margin: 0px;
width: 100%;
height: 1055px;
z-index: -1;
}
.text {
color: #fff;
font-size: 30px;
/* 字间距 */
letter-spacing: 15px;
}
/* 定义动画 */
@keyframes bgAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.shell {
width: 780px;
height: 580px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.45);
z-index: 1;
box-shadow: 0 0 20px 20px #7c7c7c46;
border-radius: 20px;
}
.head {
height: 310px;
position: relative;
overflow: hidden;
z-index: 1;
border-radius: 20px;
}
.head::before {
content: '';
width: 100%;
height: 90%;
position: absolute;
background: url("../annex/image/body/Mp/1.jpg");
background-size: cover;
z-index: -1;
transform: skewY(-4deg);
transform-origin: 0 0;
}
.cover {
position: absolute;
top: 130px;
left: 25px;
width: 220px;
z-index: 2;
border-radius: 500px;
border: 10px #fff solid;
box-shadow: 0 5px 10px #00000065;
}
.data {
padding: 130px 0 0 280px;
text-shadow: 0 0 20px #000;
}
.data .title1 {
color: white;
font-size: 50px;
font: 900 50px '';
margin-bottom: 5px;
position: relative;
}
.data .title1 span {
position: absolute;
top: 17px;
margin-left: 12px;
background: #ffe44c;
border-radius: 5px;
color: #000000;
font-size: 14px;
padding: 0px 4px;
}
.data .title2 {
color: #fff;
font: 500 24px '';
}
.foot {
line-height: 26px;
color: #444;
}
.tags {
padding-left: 32px;
padding-top: 80px;
width: 250px;
float: left;
text-align: center;
}
.tag {
background: rgb(149, 178, 255);
color: #fff;
border-radius: 10px;
padding: 3px 8px;
font-size: 14px;
margin-right: 4px;
line-height: 35px;
cursor: pointer;
}
.tag:hover {
background: #eee4ad;
color: #444;
}
.introduce {
padding-left: 35px;
width: 480px;
float: left;
}
.lianxifangshi {
margin-left: 30px;
}
/* 模块内容样式 */
.di {
position: absolute;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
/* 模块内容h1样式 */
.di-h1 {
margin: 0;
margin-bottom: 10px;
}
/* 模块内容p样式 */
.di-p {
font-size: 1rem;
/* 设置很大的字体大小 */
margin: 0;
}
.modal-content{
border-radius: 35px;
overflow: hidden; /* 确保子元素的背景不会超出容器的边界 */
background-color: rgb(37, 37, 37); /* 容器背景色，用于显示圆角效果 */
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* 添加阴影 */
color: #f5f5f5;
}
.container-mt {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
display: flex;
width: 498px;
height: 260px;
}
.left-mt {
flex: 0.6;
display: flex;
justify-content: center;
align-items: center;
margin-left: 15px ;
}
.right-mt {
flex: 1;
display: flex;
flex-direction: column;
padding-left: 25px ;
}
.right-top-mt, .right-bottom-mt {
flex: 1;
}
.right-top-mt {
font-size: 2.8rem;
margin-bottom: 15px;
}
.image-container {
width: 100%; /* 图片容器宽度100% */
display: flex;
justify-content: center;
align-items: center;
padding: 10px; /* 图片容器内边距 */
box-sizing: border-box; /* 保证padding不影响宽度 */
}
.image-container img {
max-width: 100%;
height: auto;
border-radius: 25px; /* 图片圆角 */
border: 2px solid white; /* 白色2px边框 */
}作品和经历zuoping-jinli.css
/* ============================== 作品部分 ============================== */
.dh {
margin: 0px;
width: 100%;
height: 70px;
/* 设置高度 */
background: rgba(255, 255, 255, 0.2);
/* 半透明背景 */
backdrop-filter: blur(10px);
/* 模糊效果 */
}
.container {
height: 1060px;
text-align: center;
padding: 60px 0;
}
.title {
margin-top: 40px;
font-size: 68px;
font-weight: bold;
}
.subtitle {
font-size: 18px;
color: #777;
margin-bottom: 30px;
}
.gallery {
display: flex;
justify-content: center;
gap: 45px;
flex-wrap: wrap;
}
.gallery-item {
position: relative;
width: 620px;
height: 650px;
overflow: hidden;
border-radius: 18px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.description {
position: absolute;
font-size: 32px;
bottom: 0;
width: 100%;
color: #ffffff;
text-align: center;
padding: 10px 0;
transition: transform 0.3s;
text-align: left;
/* 将文字靠左对齐 */
padding: 10px 15px;
/* 添加内边距 */
}
.description .extra-info {
margin-top: 10px;
font-size: 22px;
opacity: 0;
transition: opacity 0.3s;
}
.gallery-item:hover {
transform: translateY(-10px);
}
.gallery-item:hover .description {
transform: translateY(-10px);
}
.gallery-item:hover .description .extra-info {
opacity: 1;
}
/* 媒体查询：页面宽度小于1480px时，将画廊布局变为2*2 */
@media (max-width: 1470px) {
.gallery {
flex-direction: row;
align-items: center;
}
.gallery-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.gallery-item {
width: 45%;
margin-bottom: 20px;
}
.layer-4 {
position: relative;
width: 100%;
height: 150vh;
/* 占据整个视口高度 */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
/* 文字颜色 */
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
}
/* 自定义分割线样式 */
.divider {
height: 2px;
background-color: #dcdcdc;
margin: 20px 0;
width: 80%;
margin-top: 30px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
}
.zpsvg {
margin-bottom: 15px;
}
/* ============================== 个人经历与荣誉部分 ============================== */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
* {
padding: 0;
margin: 0;
position: relative;
}
.timeline2 {
padding: 40px 0px;
width: 80%;
margin-left: 10%;
margin-bottom: 40px;
}
.timeline2:before {
content: "";
position: absolute;
top: 40px;
left: 62px;
width: 3px;
height: calc(100% - 80px);
background: #c0392b;
}
.timeline2 .column2 {
margin: 40px 40px 40px 120px;
}
.timeline2 .column2 .title2 h1 {
font-size: 120px;
color: rgba(0, 0, 0, 0.1);
font-family: serif;
letter-spacing: 3px;
font-weight: 500;
}
.timeline2 .column2 .title2 h1:before {
content: "";
position: absolute;
left: -62px;
top: 86px;
width: 10px;
height: 10px;
background: #fff;
border: 3px solid #c0392b;
}
.timeline2 .column2 .title2 h2 {
margin-top: -60px;
font-size: 33px;
font-weight: 600;
}
.timeline2 .column2 .description2 p {
font-size: 18px;
line-height: 20px;
margin-left: 20px;
margin-top: 10px;
font-family: serif;
}
.timeline2 .column2 .description2 {
border-left: 1px solid #000;
}
.main2 {
width: 80%;
margin-left: 10%;
margin-top: 80px;
}
.main2 h1 {
font-size: 80px;
line-height: 60px;
font-weight: 700;
/* 等同于bold */
}
.main2 p {
font-size: 13px;
line-height: 20px;
font-family: serif;
text-align: right;
font-weight: 500;
}
/* ============================== 个人经历与荣誉日历部分 ============================== */
:root {
--dark-text: #f8fbff;
--light-body: #f3f8fe;
--light-main: #fdfdfd;
--light-second: #c3c2c8;
--light-hover: #f0f0f0;
--light-text: #151426;
--light-btn: #9796f0;
--blue: #0000ff;
--white: #fff;
--shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
--font-family: consolas;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.contianer5 {
width: max-content;
height: max-content;
position: relative;
display: flex;
padding: 2% 0px 0px 0px;
justify-content: center;
top: 10%;
right: 0%;
width: 100%;
height: 100%;
}
.calendar5 {
height: 610px;
width: max-content;
background-color: white;
border-radius: 25px;
overflow: hidden;
padding: 30px 50px 0px 50px;
}
.calendar5 {
box-shadow: var(--shadow);
}
.calendar-header5 {
background: #9796f0;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
color: var(--white);
padding: 10px;
}
.calendar-body5 {
pad: 10px;
}
.calendar-week-days5 {
display: grid;
grid-template-columns: repeat(7, 1fr);
font-weight: 600;
cursor: pointer;
color: rgb(104, 104, 104);
}
.calendar-week-days5 div:hover {
color: black;
transform: scale(1.2);
transition: all .2s ease-in-out;
}
.calendar-week-days5 div {
display: grid;
place-items: center;
color: var(--bg-second);
height: 50px;
}
.calendar-days5 {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
color: var(--color-txt);
}
.calendar-days5 div {
width: 37px;
height: 33px;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
position: relative;
cursor: pointer;
animation: to-top 1s forwards;
}
.month-picker5 {
padding: 5px 10px;
border-radius: 10px;
cursor: pointer;
}
.month-picker5:hover {
background-color: var(--color-hover);
}
.month-picker5:hover {
color: var(--color-txt);
}
.year-picker5 {
display: flex;
align-items: center;
}
.year-change5 {
height: 30px;
width: 30px;
border-radius: 50%;
display: grid;
place-items: center;
margin: 0px 10px;
cursor: pointer;
}
.year-change5 pre {
margin-bottom: 1px;
}
.year-change5:hover {
background-color: var(--light-btn);
transition: all .2s ease-in-out;
transform: scale(1.12);
}
.year-change5:hover pre {
color: var(--bg-body);
margin-bottom: 0px;
}
.calendar-footer5 {
padding: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
}
#year:hover {
cursor: pointer;
transform: scale(1.2);
transition: all 0.2 ease-in-out;
}
.calendar-days5 div span {
position: absolute;
}
.calendar-days5 div:hover {
transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
background-color: #fbc7d4;
border-radius: 20%;
color: var(--dark-text);
}
.calendar-days5 div.current-date5 {
color: var(--dark-text);
background-color: var(--light-btn);
border-radius: 20%;
}
.month-list5 {
position: relative;
left: 0;
top: -50px;
background-color: #ebebeb;
color: var(--light-text);
display: grid;
grid-template-columns: repeat(3, auto);
gap: 5px;
border-radius: 20px;
}
.month-list5>div {
display: grid;
place-content: center;
margin: 5px 10px;
transition: all 0.2s ease-in-out;
}
.month-list5>div>div {
border-radius: 15px;
padding: 10px;
cursor: pointer;
}
.month-list5>div>div:hover {
background-color: var(--light-btn);
color: var (--dark-text);
transform: scale(0.9);
transition: all 0.2s ease-in-out;
}
.month-list5.show5 {
visibility: visible;
pointer-events: visible;
transition: 0.6s ease-in-out;
animation: to-left 0.71s forwards;
}
.month-list5.hideonce5 {
visibility: hidden;
}
.month-list5.hide5 {
animation: to-right 1s forwards;
visibility: none;
pointer-events: none;
}
.date-time-formate5 {
width: max-content;
height: max-content;
font-family: Dubai Light, Century Gothic;
position: relative;
display: inline;
top: 140px;
justify-content: center;
}
.day-text-formate5 {
font-family: Microsoft JhengHei UI;
font-size: 1.4rem;
padding-right: 5%;
border-right: 3px solid #9796f0;
position: absolute;
left: -1rem;
}
.date-time-value5 {
display: block;
height: max-content;
width: max-content;
position: relative;
left: 40%;
top: -18px;
text-align: center;
}
.time-formate5 {
font-size: 1.5rem;
}
.time-formate5.hideTime5 {
animation: hidetime 1.5s forwards;
}
.day-text-formate5.hidetime5 {
animation: hidetime 1.5s forwards;
}
.date-formate5.hideTime5 {
animation: hidetime 1.5s forwards;
}
.day-text-formate5.showtime5 {
animation: showtime 1s forwards;
}
.time-formate5.showtime5 {
animation: showtime 1s forwards;
}
.date-formate5.showtime5 {
animation: showtime 1s forwards;
}
@keyframes to-top {
0% {
transform: translateY(0);
opacity: 0;
}
100% {
transform: translateY(100%);
opacity: 1;
}
}
@keyframes to-left {
0% {
transform: translatex(230%);
opacity: 1;
}
100% {
transform: translatex(0);
opacity: 1;
}
}
@keyframes to-right {
10% {
transform: translatex(0);
opacity: 1;
}
100% {
transform: translatex(-150%);
opacity: 1;
}
}
@keyframes showtime {
0% {
transform: translatex(250%);
opacity: 1;
}
100% {
transform: translatex(0%);
opacity: 1;
}
}
@keyframes hidetime {
0% {
transform: translatex(0%);
opacity: 1;
}
100% {
transform: translatex(-370%);
opacity: 1;
}
}
@media (max-width:375px) {
.month-list5>div {
margin: 5px 0px;
}
}
.experience-honors {
width: 65%;
/* 其他样式 */
}
.calendar-widget {
width: 30%;
/* 其他样式 */
}
本文是原创文章，采用 CC BY-NC-ND 4.0 协议，完整转载请注明来自 Vincent Cassano
