html – Firefox字体动画问题

2024年1月4日 242次阅读

两个问题：

我在Codepen上发现了一个非常酷的字体动画,但丢失了链接.过去一小时我一直在网上寻找它,没有运气！

但无论如何,这段代码存在问题. Firefox不会给我我想要的结果.我已经尝试将-moz-添加到大多数代码中,但是相同的背景图像显示在我下面的图片中.

这是不可能的Firefox？

我的第二个问题是：当你将鼠标悬停在按钮上时,我希望字体能够以一种淡入效果来改变文本.我做到了,但悬停文本上的动画不会移动.我猜这是因为div附加了两个动画;有没有解决的办法？

我该如何解决这些问题？谢谢你的时间.

.font{
position:fixed;
width: 100%;
left: 5%;
top: 5%;
}
.font:before{
position:absolute;
content:"TEST";
top: -10px;
 	font: 700 5em/1 "Orbitron", sans-serif;
 	letter-spacing: 0;
 	padding:.25em 0.325em;
display: block;
margin: 0 auto;
 	text-shadow: 0 0 80px rgba (255,255,255,.5);
background: url(https://media.24ways.org/2008/02/pattern-howto01.gif) repeat-y;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-moz-animation: aitf 10s linear infinite;
-moz-transform: translate3d(0,0,0);
-moz-backface-visibility: hidden;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: aitf 10s linear infinite;
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}
@keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }	
}
@-webkit-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@-moz-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.icon {
position: relative;
width: 50px;
height: 50px;	
top: 150px;
border-radius: 50%;
border: solid 5px black;
cursor: pointer;
font-size: 30px;
text-align: center;
vertical-align: middle;
line-height: 50px;
margin: 0 0.8%;
background: #730A0C;
}
.icon:hover ~ .font:before{
content:"TEST2";
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;
background-position: center;
}
/*Fade Inn Animation*/
@keyframes fadein {
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
    opacity:0;
}
to {
    opacity: 1;
}
}
/*Fade Inn Animation*/
<div class="icon"> </div>
<div class="font"> </div>

最佳答案
text-fill-color财产在2016年8月
Firefox 48发布之前不在Firefox中.目前唯一支持此属性的浏览器是使用-webkit-前缀的Chrome,Safari和Opera.

点赞