我使用 jquery 打字插件 TypeIt.js (http://macarthur.me/typeit/) 制作了一些文本动画。 现在我有以下问题: 我想使用 css 关键帧将键入的 <3 动画化为心形图标,需要您的帮助。它不应该悬停,它应该在特定延迟后发生变化(可能在 TypeIt.js 输入我的 <3 文本后 1sek。
这是我的代码,但无法正常工作:
.hearticon {
animation-name: switch;
animation-delay: 1s;
animation-duration: 0.7s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
@-webkit-keyframes switch {
from {
opacity: 0;
}
100% {
opacity: 1;
background: url(img/heart.png);
width: 15px;
height: 15px;
}
}
@keyframes switch {
from {
opacity: 0;
}
100% {
opacity: 1;
background: url(img/heart.png);
width: 15px;
height: 15px;
}
}
<span class="hearticon"><3</span>
我不得不说我以前从未使用过 css 关键帧。 感谢您的帮助
最佳答案
对于这种情况,我会在关键帧动画中使用 position: absolute;
。我还建议为您的动画使用速记字符串。它在少写和加载页面时效率更高一点,它不必经过 5 行代码 - 相反它读取 1 行但做同样的事情。无论如何,简单的提示都有助于提高性能。
关于你的问题,下面是你所要求的作品。
HTML:
<span class="hearticon"><3</span>
CSS:
.hearticon {
animation: switch .7s ease-in forwards 1s; //Shorthand string versus having 5 lines of code here...('switch' = animation-name), ('.7s' = animation-duration), ('ease-in' = animation-timing-function), ('forwards' = animation-fill-mode), and ('1s' = animation-delay)
}
@-webkit-keyframes switch {
0% {
opacity: 0;
}
100% {
opacity: 1;
background-image: url("http://image.flaticon.com/icons/png/128/148/148836.png"); //Put your own image here
position: absolute;
width: 128px; //Adjust to your size
height: 128px; //Adjust to your size
}
}
@keyframes switch {
0% {
opacity: 0;
}
100% {
opacity: 1;
background-image: url("http://image.flaticon.com/icons/png/128/148/148836.png"); //Put your own image here
position: absolute;
width: 128px; //Adjust to your size
height: 128px; //Adjust to your size
}
}
其他提示: 使用关键帧时,您可能还需要考虑使用 firefox、IE 和 opera 的供应商前缀。我看到您有使用 -webkit- 前缀的 chrome 和 safari,但是如果您希望您的网站在多个浏览器之间兼容,我建议添加 -moz-、-o- 和 -ms-。
例如:
.hearticon {
-ms-animation: switch .7s ease-in forwards 1s; //Used for IE
-webkit-animation: switch .7s ease-in forwards 1s; //Used for chrome & safari
-moz-animation: switch .7s ease-in forwards 1s; //Used for Mozilla Firefox
-o-animation: switch .7s ease-in forwards 1s; //Used for Opera
animation: switch .7s ease-in forwards 1s; //Will become standard
}
还有:
@-ms-keyframes switch {
0% {
// Your code here
}
100% {
// Your code here
}
}
@-webkit-keyframes switch {
0% {
// Your code here
}
100% {
// Your code here
}
}
@-moz-keyframes switch {
0% {
// Your code here
}
100% {
// Your code here
}
}
@-o-keyframes switch {
0% {
// Your code here
}
100% {
// Your code here
}
}
@keyframes switch {
0% {
// Your code here
}
100% {
// Your code here
}
}
最后,一个工作 DEMO
关于jquery - 使用 css 关键帧将跨度文本更改为图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41059535/