github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-31 16:08:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆕 添加官网动画, footer链接

Browse Source
This commit is contained in:
xujiang 2021-02-07 02:07:46 +08:00
parent 951ccebdcf
commit c9a117a80d
2 changed files with 65 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
website/css/style.css
View File

@ -205,10 +205,6 @@ p {
width: 226px;
background: #2f55ec !important;
}
.big-adaptation-img-container {
}
.big-adaptation-img-container img {
}
.gray-btn {
background: #4a547b !important;
}
@ -2330,3 +2326,57 @@ p {
font-size: 1.6rem;
}
}
.bg-wave {
position: relative;
background: linear-gradient(to bottom, #fff, #f9faff);
}
.bg-wave::before, .bg-wave::after {
content: "";
position: absolute;
left: 50%;
min-width: 300vw;
min-height: 300vw;
background-color: #fff;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.bg-wave::before {
bottom: 3vh;
border-radius: 45%;
animation-duration: 12s;
}
.bg-wave::after {
bottom: 0vh;
opacity: .5;
border-radius: 47%;
animation-duration: 12s;
}
@keyframes rotate {
0% {
transform: translate(-50%, 0) rotateZ(0deg);
}
50% {
transform: translate(-50%, -2%) rotateZ(180deg);
}
100% {
transform: translate(-50%, 0%) rotateZ(360deg);
}
}
.bg-circle::after {
content: '';
position: absolute;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 100%;
transform: translate(11px, -25px) rotate(13deg);
background: linear-gradient(160deg, #fff, #f9faff);
}

28
website/index.html
View File

@ -67,7 +67,7 @@
<section class="hero-section" data-scroll-index="0">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-lg-7 col-md-10 col-sm-12">
<div class="col-lg-6 col-md-8 col-sm-12">
<h1 class="hero-section-title wow fadeInUp" data-wow-delay="0.2s">
让H5制作，更方便
</h1>
@ -83,8 +83,8 @@
class="default-video-btn github wow fadeInUp blue-text">在线文档</a>
</div>
<!--// .col //-->
<div class="col-lg-4 text-center wow fadeInRight" style="overflow:hidden;padding:0;padding-top: 47px;">
<img src="./img/phone@2x.png" alt="Hero image" style="width: 268px; border-radius: 32px">
<div class="col-lg-6 text-center wow fadeInRight" style="overflow:hidden;padding:0;padding-top: 47px;">
<img src="./img/phone@2x.png" alt="Hero image" style="width: 542px; border-radius: 32px">
</div>
<!--// .col //-->
</div>
@ -208,8 +208,8 @@
<!--// .container //-->
</section>
<section class="services section-padding mobile-hidden" data-scroll-index="3">
<div class="container">
<section class="services section-padding mobile-hidden bg-wave" data-scroll-index="3">
<div class="container" style="position:relative; z-index: 3;">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-heading">
@ -301,7 +301,7 @@
<!--// .container //-->
</section>
<section class="services section-padding mobile-hidden" data-scroll-index="3">
<section class="services section-padding mobile-hidden bg-circle" data-scroll-index="3">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
@ -529,22 +529,16 @@
<div class="col-lg-9">
<ul class="pc-footer-menu text-center">
<li>
<a href=""> 主页</a>
<a href="/"> 主页</a>
</li>
<li>
<a href=""> 特点</a>
<a href="http://h5.dooring.cn/doc" target="_blank"> 介绍</a>
</li>
<li>
<a href=""> 介绍</a>
<a href="http://h5.dooring.cn/h5?tid=FB593DD0" target="_blank"> 合作</a>
</li>
<li>
<a href=""> 合作</a>
</li>
<li>
<a href=""> 加入</a>
</li>
<li>
<a href=""> 反馈</a>
<a href="http://h5.dooring.cn/h5?tid=A71EE8BB" target="_blank"> 反馈</a>
</li>
</ul>
<ul class="pc-footer-contact text-center">
@ -576,7 +570,7 @@
</li>
</ul>
<p class="text-center pc-footer-contact-info">
© Copyright <span id="fullYearCopyright"></span> - 徐小夕
© Copyright <span id="fullYearCopyright"></span> - H5-Dooring
<a style="margin-left:20px" href="https://beian.miit.gov.cn/#/Integrated/index"
target="_blank">鄂ICP备18024675号-3</a>
</p>