纯css3炫酷文字动画特效

当前位置:主页 > CSS3库 > CSS3动画 > 纯css3炫酷文字动画特效
纯css3炫酷文字动画特效
分享:

    插件介绍

    这是一款使用纯css3制作的文字动画特效。这款炫酷css3文字特效共有5种效果:上下滚动效果、淡入淡出效果、文字旋转效果、放大缩小效果和3d翻转效果。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-27
    阅读:

简要教程

这是一款纯css3制作的炫酷文字动画特效插件。这些特效的主要思想是使用CSS animations来使一个句子产生旋转、缩放等动画效果。

HTML

html结构是使用h2标签包含住固定不动的文字(span中的内容)和用于旋转等动画的文字(class为rw-words的div)。

<section class="rw-wrapper">
    <h2 class="rw-sentence">
        <span>Real poetry is like</span>
        <span>creating</span>
        <div class="rw-words rw-words-1">
            <span>breathtaking moments</span>
            <span>lovely sounds</span>
            <span>incredible magic</span>
            <span>unseen experiences</span>
            <span>happy feelings</span>
            <span>beautiful butterflies</span>
        </div>
        <br />
        <span>with a silent touch of</span>
        <div class="rw-words rw-words-2">
            <span>sugar</span>
            <span>spice</span>
            <span>colors</span>
            <span>happiness</span>
            <span>wonder</span>
            <span>happiness</span>
        </div>
    </h2>
</section>
                

css代码请参考下载文件。