·设为首页收藏本站📧邮箱修改🎁免费下载专区💎积分✅卡密📒收藏夹👽聊天室
返回列表 发布新帖

分享一下我正在用的美化样式

309 1
发表于 2023-1-16 16:20:30 | 查看全部 阅读模式

马上注册,免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
如下。我自我感觉非常好看,大家可以去试试。
<style>
/*自定义网站字体开始*/
@font-face{font-family: "lovely";src: url("https://www.flweb.xyz/fileto/WebFont.woff2") format("woff2");font-display: swap;}
*{font-family: "lovely"}
/*自定义网站字体结束*/
/*自定义滚动条开始*/
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-thumb {
    border-radius: 0.125rem;
    -moz-border-radius: 0.125rem;
    -webkit-border-radius: 0.125rem;
    background-color: #c85863;
}

::-webkit-scrollbar-track {
    background-color: #000000;
}
/*自定义滚动条结束*/
input#scbar_txt {
    width: 200px;
    transition: 0.4s;
}
input#scbar_txt:hover{
    width:400px;
}
/*自定义阅读进度条开始*/
#content_progress {
      /* Positioning */
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1000;
      width: 100%;
      height: 5px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      background-color: transparent;
      color: #35a935;
}

#content_progress::-webkit-progress-bar {
      background-color: transparent;
}

#content_progress::-webkit-progress-value {
      background-color: #c85863;
}

#content_progress::-moz-progress-bar {
      background-color: #c85863;
}
/*自定义阅读进度条结束*/
/*搜索框悬停上浮开始*/
input#scbar_txt:hover{opacity: 1;z-index: 99;border-radius: 20px;transform: translateY(-5px);box-shadow: 0 3px 20px rgba(0, 0, 0, .25);animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;}
@keyframes index-link-active {
    0%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);}
    16%{transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);}
    100%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);}
}
/*搜索框上浮结束*/
/*搜索栏样式开始*/
input#scbar_txt {
    width: 200px;
    transition: 0.3s ease-in;
    border-radius: 5px 0px 0px 5px;
}
#scbar_type {border-radius: 0 5px 5px 0;}
input#scbar_txt:hover{
    width:400px;
}
/*搜索栏样式结束*/
/*背景修改开始*/
body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background: #c8e2fb;
        background-image: linear-gradient(45deg, #c8e2fb, #fbecd6);
}
/*背景修改结束*/
/*页面圆角开始*/
.cl ,.fl ,.bm{
    border-radius: 20px;
}
/*页面圆角结束*/
</style>
我要说一句 收起回复
创宇盾启航版免费网站防御网站加速服务

评论1

拾光Lv.8 发表于 2023-1-16 16:21:29 | 查看全部
那个阅读进度条是要用其它代码配合的,单独使用无效
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

创宇盾启航版免费网站防御网站加速服务
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:3.14.129.43,GMT+8, 2024-11-5 19:27 , Processed in 0.237091 second(s), 83 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2024 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表