提升网站美观:侧边栏随机一言卡片优化【修复版】

提升网站美观:侧边栏随机一言卡片优化【修复版】

温馨提示: 本文最后更新于 2025-02-02 11:30:35,某些文章具有时效性,若有错误或已失效,请在下方留言!

前言

原创作品来自星语的小木屋,许多小伙伴向我要这个小卡片,今天我对它进行了整理和优化,有需要的可以自取。

更新日志

2025-02-01

  • 已更新接口,优化了相关功能样式。

演示效果

d2b5ca33bd20250124111117

部署教程

自定义HTML

CSS

.wiui-rqyy-demo {
    width: 100%;
    height: 180px;
    position: relative;
  }

  .wiui-rqyy-item {
    width: 100%;
    height: 100%;
    padding: 5px;
    border-radius: 10px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    background-image: url(https://www.wniui.com/img/tools/yiyan/rqyy-bg-5.webp);
  }

  .wiui-rqyy-date {
    font-family: Arial, Helvetica, sans-serif;
  }

  .wiui-rqyy-day {
    font-size: 2.5rem;
    font-weight: 700;
  }

  .wiui-rqyy-month {
    font-weight: 700;
    font-size: 2rem;
  }

  .wiui-rqyy-month::before {
    content: "/";
    padding-right: 2px;
  }

  .wiui-rqyy-text {
    position: absolute;
    width: 90%;
    height: auto;
    line-height: 30px;
    font-family: "宋体";
    font-size: 1.5rem;
    font-weight: 700;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* 限制最多三行 */
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .wiiui-rqyy-yy::after {
    display: inline-block;
    content: "_";
    animation: fadeInHX 1s;
    animation-iteration-count: infinite;
  }

  @keyframes fadeInHX {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .wiui-rqyy-btn {
    display: inline-block;
    font-family: "新宋体";
    font-weight: 700;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 10px;
  }

  #wiui-yybtn {
    width: 100%;
    position: relative;
  }

  #wiui-yybtn:hover {
    color: #e99896;
  }

  #wiui-yybtn:hover>.wiui-rqyy-msg {
    visibility: unset;
  }

  .wiui-rqyy-icon {
    font-size: 18px;
  }

  .wiui-rqyy-msg {
    visibility: hidden;
    font-size: 10px;
    color: #9784a0;
    position: absolute;
    padding: 5px;
    top: -5px;
    left: -60px;
    border-radius: 2px;
    background: white;
    transition: all 0.2s;
  }

  .wiui-rqyy-msg::after {
    content: " ";
    display: inline-block;
    width: 9px;
    height: 9px;
    background: white;
    position: absolute;
    top: 10px;
    transform: rotate(45deg);
    border-radius: 2px;
  }
© 版权声明
THE END
喜欢就支持一下吧
点赞14赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容