使用css关键帧将span文本更改为图标
使用css关键帧将span文本更改为图标
提问于 2016-12-09 19:33:28
我用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关键帧。感谢你的帮助
回答 1
Stack Overflow用户
发布于 2016-12-11 00:59:30
我会在你的关键帧动画中使用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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41059535
复制相关文章
相似问题
腾讯云开发者
