叫啥不知道
阅:80丨共321字符丨2021-08-04

最新更新:

数据已经删掉(留着此代码为了修改代码在手机端溢出的细节)

演示站

QQ浏览器截图20210804122434.png
QQ浏览器截图20210804122434.png

代码


   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="css/style.css">

<div class="wrapper">
  <div class="book">
  <div class="book__cover">
    <div class="header-image"><div class="overlay"></div></div>
    <div class="title-wrap">
      <h1 class="article-title"><?php theme_random_posts();?></h1>
      <br>
    </div>
    <p class="book__cover-exerpt">
        <?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
      <?php _e('晚风博客 <strong>2020</strong> 年建站以来,截至 %s 在设定的 <strong>%s</strong> 个分类
和 <strong>%s</strong> 个页面中,
发布了 <strong>%s</strong> 篇文章,收到了 <strong>%s</strong> 条评论。
', date('Y年n月j日G时i分'), $stat->categoriesNum, $stat->publishedPagesNum, $stat->publishedPostsNum, $stat->publishedCommentsNum); ?><br><br>
    <nav class="meun_list">
        <center>
            <ul class="meun_ul">
         <li class="meun_li"> 
             <h3 class="title-wrap">
    <a style="text-decoration: none;color: rgba(0,0,0,.5);" href="<?php $this->options->siteUrl(); ?>">首页</a>
    <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
    <?php while($pages->next()): ?>
    <a style="text-decoration: none;color: rgba(0,0,0,.5);"<?php if($this->is('page', $pages->slug)): ?> class="current"<?php endif; ?> href="<?php $pages->permalink(); ?>" title="<?php $pages->title(); ?>"><?php $pages->title(); ?></a>
     <?php endwhile; ?>
         </ul>
                  </h3></center>  </nav>
                  
                  
      <span class="social">
      
      </span>
  
    </p>
  
  </div>
    <div class="book__content">
      <p><span class="drop-cap">📣感谢大佬光临本博客✨</p></span>
      <p>    本站建于2020年疫情期间,基于Typecho博客系统搭建,自用主题:Eliauk主题(多个主题合成)</p>
      <p></p>
      <p></p>
      <p class="sizi">一言</p>
      <p>想干就干,不要犹豫</p>
      <p>没有还行,只有更好</p>
      <p>不畏将来,不念过去</p>
      <p></p>
      <p></p>
      <p class="sizi">声明</p>
      <p>本博客文章均于日常记录,禁止以任何方式转载哦。偶尔转载会留下版权</p>
      <p>本博客文章封面图片均于来源网络,侵权请联系删除。可以在《关于》里找到邮箱联系</p>
      <p>本博客信息与资源来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。访问和下载本站内容,说明您已同意上述条款。</p>
      <p></p>
      <p></p>
      <p>
      <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1278669764'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D1278669764%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
      </p>
    </div>
  </div>
 
</div>
   
<script src="https://cdn.jsdelivr.net/gh/wanfengba/tuping/jquery-3.3.1.js"></script>
 <script>
  "use strict";

  $('.book').on('click', function () {
    $(this).toggleClass('book--expanded');
  });
     
 </script>
<style>
p{
font-family: verdana, sans-serif;   /*字体*/
font-size: 12px;   /*字体大小*/
letter-spacing: 3pt;   /*字体间距*/
word-spacing: 2pt;   /*字体空格间距*/
line-height: 1.2;   /*行间距*/
}
.sizi{
    font-size: 20px;
}
*{
  margin: 0;
  padding: 0;
 
}
body {
  background: #f3f4f4;
  font-family: 'Roboto Condensed', sans-serif;
  overflow: hidden;    
}
.mr2 {
  margin-right: 1rem;
}
.ml2 {
  margin-left: 1rem;
}
.article-title {
  font-size: 2.5rem;
  line-height: 1;
 font-family: 'Roboto Condensed', sans-serif;
  text-align: center;
  letter-spacing: 0.025em;
  transition: font-size 0.45s ease-in-out, color 0.3s ease-out;
}
.header-image {
  height: 220px;
  background-image: url(https://cdn.jsdelivr.net/gh/wanfengba/tuping/usr/uploads/2021/08/740236281.png);
  background-size: cover;
  background-position: center;
  margin-bottom: 3rem;
  position: relative;
  transition: all 0.45s ease-in-out;
}
.overlay {
  transition: all 0.3s ease-in-out;
  background: ;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.title-wrap {
  transform: translateY(0);
  transition: transform 0.45s ease-in;
}
.drop-cap {
  font-size: 25px;
  line-height: 28px;
}
.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book__cover-exerpt {
  color: #6a6a6a;
  padding: 1rem 1.5rem;
  line-height: 1.6;
  text-align: center;
  opacity: 1;
  max-width: 370px;
  margin: 0 auto;
  display: block;
  transition: all 0.25s ease-in-out;
}
 
.book__cover {
  height: 100%;
  width: 100%;
}
.book__content {
  text-align: justify;
  word-wrap: break-word;
  font-size: 1.1rem;
  opacity: 0;
  transition: all 1.5s ease-in-out;
  max-width: 750px;
  margin: 0 auto 6rem;
  padding: 0 2rem;
}
.book__content p {
  line-height: 1.8;
  color: #3a3a3a;
  margin-bottom: 2.5rem;
}
.book {
  overflow: hidden;
  background: white;
  height: 580px;
  width: 400px;
  box-shadow: 0 20px 30px -10px #ccc;
  transition: all 0.5s ease-in-out;
}
.book:hover {
  box-shadow: 0 6px 50px 10px #cfcfcf;
}
.book--expanded {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}
.book--expanded .overlay {
  opacity: 0.95;
}
.book--expanded .article-title {
  color: white;
  font-size: 64px;
  letter-spacing: 0.05em;
}
.book--expanded .title-wrap {
  transform: translateY(-300px);
  color: white;
}
.book--expanded .book__cover-exerpt {
  opacity: 0;
}
.book--expanded .book__cover {
  height: 460px;
  margin-bottom: 6rem;
}
.book--expanded .book__content {
  opacity: 1;
}
.book--expanded .header-image {
  height: 100%;
}
span{
   margin-left: -35px;
}
span .fa {
   font-size: 17px;
   margin-left: 20px;
}
</style>
  
<script src="https://cdn.jsdelivr.net/gh/wanfengba/tuping/wanfeng.js"></script>
<script src="https://cdn.jsdelivr.net/gh/cy-j/chenyu/js/chenyuyj.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/cy-j/chenyu/js/layer/layer.js"></script>

有点乱,自己修改(别扒啦!需要直接说就好了😒)

QQ浏览器截图20210804122434.png
QQ浏览器截图20210804122434.png

  • 评论 (2)

    评论列表共 2 条评论

    1. 评论者头像

      看不懂OωO

      8月4日回复
      1. 评论者头像
        晚风 博主
        @大树下

        不会啊,可以对着演示站看

        8月4日回复