首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >加载页面上的CSS3字母间距动画

加载页面上的CSS3字母间距动画
EN

Stack Overflow用户
提问于 2014-09-02 10:18:06
回答 1查看 879关注 0票数 2

这是我第一次尝试使用css3动画。我试图创建一个字母间距动画,在这个动画中,字母的间距在开始时是紧密的,然后字母间距增加。到目前为止,我已经找到了一个代码,允许间隔发生在悬停。如何在页面打开时移除悬停并制作动画。

这是小提琴http://jsfiddle.net/Lventbau/

和密码

代码语言:javascript
复制
p {
    letter-spacing:-2px; 
    -webkit-transition: letter-spacing, 1s;
    -moz-transition: letter-spacing, 1s;
    -o-transition: letter-spacing, 1s;
    transition: letter-spacing, 1s;
}
p:hover {letter-spacing:2px;}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-02 10:22:24

您可以通过css3动画小提琴来完成它:

代码语言:javascript
复制
p {
    letter-spacing:2px;
    -webkit-animation: myanim 1s;
    animation: myanim 1s;
}

@-webkit-keyframes myanim {
  0%   { letter-spacing: -2px; }
  100% { letter-spacing:2px; }
}
@keyframes myanim {
  0%   { letter-spacing: -2px; }
  100% { letter-spacing:2px; }
}

您可以找到动画文档这里

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25621026

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档