style.css
| @@ -1,97 +1,295 @@ | |||
| 1 | - | /*请自己找到这个位置*/ | |
| 2 | - | .volantis-flink-list | |
| 3 | - | display: flex | |
| 4 | - | flex-wrap: wrap | |
| 5 | - | justify-content: flex-start | |
| 6 | - | margin: -0.5 * 16px | |
| 7 | - | align-items: stretch | |
| 8 | - | .site-card | |
| 9 | - | @extend .cardHover | |
| 10 | - | margin: 16px * 0.5 | |
| 11 | - | width: "calc(100% / 4 - %s)" % 16px | |
| 12 | - | @media screen and (min-width: 2048px) | |
| 13 | - | width: "calc(100% / 5 - %s)" % 16px | |
| 14 | - | @media screen and (max-width: 768px) | |
| 15 | - | width: "calc(100% / 3 - %s)" % 16px | |
| 16 | - | @media screen and (max-width: 500px) | |
| 17 | - | width: "calc(100% / 2 - %s)" % 16px | |
| 18 | - | display: block | |
| 19 | - | height: 210px !important | |
| 20 | - | line-height: 1.4 | |
| 21 | - | height 100% | |
| 22 | - | .img | |
| 23 | - | position: relative | |
| 24 | - | object-fit: cover | |
| 25 | - | margin: 0 !important | |
| 26 | - | width: 100% | |
| 27 | - | height 60% | |
| 28 | - | overflow: hidden | |
| 29 | - | transition: all .6s!important | |
| 30 | - | filter: blur(0) | |
| 31 | - | img | |
| 32 | - | width: 100% | |
| 33 | - | height 100% | |
| 34 | - | margin: 0 !important | |
| 35 | - | border-radius: 12px 12px 0 0 !important | |
| 36 | - | pointer-events:none; | |
| 37 | - | // trans(.75s) | |
| 38 | - | transition: background .6s,height .6s | |
| 39 | - | object-fit: cover | |
| 40 | - | ||
| 41 | - | .info | |
| 42 | - | position: relative | |
| 43 | - | height: 40% | |
| 44 | - | transition: background .6s,height .6s | |
| 45 | - | img | |
| 46 | - | position: absolute | |
| 47 | - | width: 100px | |
| 48 | - | height: 100px | |
| 49 | - | pointer-events:none | |
| 50 | - | background-size: cover | |
| 51 | - | border-radius: 50% !important | |
| 52 | - | top: -32px | |
| 53 | - | left: -32px | |
| 54 | - | transform: scale(.2) | |
| 55 | - | transition: all .6s !important | |
| 56 | - | #text | |
| 57 | - | position: relative | |
| 58 | - | top: 0px | |
| 59 | - | display: flex | |
| 60 | - | flex-direction: column | |
| 61 | - | padding-right: 10px | |
| 62 | - | margin-left: 35px | |
| 63 | - | transition: all .6s; | |
| 64 | - | .title | |
| 65 | - | max-width: 100% | |
| 66 | - | font-size: 16px | |
| 67 | - | line-height: 26px | |
| 68 | - | font-weight: 700 | |
| 69 | - | color: var(--liushen-text) | |
| 70 | - | text-overflow: ellipsis | |
| 71 | - | white-space: nowrap | |
| 72 | - | overflow: hidden | |
| 73 | - | .desc | |
| 74 | - | font-size: var(--global-font-size) | |
| 75 | - | line-height: 26px | |
| 76 | - | color: var(--liushen-secendtext) | |
| 77 | - | overflow: hidden | |
| 78 | - | font-size: small | |
| 79 | - | margin-bottom: 10px | |
| 80 | - | max-height: 52px | |
| 81 | - | -webkit-line-clamp: 2 | |
| 82 | - | &:hover | |
| 83 | - | .img | |
| 84 | - | height: 35% | |
| 85 | - | filter: blur(3px) | |
| 86 | - | .info | |
| 87 | - | height: 66% | |
| 88 | - | background: #f2b94b | |
| 89 | - | color: #fff | |
| 90 | - | img | |
| 91 | - | left: -10px | |
| 92 | - | top: -50px | |
| 93 | - | transform: rotate(-35deg) rotateX(1turn) rotateY(1turn) scale(.6) | |
| 94 | - | #text | |
| 95 | - | top: 26px | |
| 96 | - | margin-left: 10px | |
| 97 | - | /*下面的不用动，为#article-container的定义*/ | |
| 1 | + | /* #card-newest-comments img {border-radius: 10px; /* 设置最新评论圆角半径为10px，可以根据需要调整} */ | |
| 2 | + | ||
| 3 | + | /* 说说轮播 */ | |
| 4 | + | #bber-talk { | |
| 5 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 6 | + | rgba(255, 255, 255, .8), | |
| 7 | + | rgba(255, 255, 255, .8), | |
| 8 | + | rgba(255, 255, 255, .7)); | |
| 9 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 10 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 11 | + | } | |
| 12 | + | ||
| 13 | + | /* 说说轮播 */ | |
| 14 | + | [data-theme=dark] #bber-talk { | |
| 15 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 16 | + | rgba(35, 37, 58, .8), | |
| 17 | + | rgba(35, 37, 58, .8), | |
| 18 | + | rgba(24, 40, 72, .7)); | |
| 19 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 20 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 21 | + | } | |
| 22 | + | ||
| 23 | + | /* 侧边栏个人信息卡片动态渐变色 */ | |
| 24 | + | #aside-content>.card-widget.card-info { | |
| 25 | + | position: relative; | |
| 26 | + | z-index: 1; /* 确保原内容在上层显示 */ | |
| 27 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 28 | + | rgba(255, 255, 255, .8), | |
| 29 | + | rgba(255, 255, 255, .8), | |
| 30 | + | rgba(255, 255, 255, .7)); | |
| 31 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 32 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 33 | + | } | |
| 34 | + | ||
| 35 | + | #aside-content > .card-widget.card-info::before { | |
| 36 | + | content: ""; | |
| 37 | + | position: absolute; | |
| 38 | + | top: 0; | |
| 39 | + | left: 0; | |
| 40 | + | width: 100%; | |
| 41 | + | height: 100%; | |
| 42 | + | background: linear-gradient(to bottom, | |
| 43 | + | rgba(255, 255, 255, 0.0), | |
| 44 | + | rgba(255, 255, 255, 0.3), | |
| 45 | + | rgba(255, 255, 255, 0.6), | |
| 46 | + | rgba(255, 255, 255, 0.7)), | |
| 47 | + | url('/config/img/dog.jpg'); /* 鼠标悬停时显示的背景图片 */ | |
| 48 | + | background-size: cover; | |
| 49 | + | background-repeat: no-repeat; | |
| 50 | + | opacity: 0.5; | |
| 51 | + | transition: opacity 0.8s; /* 过渡效果持续时间 */ | |
| 52 | + | z-index: -1; | |
| 53 | + | } | |
| 54 | + | ||
| 55 | + | [data-theme=dark] #aside-content > .card-widget.card-info::before { | |
| 56 | + | background: linear-gradient(to bottom, | |
| 57 | + | rgba(24, 40, 72, .1), | |
| 58 | + | rgba(35, 37, 58, .3), | |
| 59 | + | rgba(35, 37, 58, .6), | |
| 60 | + | rgba(24, 40, 72, .7)), | |
| 61 | + | url('/config/img/dog.jpg'); /* 鼠标悬停时显示的背景图片 */ | |
| 62 | + | background-size: cover; | |
| 63 | + | background-repeat: no-repeat; | |
| 64 | + | } | |
| 65 | + | ||
| 66 | + | #aside-content > .card-widget.card-info:hover::before { | |
| 67 | + | opacity: 1; | |
| 68 | + | } | |
| 69 | + | /* 卡片动态效果，好好看哈哈 */ | |
| 70 | + | #aside-content div.card-widget.card-info .avatar-img { | |
| 71 | + | transition: opacity 0.3s ease; /* 添加渐变效果 */ | |
| 72 | + | } | |
| 73 | + | ||
| 74 | + | #aside-content div.card-widget.card-info .avatar-img:hover { | |
| 75 | + | opacity: 0; /* 鼠标移上去时完全透明 */ | |
| 76 | + | } | |
| 77 | + | ||
| 78 | + | #card-info-btn:hover, #card-info-btn:hover .icon, #card-info-btn:hover span { | |
| 79 | + | transform: scale(1.1); /* 鼠标悬停时放大到110% */ | |
| 80 | + | } | |
| 81 | + | ||
| 82 | + | [data-theme=dark] #aside-content>.card-widget.card-info { | |
| 83 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .6), | |
| 84 | + | rgba(35, 37, 58, .5), | |
| 85 | + | rgba(35, 37, 58, .5), | |
| 86 | + | rgba(24, 40, 72, .6)); | |
| 87 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 88 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 89 | + | } | |
| 90 | + | ||
| 91 | + | /* 侧边栏公告栏卡片渐变色 */ | |
| 92 | + | #aside-content>.card-widget.card-announcement { | |
| 93 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 94 | + | rgba(255, 255, 255, .8), | |
| 95 | + | rgba(255, 255, 255, .8), | |
| 96 | + | rgba(255, 255, 255, .7)); | |
| 97 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 98 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 99 | + | } | |
| 100 | + | ||
| 101 | + | [data-theme=dark] #aside-content>.card-widget.card-announcement { | |
| 102 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 103 | + | rgba(35, 37, 58, .8), | |
| 104 | + | rgba(35, 37, 58, .8), | |
| 105 | + | rgba(24, 40, 72, .7)); | |
| 106 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 107 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 108 | + | } | |
| 109 | + | ||
| 110 | + | /* 侧边栏目录最新文章卡片渐变色 */ | |
| 111 | + | #aside-content>.sticky_layout>.card-widget { | |
| 112 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 113 | + | rgba(255, 255, 255, .8), | |
| 114 | + | rgba(255, 255, 255, .8), | |
| 115 | + | rgba(255, 255, 255, .7)); | |
| 116 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 117 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 118 | + | } | |
| 119 | + | ||
| 120 | + | [data-theme=dark] #aside-content>.sticky_layout>.card-widget { | |
| 121 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 122 | + | rgba(35, 37, 58, .8), | |
| 123 | + | rgba(35, 37, 58, .8), | |
| 124 | + | rgba(24, 40, 72, .7)); | |
| 125 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 126 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 127 | + | } | |
| 128 | + | ||
| 129 | + | /* 侧边栏欢迎卡片渐变色 */ | |
| 130 | + | #aside-content>.card-widget.welcomeBoxClass { | |
| 131 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 132 | + | rgba(255, 255, 255, .8), | |
| 133 | + | rgba(255, 255, 255, .8), | |
| 134 | + | rgba(255, 255, 255, .7)); | |
| 135 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 136 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 137 | + | } | |
| 138 | + | ||
| 139 | + | [data-theme=dark] #aside-content>.card-widget.welcomeBoxClass { | |
| 140 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 141 | + | rgba(35, 37, 58, .8), | |
| 142 | + | rgba(35, 37, 58, .8), | |
| 143 | + | rgba(24, 40, 72, .7)); | |
| 144 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 145 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 146 | + | } | |
| 147 | + | ||
| 148 | + | /* 公告卡片渐变色 */ | |
| 149 | + | #recent-posts>#noticeList { | |
| 150 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 151 | + | rgba(255, 255, 255, .8), | |
| 152 | + | rgba(255, 255, 255, .8), | |
| 153 | + | rgba(255, 255, 255, .7)); | |
| 154 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 155 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 156 | + | } | |
| 157 | + | ||
| 158 | + | [data-theme=dark] #recent-posts>#noticeList { | |
| 159 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 160 | + | rgba(35, 37, 58, .8), | |
| 161 | + | rgba(35, 37, 58, .8), | |
| 162 | + | rgba(24, 40, 72, .7)); | |
| 163 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 164 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 165 | + | } | |
| 166 | + | ||
| 167 | + | /* 个人信息Follow me按钮 */ | |
| 168 | + | #aside-content>.card-widget.card-info>#card-info-btn { | |
| 169 | + | background-color: #3eb8be; | |
| 170 | + | border-radius: 10px; | |
| 171 | + | } | |
| 172 | + | ||
| 173 | + | /*文章页面*/ | |
| 174 | + | .layout>#post { | |
| 175 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 176 | + | rgba(255, 255, 255, .8), | |
| 177 | + | rgba(255, 255, 255, .8), | |
| 178 | + | rgba(255, 255, 255, .7)); | |
| 179 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 180 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 181 | + | } | |
| 182 | + | ||
| 183 | + | [data-theme=dark] .layout>#post { | |
| 184 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 185 | + | rgba(35, 37, 58, .8), | |
| 186 | + | rgba(35, 37, 58, .8), | |
| 187 | + | rgba(24, 40, 72, .7)); | |
| 188 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 189 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 190 | + | } | |
| 191 | + | ||
| 192 | + | /*主页文章预览页面*/ | |
| 193 | + | #recent-posts>.recent-post-item { | |
| 194 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 195 | + | rgba(255, 255, 255, .8), | |
| 196 | + | rgba(255, 255, 255, .8), | |
| 197 | + | rgba(255, 255, 255, .7)); | |
| 198 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 199 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 200 | + | } | |
| 201 | + | ||
| 202 | + | [data-theme=dark] #recent-posts>.recent-post-item { | |
| 203 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 204 | + | rgba(35, 37, 58, .8), | |
| 205 | + | rgba(35, 37, 58, .8), | |
| 206 | + | rgba(24, 40, 72, .7)); | |
| 207 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 208 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 209 | + | } | |
| 210 | + | ||
| 211 | + | /*分类页面*/ | |
| 212 | + | .layout>#page { | |
| 213 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 214 | + | rgba(255, 255, 255, .8), | |
| 215 | + | rgba(255, 255, 255, .8), | |
| 216 | + | rgba(255, 255, 255, .7)); | |
| 217 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 218 | + | /* -webkit-backdrop-filter: blur(10px); 兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 219 | + | } | |
| 220 | + | ||
| 221 | + | [data-theme=dark] .layout>#page { | |
| 222 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 223 | + | rgba(35, 37, 58, .8), | |
| 224 | + | rgba(35, 37, 58, .8), | |
| 225 | + | rgba(24, 40, 72, .7)); | |
| 226 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 227 | + | /* -webkit-backdrop-filter: blur(10px); 兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 228 | + | } | |
| 229 | + | ||
| 230 | + | ||
| 231 | + | /*时间轴页面*/ | |
| 232 | + | .layout>#archive { | |
| 233 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 234 | + | rgba(255, 255, 255, .8), | |
| 235 | + | rgba(255, 255, 255, .8), | |
| 236 | + | rgba(255, 255, 255, .7)); | |
| 237 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 238 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 239 | + | } | |
| 240 | + | ||
| 241 | + | [data-theme=dark] .layout>#archive { | |
| 242 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 243 | + | rgba(35, 37, 58, .8), | |
| 244 | + | rgba(35, 37, 58, .8), | |
| 245 | + | rgba(24, 40, 72, .7)); | |
| 246 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 247 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 248 | + | } | |
| 249 | + | ||
| 250 | + | /*分类点进去的页面*/ | |
| 251 | + | .layout>#category { | |
| 252 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 253 | + | rgba(255, 255, 255, .8), | |
| 254 | + | rgba(255, 255, 255, .8), | |
| 255 | + | rgba(255, 255, 255, .7)); | |
| 256 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 257 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 258 | + | } | |
| 259 | + | ||
| 260 | + | [data-theme=dark] .layout>#category { | |
| 261 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 262 | + | rgba(35, 37, 58, .8), | |
| 263 | + | rgba(35, 37, 58, .8), | |
| 264 | + | rgba(24, 40, 72, .7)); | |
| 265 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 266 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 267 | + | } | |
| 268 | + | ||
| 269 | + | /*标签点进去的页面*/ | |
| 270 | + | .layout>#tag { | |
| 271 | + | background: linear-gradient(-45deg, rgba(255, 255, 255, .7), | |
| 272 | + | rgba(255, 255, 255, .8), | |
| 273 | + | rgba(255, 255, 255, .8), | |
| 274 | + | rgba(255, 255, 255, .7)); | |
| 275 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 276 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 277 | + | } | |
| 278 | + | ||
| 279 | + | [data-theme=dark] .layout>#tag { | |
| 280 | + | background: linear-gradient(-45deg, rgba(24, 40, 72, .7), | |
| 281 | + | rgba(35, 37, 58, .8), | |
| 282 | + | rgba(35, 37, 58, .8), | |
| 283 | + | rgba(24, 40, 72, .7)); | |
| 284 | + | /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */ | |
| 285 | + | /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ | |
| 286 | + | } | |
| 287 | + | ||
| 288 | + | .layout.hide-aside { | |
| 289 | + | max-width: 1200px; | |
| 290 | + | } | |
| 291 | + | ||
| 292 | + | /* 设置黑夜的时候，社交按钮为白色 */ | |
| 293 | + | [data-theme=dark] .social-icon i { | |
| 294 | + | color: rgba(188, 188, 188) !important; /* 设置为白色 */ | |
| 295 | + | } | |
style.css(file created)
| @@ -0,0 +1,97 @@ | |||
| 1 | + | /*请自己找到这个位置*/ | |
| 2 | + | .volantis-flink-list | |
| 3 | + | display: flex | |
| 4 | + | flex-wrap: wrap | |
| 5 | + | justify-content: flex-start | |
| 6 | + | margin: -0.5 * 16px | |
| 7 | + | align-items: stretch | |
| 8 | + | .site-card | |
| 9 | + | @extend .cardHover | |
| 10 | + | margin: 16px * 0.5 | |
| 11 | + | width: "calc(100% / 4 - %s)" % 16px | |
| 12 | + | @media screen and (min-width: 2048px) | |
| 13 | + | width: "calc(100% / 5 - %s)" % 16px | |
| 14 | + | @media screen and (max-width: 768px) | |
| 15 | + | width: "calc(100% / 3 - %s)" % 16px | |
| 16 | + | @media screen and (max-width: 500px) | |
| 17 | + | width: "calc(100% / 2 - %s)" % 16px | |
| 18 | + | display: block | |
| 19 | + | height: 210px !important | |
| 20 | + | line-height: 1.4 | |
| 21 | + | height 100% | |
| 22 | + | .img | |
| 23 | + | position: relative | |
| 24 | + | object-fit: cover | |
| 25 | + | margin: 0 !important | |
| 26 | + | width: 100% | |
| 27 | + | height 60% | |
| 28 | + | overflow: hidden | |
| 29 | + | transition: all .6s!important | |
| 30 | + | filter: blur(0) | |
| 31 | + | img | |
| 32 | + | width: 100% | |
| 33 | + | height 100% | |
| 34 | + | margin: 0 !important | |
| 35 | + | border-radius: 12px 12px 0 0 !important | |
| 36 | + | pointer-events:none; | |
| 37 | + | // trans(.75s) | |
| 38 | + | transition: background .6s,height .6s | |
| 39 | + | object-fit: cover | |
| 40 | + | ||
| 41 | + | .info | |
| 42 | + | position: relative | |
| 43 | + | height: 40% | |
| 44 | + | transition: background .6s,height .6s | |
| 45 | + | img | |
| 46 | + | position: absolute | |
| 47 | + | width: 100px | |
| 48 | + | height: 100px | |
| 49 | + | pointer-events:none | |
| 50 | + | background-size: cover | |
| 51 | + | border-radius: 50% !important | |
| 52 | + | top: -32px | |
| 53 | + | left: -32px | |
| 54 | + | transform: scale(.2) | |
| 55 | + | transition: all .6s !important | |
| 56 | + | #text | |
| 57 | + | position: relative | |
| 58 | + | top: 0px | |
| 59 | + | display: flex | |
| 60 | + | flex-direction: column | |
| 61 | + | padding-right: 10px | |
| 62 | + | margin-left: 35px | |
| 63 | + | transition: all .6s; | |
| 64 | + | .title | |
| 65 | + | max-width: 100% | |
| 66 | + | font-size: 16px | |
| 67 | + | line-height: 26px | |
| 68 | + | font-weight: 700 | |
| 69 | + | color: var(--liushen-text) | |
| 70 | + | text-overflow: ellipsis | |
| 71 | + | white-space: nowrap | |
| 72 | + | overflow: hidden | |
| 73 | + | .desc | |
| 74 | + | font-size: var(--global-font-size) | |
| 75 | + | line-height: 26px | |
| 76 | + | color: var(--liushen-secendtext) | |
| 77 | + | overflow: hidden | |
| 78 | + | font-size: small | |
| 79 | + | margin-bottom: 10px | |
| 80 | + | max-height: 52px | |
| 81 | + | -webkit-line-clamp: 2 | |
| 82 | + | &:hover | |
| 83 | + | .img | |
| 84 | + | height: 35% | |
| 85 | + | filter: blur(3px) | |
| 86 | + | .info | |
| 87 | + | height: 66% | |
| 88 | + | background: #f2b94b | |
| 89 | + | color: #fff | |
| 90 | + | img | |
| 91 | + | left: -10px | |
| 92 | + | top: -50px | |
| 93 | + | transform: rotate(-35deg) rotateX(1turn) rotateY(1turn) scale(.6) | |
| 94 | + | #text | |
| 95 | + | top: 26px | |
| 96 | + | margin-left: 10px | |
| 97 | + | /*下面的不用动，为#article-container的定义*/ | |
更新
更早