已掉线,重新登录

首页 > 绿虎论坛 > 历史版块 > 虎绿林 > 开发

标题: 求帮忙优化CSS:帖子底部的“展开隐藏内容”按钮太不明显,多个新用户没看到

作者: @Ta

时间: 2021-03-05

点击: 21659

比如该帖子底部的“展开隐藏内容”按钮:

https://hu60.cn/q.php/bbs.topic.96470.html

图片.png

已经接到超过3起用户反馈,他们最开始没看到这个“展开隐藏内容”按钮,经过我的提醒才找到。


[隐藏样式|查看源码]


『回复列表(20|显示机器人聊天)』

1.

.floor_fold_bar{
background-color: #f0ad4e;
border-color: #eea236;
padding: 20px;
}
HUAWEI Mate X2(冰晶蓝)

(/@Ta/2021-03-05 11:20//)

2.

Screenshot at Mar 05 11-21-07.png
HUAWEI Mate X2(冰晶蓝)

(/@Ta/2021-03-05 11:21//)

3.

使用手机在百度上随便搜索一篇文章,点进去就会有大量的“阅读全文”按钮作为参考
红米K30 Pro 变焦版

(/@Ta/2021-03-05 11:36//)

4.

点击页面任何地方都能触发不就行了

$("body").click(function(){
    $('#floor_fold_bar_0 button').trigger("click");  
});

https://cway.top

(/@Ta/2021-03-05 11:42//)

5.

楼主,这个时候你应该主动@老虎会游泳
Dark's blog---精品域名出售---淘宝优惠券

(/@Ta/2021-03-05 12:13//)

7.
.floor_fold_bar {
    text-align: center;
    background: transparent;
    top: -45px;
    position: relative;
}
.floor_fold_bar button {
    background: transparent;
    width: 100%;
    color: #333;
    height: 45px;
    font-size: large;
    border-radius: 0;
    border: 0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),color-stop(70%, #fff));
    background-image: linear-gradient(
-180deg
,rgba(255,255,255,0) 0%,#fff 70%);
}

这样搞更加不明显了
小米Mix3

(/@Ta/2021-03-05 12:18//)

8. QQ截图20210305134926.png
容易忽视的原因无非就是和背景色混合,不易区分,加上主题色突出按键存在不就行了,默认按键样式挺好的,搞太复杂或是炫酷容易喧宾夺主
(/@Ta/2021-03-05 13:53//)

9. 这总不会看不清吧
AA.png
甚至有点和主题风格不搭
Redmi K30 Pro
(/@Ta/2021-03-05 13:52//)

10.

大可不必,直接显示所有内容,侧边加个直达评论区按钮,点一下直接跳转到帖子末尾
loc.cc / 非人类论坛

(/@Ta/2021-03-05 13:53//)

11.
<style>
.button {
  background-color: #53B1A8;
  border: none;
  color: white;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px;
  cursor: pointer;
  border-radius: 8px;
  border: none;
  outline: none;
}
.button:hover {
  background-color: #499a92;
  box-shadow: 0 5px #666;
}  
.button:active {
  background-color: #3c7973;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<body>
<button class="button">展开隐藏内容</button>
</body>

视频链接


Redmi K30 Pro
(/@Ta/2021-03-05 14:18//)

12.

@ponyoung,哈 我也觉得 其实就是颜色太接近背景白色 存在感太低造成

(/@Ta/2021-03-05 14:06//)

13.

这个怎么样

    display: block;
    width: 100%;
    border-radius: 0;
    padding: 50px 0;
    position: relative;
    background-image: linear-gradient(rgb(255 255 255 / 46%), #FFF);
    margin-top: -90px;
    background-color: transparent;
    font-size: 18px;
    color: #065279;
    border: none;
    box-shadow: 0 0 20px 0px #fff;

▲▼

image.png
image.png
小米MIX2s(白)

(/@Ta/2021-03-05 14:11//)

14.
.oPadding {
    position: relative;
    padding-top: .18rem;
}

.gradient {
    position: absolute;
    top: -79px;
    left: 0;
    height: 80px;
    width: 100%;
    background-image: -webkit-linear-gradient(top,rgba(255,255,255,0),#fff);
    background-image: linear-gradient(
-180deg
,rgba(255,255,255,0),#fff);
}

.newUnfoldFullBox {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding-top: .05rem;
}

.newUnfoldFullBox .newUnfoldIcon {
    width: .22rem;
    height: .22rem;
    margin-bottom: .12rem;
    position: relative;
    -webkit-animation: backArrowFlow .8s ease infinite;
    animation: backArrowFlow .8s ease infinite;
    background: url(data:image/png;base64,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) no-repeat 50%/contain;
}

.newUnfoldFullBox .backFlowText {
    font-family: PingFangSC-Regular;
    font-size: .16rem;
    color: #4e6ef2;
    letter-spacing: 0;
    text-align: center;
    line-height: .16rem;
}
        <a class="userat" href="#" onclick="atAdd('-webkit-keyframes',this);return false">@</a><a class="userinfo" href="user.info.0.html">-webkit-keyframes</a> backArrowFlow {
            0%, to {
                bottom: 0
            }

            50% {
                bottom: .11rem
            }
        }

        <a class="userat" href="#" onclick="atAdd('keyframes',this);return false">@</a><a class="userinfo" href="user.info.0.html">keyframes</a> backArrowFlow {
            0%, to {
                bottom: 0
            }

            50% {
                bottom: .11rem
            }
        }

<div class="oPadding"><div class="gradient"></div><div class="newUnfoldFullBox contentPadding"><div class="newUnfoldIcon"></div><div class="backFlowText">打开百度APP阅读全文</div></div></div>

小米MIX2s(白)

(/@Ta/2021-03-05 14:22//)

15. @000,是啊,和主题色相近的颜色突出就行了,搞些花里胡哨的虚化,反而变味了
(/@Ta/2021-03-05 14:18//)

16.

小米MIX2s(白)more.html(5.70 KB)

(/@Ta/2021-03-05 14:25//)

18.

有时候不注意我也没发现有个展开按钮哈哈哈,给按钮加点醒目的颜色就好了
人生若只如初见

(/@Ta/2021-03-05 16:41//)

19. 给按钮增加css样式
display: block;
width: 100%;
height: 40px;
font-size: 18px;
border-radius: 0;


效果:
image.png
(/@Ta/2021-03-05 17:37//)

20. ScreenShot2021-03-05_20-45-59.jpg
@老虎会游泳 推荐这种方式,有渐变效果好一点
(/@Ta/2021-03-05 20:47//)

21. @小杨,好家伙,你这是让老虎学百度啊
(/@Ta/2021-03-05 21:04//)

下一页 1/2页,共20楼

回复需要登录

8月23日 04:40 星期六

本站由hu60wap6驱动

备案号: 京ICP备18041936号-1