创意建站：揭秘建站过程中一些效果的实现

站点大部分修改已完成，后续可能不再大的更新了，建站时候学习到了很多漂亮的效果，分享给大家。我并不是专业学习前端的，只作为兴趣爱好，不到位的地方欢迎指导共同学习。

SVG抖动动画

• 相关代码 点击展开查看

  <svg class="shaking-svg" style="overflow:visible" ...>...</svg>
  

  @keyframes shake {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  .shaking-svg {
    top: -11px;
    left: 15px;
    position: absolute;
    animation: shake 1.5s infinite;
  }
  

关于页面可拖动布局——Muuri 创建响应式、可排序、可过滤和可拖动的布局

• 相关代码 点击展开查看

  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-7-M/muuri/0.9.5/muuri.min.js"></script>
  <div class="grid">
    <div class="item">
      <div class="item-content">长按鼠标可拖动排序</div>
    </div>
    <div class="item">
      <div class="item-content">1</div>
    </div>
    <div class="item">
      <div class="item-content">5</div>
    </div>
    <div class="item">
      <div class="item-content">6</div>
    </div>
  </div>
  
  <style>
  .actions {
    margin: 5px;
  }
  .grid {
    position: relative;
  }
  .item {
    position: absolute;
    width: 200px;
    height: 200px;
    line-height: 200px;
    margin: 5px;
    z-index: 1;
  }
  
  .item.muuri-item-hidden {
    z-index: 0;
  }
  .item.muuri-item-releasing {
    z-index: 2;
  }
  .item.muuri-item-dragging {
    z-index: 3;
  }
  .item-content {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: var(--tw-prose-invert-gx);
    font-size: 16px;
    cursor: pointer;
  }
  </style>
  
   <script>
    var grid = new Muuri('.grid', {
    dragEnabled: true
  });
   </script>
  

twikoo评论首页顶部评论

说明：twikoo已更新单页面获取评论的方式详细参考官网，已经不用筛选了。（12.30）这个是twikoo获取指定页面的评论，由于没有找到直接获取某个页面的的数据方法，目前采用的是获取最近一定数量的评论，然后筛选出某个页面的评论。

• 相关代码 点击展开查看

  <div id="loading-indicator" class="loading-indicator"></div>
  <div id="comments-container"></div>
  </div>
  <script>
  const pagePath = ''; //获取数据页面的地址................................................................
  const commentsContainer = document.getElementById('comments-container');
  const loadingIndicator = document.getElementById('loading-indicator');
  loadingIndicator.style.display = 'block';
  twikoo.getRecentComments({
    envId: '', //自己的envId.......................................................................................
    pageSize: 30,  //最新的评论数量，过少会导致无法显示或数量不够.................................................
    includeReply: false
  }).then(function (res) {
    var spaceComments = res.filter(function (comment) {
      return comment.url === pagePath;
    });
    var latestComments = spaceComments.slice(0, 5).map(function (comment) {  //显示的数量
      return comment.commentText;
    });
    loadingIndicator.style.display = 'none';
    displayAndSwitchComments(latestComments);
  }).catch(function (err) {
    loadingIndicator.style.display = 'none';
    console.error('Failed to get comments:', err);
    loadingIndicator.innerHTML = 'Failed to load comments.';
  });
  function displayAndSwitchComments(commentTexts) {
    var currentIndex = 0;
    commentTexts.forEach(function (commentText, index) {
      var commentElement = document.createElement('div');
      commentElement.className = 'comment-wrapper';
      commentElement.innerHTML = '<span style="overflow: hidden;font-size: 16px;font-weight: 800;text-overflow: ellipsis;display: -webkit-box; -webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;">' + commentText + '</span>';
      commentsContainer.appendChild(commentElement);
    });
    commentsContainer.children[currentIndex].classList.add('active');
    commentsContainer.style.display = 'block';
    setInterval(function () {
      commentsContainer.children[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % commentTexts.length;
      commentsContainer.children[currentIndex].classList.add('active');
    }, 4000);
  }
  </script>
  

其他