博客园的第一篇
- 2020 年 12 月 27 日
- 笔记
好丑陋的界面？？
并且好像不是很完善
// 鼠标指针
body
background-color #dee
cursor url(‘/cursor/Vista.cur’), auto
body
.header
.banner
cursor url(‘/cursor/Vista.cur’), auto
.container
aside
.info-card
.info-card-body
cursor url(‘/cursor/Vista.cur’), auto
a, button, #goTop, .jump, h1, .info-avatar, .post-tag ,.posts-list-item .post-info-list .post-info-item .icon ,.info-text
cursor url(‘/cursor/link.cur’), auto
//容器相关 css
//warning 容器css开始
.custom-block.warning
border-left-color: #ff9100;
.custom-block.warning
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
position: relative;
margin: 1.5625em 0;
padding: 0 .6rem;
border-left: .2rem solid #448aff;
border-radius: .1rem;
overflow: auto;
.custom-block.warning .custom-block-title {
color: #b29400;
}
//warning 容器css结束
//tip 容器css开始
.custom-block.tip
background-color:#f3f5f780;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
position: relative;
margin: 1.5625em 0;
padding: 0 .6rem;
border-left: .2rem solid #42B983;
border-radius: .1rem;
overflow: auto;
.custom-block.tip .custom-block-title {
color: #42B983;
}
//tip 容器css结束
//today 容器开始
.today
margin 1rem 0
padding .1rem 1.5rem
border-radius 0.4rem
background-color #f0f4f8
.title
font-weight: bold
//today 容器结束
//right center 容器开始
.custom-block
&.right
color transparentify($textColor, 0.4)
font-size 0.9rem
text-align right
.customer-container-center
text-align center
//right center容器结束
// //文字选中效果
// ::selection
// color: #000;
// #79ffe1;
// .pre::selection
// white !important;
::selection
color: #000;
background-color:#FAA3A4;
//磨砂导航栏
.navbar
backdrop-filter: saturate(180%) blur(5px);
-webkit-backdrop-filter: saturate(180%) blur(5px);
.navbar.fixed
background-color: rgba(255, 255, 255, 0.25) !important;
backdrop-filter: saturate(180%) blur(5px);
-webkit-backdrop-filter: saturate(180%) blur(5px);
//添加图片圆角
.content img
-webkit-border-radius: 13px !important;
.go-to-top
display: none;
//去除白色边框
.navbar
border-bottom: 0px solid #eaecef !important;
box-shadow: 0 0 0.95rem rgba(0, 0, 0, 0.1) !important;
.banner
border-bottom: 0px solid #eaecef !important;
.footer
border-top: 0px solid #eaecef !important;
//列表移动
.content ul, .content ol
padding-left: 1.6em;
//动态右移首页效果
.posts-list-item {
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.posts-list-item:hover, .posts-list-item:focus, .posts-list-item:active {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
/* Wobble Skew */
@-webkit-keyframes contact {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}
33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}
83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}
100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}
@keyframes contact {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}
33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}
83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}
100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}
.contact {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
.contact:hover, .contact:focus, .contact:active {
-webkit-animation-name: contact;
animation-name: contact;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.contact::before {
content: ”;
position: absolute;
left: 50%;
bottom: 0;
width: 100%;
height: 2px;
background-color: #fc2f70;
transform-origin: center;
transform: translate(-50%, 0) scaleX(0);
transition: transform 0.3s ease-in-out;
}
.contact:hover::before {
transform: translate(-50%, 0) scaleX(1);
}
//头像阴影
.info-card .info-card-header .info-avatar
box-shadow: 0 0 15px #918c8c !important;
.info-card {
background-image: linear-gradient(0deg,rgba(211, 206, 217,0.1) , rgba(255,255,255,.01))!important;
background-color: hsla(0,0%,100%,.4)!important;
}
//文章阴影+透明
article {
//background-image: url(//theeyeopener.com/wp-content/uploads/2019/03/DD-parchment.jpg);
display: block;
}
.main-div
background-color: rgba(255,255,255,.8) !important;
box-shadow: 0 0 10px #ccc !important;
-webkit-border-radius: 15px !important;
//配合文章的tag页透明色
.post-tag
background-color: hsla(0, 0%, 100%, 0) !important;
//header 渐变
.header
background-image: linear-gradient(180deg,rgba(211, 206, 217,0.69) , rgba(255,255,255,.01))!important;
background-color: hsla(0,0%,100%,.2)!important;
box-shadow: 0 0 8px #00000060 !important;
-webkit-border-radius: 0px !important;
//引用 作为文章概要
.content blockquote {
padding: 0.1 0 0 0 rem !important;
background-color: rgba(211, 206, 217,0.15) !important;
//rgba(185, 154, 217,0.25) !important
border-left: 0.3em solid #d3ced9 !important;
margin-left: 0 !important;
}
//背景
body{
background-size: 100% auto;
background-position: 0% 0%;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url(//i.loli.net/2020/11/26/GszIibHBAd475uw.jpg);
}
@media (min-aspect-ratio: 2400/1850) {
.main-div{
background-color: rgba(255,255,255,.8) !important;
}
body {
//background-image: url(//i.pinimg.com/originals/1e/f4/86/1ef486a24dd55567a11479379f02a2f3.jpg);
background-image: url(//i.loli.net/2020/12/07/tcaO73SQWmInX4E.jpg);
//background-image: url(//Mizuno-Ai.wu-kan.cn/pixiv/71932901_p0.webp);
}
}
//针对移动端的内容块缩进修改
@media (max-width: 767px){
.main-div {
-webkit-border-radius: 0px !important;
padding-top: 1rem;
padding-left: 0.2rem;
padding-right: 0.2rem;
padding-bottom: 1rem;
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
padding-left: 0.5rem;
}
}
//字体大小美化
.header
.banner
.container
h1
font-weight: normal !important;
font-size: 1.5rem !important;
color: #000000;
.navbar .navbar-link
font-size: 1rem;
.posts-list-item .post-title
font-size: 1.1rem;
//英文字体
body{
font-family: Comic Sans MS,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif!important;
}
//字体大小更改
.posts-list-item .post-title {
font-weight: normal !important;
}
body{
font-size: 15.5px !important;
}
h2 {
font-size: 18px !important;
font-weight: 550 !important;
}
h3 {
font-weight: 550 !important;
font-size: 16px !important;
}
strong {
font-weight: 550;
}
//标题 明显化
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6
text-decoration-line: underline;
//阅读统计进度条
.reading-progress .progress
height : 2px !important;
//background-image: linear-gradient(225deg, Cyan 0%, Magenta 50%, Yellow 100%) !important;
//渐变滚动条
::-webkit-scrollbar
width: 3px ;
height: 3px;
::-webkit-scrollbar-thumb
background: #d3ced9 !important;
//pwa 样式
.sw-update-popup{
position: fixed;
border: 1px solid #3eaf7c;
border-radius: 3px;
background-color: rgba(255,255,255,.4) !important;
box-shadow: 0 0 10px #ccc !important;
}
.sw-update-popup>button {
position: relative;
}
.sw-update-popup>button::before, .sw-update-popup>button::after {
content: ”;
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: #fc2f70;
transform: scaleY(0);
transition: transform 0.5s ease;
}
.sw-update-popup>button::before {
left: -8px;
transform-origin: center top;
}
.sw-update-popup>button:hover::before {
transform-origin: center bottom;
transform: scaleY(1);
}
.sw-update-popup>button::after {
right: -8px;
transform-origin: center bottom;
}
.sw-update-popup>button:hover::after {
transform-origin: center top;
transform: scaleY(1);
}
a {
text-decoration: none !important;
color: #5EB761;
}
// body {
// font-family: GT Eesti,Futura Std,Futura,Helvetica,sans-serif !important; 一种简洁的英文字体
// font-weight: 400 !important;
// color: var(–text-color);
// var(–bg-color);
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// font-size: 16px !important;
// }
.live2d-widget-container{
position: fixed;
opacity: 0.79 !important;
left: 1rem !important;
}
