CSS文字动画平移

最新推荐文章于 2024-08-01 22:25:03 发布

LM10-01

最新推荐文章于 2024-08-01 22:25:03 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/lilingmei000/article/details/76381586

版权

本文介绍了如何使用CSS创建文字水平或垂直平移的动画效果，通过改变`transform: translate()`属性值，实现文字在网页上的动态移动，为网站增添视觉吸引力。

摘要由CSDN通过智能技术生成

HTML代码：

<div class="area-header">
<div class="fade_block fade_left" fade-name="fade_left" style="visibility: visible; animation-name: fade_left;">
    <h3> 核心课程, 满足多样化需求</h3>
</div>
<div class="fade_block fade_right" fade-name="fade_left" style="visibility: visible; animation-name: fade_right;">
    <h4> 各大主流课程 涵盖面更广泛 授课更有针对性 实用性更强</h4>
</div>
</div>

CSS代码：

  .fade_left {
            animation-name: fade_left;
            -webkit-animation-name: fade_left;
        }
        .fade_block {
            animation-duration: 1s;
            animation-timing-function: ease-in;
            animation-fill-mode: both;
            -webkit-animation-duration: 1s;
            -webkit-animation-timing-function: ease-in;