凡尔锅 發表於 2023-1-16 16:42:42

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

如下。我自我感觉非常好看，大家可以去试试。<br />&lt;style&gt;<br />/*自定义网站字体开始*/<br />@font-face{font-family: &quot;lovely&quot;;src: url(&quot;https://www.flweb.xyz/fileto/WebFont.woff2&quot;) format(&quot;woff2&quot;);font-display: swap;}<br />*{font-family: &quot;lovely&quot;}<br />/*自定义网站字体结束*/<br />/*自定义滚动条开始*/<br /> ::-webkit-scrollbar {<br />&nbsp; &nbsp; width: 0.5rem;<br />&nbsp; &nbsp; height: 0.5rem;<br />}<br /><br />::-webkit-scrollbar-thumb {<br />&nbsp; &nbsp; border-radius: 0.125rem;<br />&nbsp; &nbsp; -moz-border-radius: 0.125rem;<br />&nbsp; &nbsp; -webkit-border-radius: 0.125rem;<br />&nbsp; &nbsp; background-color: #c85863;<br />}<br /><br />::-webkit-scrollbar-track {<br />&nbsp; &nbsp; background-color: #000000;<br />}<br />/*自定义滚动条结束*/<br />input#scbar_txt {<br />&nbsp; &nbsp; width: 200px;<br />&nbsp; &nbsp; transition: 0.4s;<br />}<br />input#scbar_txt:hover{<br />&nbsp; &nbsp; width:400px;<br />}<br />/*自定义阅读进度条开始*/<br />#content_progress {<br />&nbsp; &nbsp;&nbsp; &nbsp;/* Positioning */<br />&nbsp; &nbsp;&nbsp; &nbsp;position: fixed;<br />&nbsp; &nbsp;&nbsp; &nbsp;left: 0;<br />&nbsp; &nbsp;&nbsp; &nbsp;top: 0;<br />&nbsp; &nbsp;&nbsp; &nbsp;z-index: 1000;<br />&nbsp; &nbsp;&nbsp; &nbsp;width: 100%;<br />&nbsp; &nbsp;&nbsp; &nbsp;height: 5px;<br />&nbsp; &nbsp;&nbsp; &nbsp;-webkit-appearance: none;<br />&nbsp; &nbsp;&nbsp; &nbsp;-moz-appearance: none;<br />&nbsp; &nbsp;&nbsp; &nbsp;appearance: none;<br />&nbsp; &nbsp;&nbsp; &nbsp;border: none;<br />&nbsp; &nbsp;&nbsp; &nbsp;background-color: transparent;<br />&nbsp; &nbsp;&nbsp; &nbsp;color: #35a935;<br />}<br /><br />#content_progress::-webkit-progress-bar {<br />&nbsp; &nbsp;&nbsp; &nbsp;background-color: transparent;<br />}<br /><br />#content_progress::-webkit-progress-value {<br />&nbsp; &nbsp;&nbsp; &nbsp;background-color: #c85863;<br />}<br /><br />#content_progress::-moz-progress-bar {<br />&nbsp; &nbsp;&nbsp; &nbsp;background-color: #c85863;<br />}<br />/*自定义阅读进度条结束*/<br />/*搜索框悬停上浮开始*/<br />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;}<br />@keyframes index-link-active {<br />&nbsp; &nbsp; 0%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);}<br />&nbsp; &nbsp; 16%{transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);}<br />&nbsp; &nbsp; 100%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);}<br />}<br />/*搜索框上浮结束*/<br />/*搜索栏样式开始*/<br />input#scbar_txt {<br />&nbsp; &nbsp; width: 200px;<br />&nbsp; &nbsp; transition: 0.3s ease-in;<br />&nbsp; &nbsp; border-radius: 5px 0px 0px 5px;<br />}<br />#scbar_type {border-radius: 0 5px 5px 0;}<br />input#scbar_txt:hover{<br />&nbsp; &nbsp; width:400px;<br />}<br />/*搜索栏样式结束*/<br />/*背景修改开始*/<br />body {<br />&nbsp; &nbsp; &nbsp; &nbsp; display: flex;<br />&nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;<br />&nbsp; &nbsp; &nbsp; &nbsp; justify-content: space-between;<br />&nbsp; &nbsp; &nbsp; &nbsp; align-items: center;<br />&nbsp; &nbsp; &nbsp; &nbsp; background: #c8e2fb;<br />&nbsp; &nbsp; &nbsp; &nbsp; background-image: linear-gradient(45deg, #c8e2fb, #fbecd6);<br />}<br />/*背景修改结束*/<br />/*页面圆角开始*/<br />.cl ,.fl ,.bm{<br />&nbsp; &nbsp; border-radius: 20px;<br />}<br />/*页面圆角结束*/<br />&lt;/style&gt;<br /><br />开始<em>, </em>结束<em>, </em>自定义<em>, </em>width<em>, </em>background-color

凡尔锅 發表於 2023-1-16 16:44:14

那个阅读进度条是要用其它代码配合的，单独使用无效

阿狗君同志 發表於 2023-1-16 19:30:46

我的抄了不少。你也是（）

小花 發表於 2023-1-17 09:49:19

代码放在哪里呢

凡尔锅 發表於 2023-1-17 11:24:39

<br />可以放在底部统计代码里面。

阿狗君同志 發表於 2023-1-17 12:59:46

哈哈哈，写的时候注意多段适配啊

好好先生 發表於 2023-1-26 19:26:09

我的站点哈：https://www.sanweishu.cn/
頁: [1]
查看完整版本: 分享一下我正在用的美化样式