如何让标题中的褪色线条有所反应？

我在这个标题中有一行 Faded line。当标题很长的线变短，褪色效果自败 Faded line2 我用这个CSS的线H1如何让标题中的褪色线条有所反应？

.sub_title h1:before { 
    content: ""; 
    width: 42%; 
    position: absolute; 
    top: 45%; 
    bottom: 0; 
    overflow: hidden; 
    margin-left: -43.6%; 
    text-align: right; 
    height: 2px; 
    background: -webkit-gradient(radial, 60% 0%, 0, 239% 90%, 1090, from(#5CAECE), to(#fff)); 
} 
.sub_title h1:after { 
    content: ""; 
    width: 42%; 
    position: absolute; 
    top: 45%; 
    bottom: 0; 
    overflow: hidden; 
    text-align: right; 
    height: 2px; 
    margin-left: 1.5%; 
    background: -webkit-gradient(radial, 60% 0%, 0, -139% 90%, 1090, from(#5CAECE), to(#fff)); 
}

反正有做这一行响应，所以无论多久tilte是，线会变短，但会保持衰落效果？的

来源

2017-08-07 user3458635

是否有可能包括更多的CSS和HTML来演示这个问题？ – showdev

有有几个解决方案，但是最安全和最简单的，我是使用Flexbox的，语义是没有任何额外的膨胀清晰，工作得很好，我认为：https://jsfiddle.net/prowseed/szgeag97/

整个奇妙之处在于具体Flexbox的特点：

.title { 
    text-align:center; 
    display:flex; 
    align-items:center; 

    &:before, &:after { 
    content:''; 
    flex: 2 1 90px; 
    background:linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(125,185,232,1) 60%); 
    height:4px; 
    } 

    &:after { 
    background:linear-gradient(to left, rgba(30,87,153,0) 0%,rgba(125,185,232,1) 60%); 
    } 

    h1 { 
    flex:0 1 auto; 
    padding:0 5px; 
    } 
}

来源

2017-08-07 17:03:37

非常感谢！你真的帮助了我=） – user3458635

-1

使用linear-gradient代替-webkit-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

，我想background-size: cover;和background-repeat: no-repeat;将有助于

来源

2017-08-07 16:56:25

你可以尝试这样的事情，如果你知道你的背景颜色

`https://codepen.io/SashaZhardetskaya/pen/eEvmdQ#code-area`

来源

2017-08-07 16:59:09

如何让标题中的褪色线条有所反应？

回答

相关问题