Akatsuki-Misaki/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增动画效果

Browse Source
This commit is contained in:
hanasaki-misaki
2023-03-16 22:02:13 +08:00
parent bf75a049b4
commit bc87815787
9 changed files with 688 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
index.html
View File

@@ -5,9 +5,11 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Akatsuki - Word</title>
<link rel="icon" type="image/png" sizes="32x32" href="https://lolicon.team/img/images/32.ico">
<link rel="stylesheet" href="Static\mdui-v1.0.1\css\mdui.min.css">
<link rel="stylesheet" href="Static\mdui-v1.0.1\css\ui.css">
<link rel="stylesheet" href="Static\mdui-v1.0.1\css\animate.min.css">
<link rel="stylesheet" href="Static\bootstrap-4.6.2-dist\css\bootstrap.min.css">
<style>
@@ -19,14 +21,14 @@
<div>
<!--PC toolbar-->
<div class="mdui-hidden-xs-down">
<div class="mdui-hidden-lok-down">
<div class="mdui-toolbar mdui-toolbarb">
<a href="/index.html">
<div class="mdui-valign">
<div class="mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="150px">
</div>
</a>
<div class="mdui-center font-ui">
<div class="mdui-center font-ui animate__animated animate__fadeInDown">
<div class="mdui-tab" mdui-tab="">
<a href="./index.html" class="mdui-ripple mdui-tab-active">
<label>首页/home</label>
@@ -50,10 +52,10 @@
</div>
<!--mobile toolbar and menu-->
<div class="mdui-hidden-sm-up">
<div class="mdui-hidden-xm-pe">
<div class="mdui-toolbar mdui-toolbarm zhe">
<a href="/index.html">
<div class="mdui-valign">
<div class="mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="120px">
</div>
</a>
@@ -84,47 +86,83 @@
<!--pc text-->
<div class="mdui-hidden-xs-down zhe "style="height:1000vh">
<div class="mdui-container" >
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" style="margin-bottom: 15px;">
<div class="mdui-hidden-xs-down zhe " style="height:200vh">
<div class="mdui-container">
<div id="carouselExampleCaptions" class="carousel slide banner animate__animated animate__fadeInRight" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" style="border-radius: 15px;">
<div class="carousel-item active">
<img src="https://img-cdn-cos.lolicon.team/1/2023/03/14/1x64107d5d0a8e0.webp/all70" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color: black;"><strong>Akatsuki - Word</strong></h5>
<p style="color: black;"><strong>人类从来没有资格评定好坏，所谓对错会随着时间所变动.</strong></p>
<div class="carousel-item active">
<img src="https://img-cdn-cos.lolicon.team/1/2023/03/14/1x64107d5d0a8e0.webp/all70"
class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color: black;"><strong>Akatsuki - Word</strong></h5>
<p style="color: black;"><strong>人类从来没有资格评定好坏，所谓对错会随着时间所变动.</strong></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://img-cdn-cos.lolicon.team/1/2023/03/14/1x64107d3d4501c.webp/all70" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color: black;"><strong>Akatsuki - Word</strong></h5>
<p style="color: black;"><strong>生活的意义是享受当下，活出精彩人生</strong></p>
<div class="carousel-item">
<img src="https://img-cdn-cos.lolicon.team/1/2023/03/14/1x64107d3d4501c.webp/all70"
class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color: black;"><strong>Akatsuki - Word</strong></h5>
<p style="color: black;"><strong>生活的意义是享受当下，活出精彩人生</strong></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://img-cdn-cos.lolicon.team/1/2023/03/14/1x64107d2bd6872.webp/all70" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color: black;"><strong>Akatsuki - Word</strong></h5>
<p style="color: black;"><strong>我只活在当下，欣赏眼前的风景</strong></p>
<div class="carousel-item">
<img src="https://img-cdn-cos.lolicon.team/1/2023/03/14/1x64107d2bd6872.webp/all70"
class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color: black;"><strong>Akatsuki - Word</strong></h5>
<p style="color: black;"><strong>我只活在当下，欣赏眼前的风景</strong></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
<div class="c-inner">
<div class="mdui-grid-tile animate__animated animate__fadeInLeft">
<a href="javascript:;"><img src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/f04bc30c81d915d5737be92d51b698f0.jpg/wp70"/></a>
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">No Pay</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>永远不会收取费用</div>
</div>
</div>
</div>
<div class="mdui-grid-tile animate__animated animate__fadeInDown">
<a href="javascript:;"><img src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/7deacef6bf53fd727bc92cc75d7edf4e.jpg/wp70"/></a>
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Server</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>灌水服务器长期运行</div>
</div>
</div>
</div>
<div class="mdui-grid-tile animate__animated animate__fadeInRight">
<a href="javascript:;"><img src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/f9ade14f4e96052c8fee02b61b3d55ba.jpg/wp70"/></a>
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Happy house</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>学生上班族的快乐屋</div>
</div>
</div>
</div>
</div>
</div>
<!--mobile text-->
@@ -165,9 +203,13 @@
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="Static\mdui-v1.0.1\js\mdui.min.js"></script>
<script src="Static\mdui-v1.0.1\js\WOW.js"></script>
<script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>