- UID
- 681641
- 积分
- 0
- 金币
- 3
- 精华
- 0
- 威望
- 0
- 贡献
- 0
- 阅读权限
- 220
- 注册时间
- 2010-2-6
- 最后登录
- 2026-5-2
- 在线时间
- 0 小时
热心网友
- 金币
- 3
- 阅读权限
- 220
- 精华
- 0
- 威望
- 0
- 贡献
- 0
- 在线时间
- 0 小时
- 注册时间
- 2010-2-6
|
如下。我自我感觉非常好看,大家可以去试试。 <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>
开始, 结束, 自定义, width, background-color |
|