一、详细介绍
Like_Girl V5.0.0恋爱主题博客
后端使用了Ajax异步请求提交数据 配合插件提醒弹窗
二、效果展示
1.部分代码
代码如下(示例):
<script src="../Style/js/nprogress.js"></script>
<link href="../Style/css/nprogress.css" rel="stylesheet" type="text/css">
<!-- 头部导航条 -->
<div class="header-wrap">
<div class="header">
<div class="logo">
<h1><a class="alogo" href="index.php"><?php echo $text['logo'] ?></a></h1>
</div>
<div class="word">
<span class="wenan"><?php echo $text['writing'] ?></span>
</div>
</div>
</div>
<!-- 头像内容 -->
<div class="bg-wrap">
<div class="bg-img">
<div class="central central-800">
<div class="middle <?php if ($text['Animation'] == "1") { ?>animated bounce<?php } ?> <?php if ($diy['Blurkg'] == "2") { ?>Blurkg<?php } ?>">
<div class="img-male">
<img src="https://q1.qlogo.cn/g?b=qq&nk=<?php echo $text['boyimg'] ?>&s=640" alt="">
<span><?php echo $text['boy'] ?></span>
</div>
<div class="love-icon">
<img src="Style/img/like.svg" alt="">
</div>
<div class="img-female">
<img src="https://q1.qlogo.cn/g?b=qq&nk=<?php echo $text['girlimg'] ?>&s=640" alt="">
<span><?php echo $text['girl'] ?></span>
</div>
</div>
</div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"/>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"/>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"/>
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"/>
</g>
</svg>
</div>
</div>