文章
文章用户商铺文档快讯圈子网址导航问答

列表文章上浮效果

释放双眼，带上耳机，听听看~！
  1. .home .post-list .b2_gap .post-list-item .item-in:hover {
  2. transform: translateY(-5px);
  3. -webkit-transform: translateY(-5px);
  4. -moz-transform: translateY(-5px);
  5. }
  6. .post-module-thumb {
  7. position: relative;
  8. height: 0;
  9. overflow: hidden;
  10. z-index: 1;
  11. }
  12. .picked.post-load-button span {
  13. background-color: var(--b2color);
  14. background: var(--b2color);
  15. border-radius: 4px;
  16. }
  17. .item-in.item-author .item-bg .thumb-i {
  18. background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
  19. }
  20. .thumb-1 {
  21. background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
  22. }
  23. .thumb-2 {
  24. background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  25. }
  26. .thumb-3 {
  27. background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
  28. }
  29. .thumb-4 {
  30. background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
  31. }
  32. .thumb-5 {
  33. background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
  34. }
  35. .thumb-6 {
  36. background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
  37. }
  38. .thumb-7 {
  39. background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
  40. }
  41. .thumb-8 {
  42. background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
  43. }
  44. .thumb-9 {
  45. background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
  46. }
  47. .thumb-10 {
  48. background-image: linear-gradient(-225deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%);
  49. }
  50. .list-footer {
  51. padding: 10px 0px;
  52. border-top: 0px solid #F5F6F7;
  53. }
  54. /*.picture img:hover{
  55. -webkit-transform: scale(1.1);
  56. transform: scale(1.1);
  57. -webkit-transition: all .5s ease-out;
  58. transition: all .5s ease-out;
  59. }*/
  60. .item-in:hover {
  61. transform: translateY(-5px);
  62. -webkit-transform: translateY(-5px);
  63. -moz-transform: translateY(-5px);
  64. box-shadow: 0 1rem 3rem rgba(31, 45, 61, .125);
  65. }
  66. .b2_gap>li .item-in, .shop-list-item, .shop-normal-item-in, .user-search-list li>div, .home-collection .home-collection-content, .post-3.post-3-li-dubble .b2_gap>li .item-in, .item-in {
  67. overflow: hidden;
  68. transition: all .3s ease-in-out;
  69. padding: 10px;
  70. border-radius: 15px;
  71. }
  72. .b2_gap>li .item-in, .shop-list-item, .shop-normal-item-in, .user-search-list li > div, .home-collection .home-collection-content, .post-3.post-3-li-dubble .b2_gap>li .item-in {
  73. margin-bottom: 18px;
  74. margin-right: 18px;
  75. overflow: hidden;
  76. }
  77. /*.category .wrapper {
  78. width: calc(100% - 140px);
  79. }
  80. .wrapper {
  81. width: calc(100% - 140px);
  82. max-width: 100%;
  83. margin: 0 auto;
  84. }*/
  85. .post-excerpt {
  86. font-size: 12px;
  87. color: #797C80;
  88. display: -webkit-box;
  89. -webkit-box-orient: vertical;
  90. -webkit-line-clamp: 1;
  91. overflow: hidden;
  92. text-justify: inter-ideograph;
  93. word-break: break-all;
  94. margin: 10px;
  95. margin-top: -6px;
  96. }
  97. .post-list-meta-box {
  98. display: flex;
  99. align-items: center;
  100. justify-content: space-between;
  101. margin: 10px 0px;
  102. color: #AAAEB3;
  103. }
  104. .post-info h2 {
  105. font-size: 18px;
  106. font-weight: bold;
  107. margin: 16px 0 16px;
  108. line-height: 25px;
  109. }
  110. .post-3-li-dubble .item-in .post-info h2{
  111. font-size: 18px;
  112. font-weight: bold;
  113. margin: 16px 0 16px;
  114. line-height: 25px;
  115. margin-bottom:5px;
  116. font-size: 18px;
  117. margin-left: 0;
  118. margin-top: 0;
  119. }

给TA打赏
共{{data.count}}人
人已打赏
网站修改记录

文章页面广告位四季变换代码

2022-6-23 10:13:46

网站修改记录

终极重装机设置美化流程!!!

2023-2-2 10:15:21

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

  • 本站app下载

返回顶部