style.css
· 2.5 KiB · CSS
Originalformat
/*请自己找到这个位置*/
.volantis-flink-list
display: flex
flex-wrap: wrap
justify-content: flex-start
margin: -0.5 * 16px
align-items: stretch
.site-card
@extend .cardHover
margin: 16px * 0.5
width: "calc(100% / 4 - %s)" % 16px
@media screen and (min-width: 2048px)
width: "calc(100% / 5 - %s)" % 16px
@media screen and (max-width: 768px)
width: "calc(100% / 3 - %s)" % 16px
@media screen and (max-width: 500px)
width: "calc(100% / 2 - %s)" % 16px
display: block
height: 210px !important
line-height: 1.4
height 100%
.img
position: relative
object-fit: cover
margin: 0 !important
width: 100%
height 60%
overflow: hidden
transition: all .6s!important
filter: blur(0)
img
width: 100%
height 100%
margin: 0 !important
border-radius: 12px 12px 0 0 !important
pointer-events:none;
// trans(.75s)
transition: background .6s,height .6s
object-fit: cover
.info
position: relative
height: 40%
transition: background .6s,height .6s
img
position: absolute
width: 100px
height: 100px
pointer-events:none
background-size: cover
border-radius: 50% !important
top: -32px
left: -32px
transform: scale(.2)
transition: all .6s !important
#text
position: relative
top: 0px
display: flex
flex-direction: column
padding-right: 10px
margin-left: 35px
transition: all .6s;
.title
max-width: 100%
font-size: 16px
line-height: 26px
font-weight: 700
color: var(--liushen-text)
text-overflow: ellipsis
white-space: nowrap
overflow: hidden
.desc
font-size: var(--global-font-size)
line-height: 26px
color: var(--liushen-secendtext)
overflow: hidden
font-size: small
margin-bottom: 10px
max-height: 52px
-webkit-line-clamp: 2
&:hover
.img
height: 35%
filter: blur(3px)
.info
height: 66%
background: #f2b94b
color: #fff
img
left: -10px
top: -50px
transform: rotate(-35deg) rotateX(1turn) rotateY(1turn) scale(.6)
#text
top: 26px
margin-left: 10px
/*下面的不用动，为#article-container的定义*/
| 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的定义*/ |