我希望文字具有与边框相同的动画背景

我想给文本提供相同的边框动画，但我不知道如何去做，而且我也不会知道这是否可能。我想知道你是否有这个想法。谢谢你的答案！我希望文字具有与边框相同的动画背景

.rainbow { 
 
    position: absolute; 
 
    top: 4px; 
 
    left: 4px; 
 
    width: 214px; 
 
    height: 64px; 
 
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d,  #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3); 
 
    background-size: 1800% 1800%; 
 
    
 
    -webkit-animation: rainbow 7s ease infinite; 
 
    -z-animation: rainbow 7s ease infinite; 
 
    -o-animation: rainbow 7s ease infinite; 
 
    animation: rainbow 7s ease infinite; 
 
} 
 

 
.bottone { 
 
    position: absolute; 
 
    z-index: 999; 
 
    padding-top: 15px; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    width: 200px; 
 
    height: 35px; 
 
    border: 3px solid transparent; 
 
    background: white; 
 
} 
 

 
@-webkit-keyframes rainbow { 
 
    0%{background-position:0% 82%} 
 
    50%{background-position:100% 19%} 
 
    100%{background-position:0% 82%} 
 
} 
 
@-moz-keyframes rainbow { 
 
    0%{background-position:0% 82%} 
 
    50%{background-position:100% 19%} 
 
    100%{background-position:0% 82%} 
 
} 
 
@-o-keyframes rainbow { 
 
    0%{background-position:0% 82%} 
 
    50%{background-position:100% 19%} 
 
    100%{background-position:0% 82%} 
 
} 
 
@keyframes rainbow { 
 
    0%{background-position:0% 82%} 
 
    50%{background-position:100% 19%} 
 
    100%{background-position:0% 82%} 
 
}

<div class="rainbow"></div> 
 
<a class="bottone">Text</a>

非常感谢您！

来源

2017-06-13 Lafa

我试着颜色：透明的，但它不工作，我需要的帮助，因为我没有想法如何做到这一点，你必须发送”不是个代码笔吨我需要 – Lafa

啊对不起，我误解了。很高兴你有一个答案:) –

没问题：D和谢谢 – Lafa

将背景放在文本的前面，并使用mix-blend-mode: screen;就可以了。另请注意外部容器上的黑色边框。

.rainbow { 
 
    position: absolute; 
 
    top: -3px; 
 
    right: -3px; 
 
    bottom: -3px; 
 
    left: -3px; 
 
    z-index: 1; 
 
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3); 
 
    background-size: 1800% 1800%; 
 
    -webkit-animation: rainbow 7s ease infinite; 
 
    -z-animation: rainbow 7s ease infinite; 
 
    -o-animation: rainbow 7s ease infinite; 
 
    animation: rainbow 7s ease infinite; 
 
    mix-blend-mode: screen; 
 
    pointer-events: none; /** if you want the text to be selectable **/ 
 
} 
 

 
.bottone { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-top: 15px; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    width: 200px; 
 
    height: 35px; 
 
    border: 3px solid black; 
 
    background: white; 
 
} 
 

 
@-webkit-keyframes rainbow { 
 
    0% { 
 
    background-position: 0% 82% 
 
    } 
 
    50% { 
 
    background-position: 100% 19% 
 
    } 
 
    100% { 
 
    background-position: 0% 82% 
 
    } 
 
} 
 

 
@-moz-keyframes rainbow { 
 
    0% { 
 
    background-position: 0% 82% 
 
    } 
 
    50% { 
 
    background-position: 100% 19% 
 
    } 
 
    100% { 
 
    background-position: 0% 82% 
 
    } 
 
} 
 

 
@-o-keyframes rainbow { 
 
    0% { 
 
    background-position: 0% 82% 
 
    } 
 
    50% { 
 
    background-position: 100% 19% 
 
    } 
 
    100% { 
 
    background-position: 0% 82% 
 
    } 
 
} 
 

 
@keyframes rainbow { 
 
    0% { 
 
    background-position: 0% 82% 
 
    } 
 
    50% { 
 
    background-position: 100% 19% 
 
    } 
 
    100% { 
 
    background-position: 0% 82% 
 
    } 
 
}

<a class="bottone"> 
 
    Text 
 
    <div class="rainbow"></div> 
 
</a>

来源

2017-06-13 18:34:36

我怎么能告诉你我有多么爱你非常感谢你 – Lafa

欢迎:)不要忘记检查浏览器支持'mix-blend-mode'在我添加到答案的链接中。 –

我希望文字具有与边框相同的动画背景

回答

相关问题