好看的博客归档页面

发现一个比较好看的个人博客归档页面的设计

如图

只需要一个CSS样式以及JS随后接收后台数据渲染就可以了

timeline.css

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 6px;
    margin: 0 auto;
    padding-top: 20px;
    background: #fff;
}
.timeline ul li::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) rotate(45deg);
    width: 20px;
    height: 20px;
    z-index: 2;
    background: #eee;
}
.timeline ul li div {
    position: relative;
    bottom: 0;
    width:400px;
    padding: 20px;
    background: #fff;
    box-shadow: 4px 13px 30px 1px rgba(1, 0, 56, 0.1);
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.timeline ul li div time {
    position: absolute;
    background: #f5af10;
    width: 100px;
    height: 20px;
    top: -15px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 2px;
}
.timeline ul li div div {
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.timeline ul li div div p {
    text-align: center;
}
.timeline ul li div .discovery {
    margin-right: 10px;
}
.timeline ul li:nth-of-type(odd) > div {
    left: 45px;
}
.timeline ul li:nth-of-type(even) > div {
    left: -439px;
}

.timeline ul li div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.timeline ul li:nth-of-type(odd) div {
    transform: translate3d(100px, -10px, 0) rotate(10deg);
}
.timeline ul li:nth-of-type(even) div {
    transform: translate3d(-100px, -10px, 0) rotate(10deg);
}
.timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
}

@media screen and (max-width: 900px) {
    .timeline ul li div {
        width: 250px;
        flex-direction: column;
    }
    .timeline ul li div div {
        width: 80%;
        margin: 10px;
    }
    .timeline ul li:nth-of-type(even) > div {
        left: -289px;
    }
}
@media screen and (max-width: 600px) {
    body {
        /*background: #8bfff4;*/
    }

    .timeline ul li {
        margin-left: 20px;
    }
    .timeline ul li div {
        width: calc(100vw - 91px);
    }
    .timeline ul li:nth-of-type(even) > div {
        left: 45px;
    }
}

timeline.js

var items = document.querySelectorAll(".timeline li");

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

function callbackFunc() {
    for (var i = 0; i < items.length; i++) {
        if (isElementInViewport(items[i])) {
            if(!items[i].classList.contains("in-view")){
                items[i].classList.add("in-view");
            }
        } else if(items[i].classList.contains("in-view")) {
            items[i].classList.remove("in-view");
        }
    }
}

window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);

archives.html

<!--时间轴内容-->
<div class="doc-container m-padded-tb-massivex m-opacity" id="doc-container">
  <th:block >
    <section class="timeline">
      <ul>

        <li class="" th:each="blog : ${blogs}">
          <div>
            <time th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020/01/01</time>
            <div class="scientist" >
              <a href="#" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}">
                <h3 class="state" style="text-align:center;font-size: 16px;color: #000;" th:text="${blog.title}">文章标题</h3>
              </a>
            </div>
          </div>
        </li>


      </ul>
    </section>
  </th:block>
</div>