简单的jquery.flexslider全屏图片切换搭配CSS文字动画

最新推荐文章于 2024-08-09 08:10:38 发布

心有猛虎细嗅之

最新推荐文章于 2024-08-09 08:10:38 发布

阅读量357

点赞数

分类专栏： coding 文章标签： JQuery 图片切换动画文字动画

本文链接：https://blog.csdn.net/weixin_42362393/article/details/93201408

版权

本文介绍了如何利用JQuery创建简单的全屏图片切换效果，并结合CSS实现文字动画，以创建一个极简登录背景特效。通过在html页面中添加图片和字体代码，然后编写图片切换动画脚本和CSS文字动画样式，实现文字从不同方向切入的动态效果。最终，确保字体动画与图片切换的时间同步，并引入必要的脚本文件，完成整个效果。

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

登录页越来越不满足于单一的背景，往往要求配以图文动画。但过于复杂的图片或动画特效往往会失去重点，得不偿失。本文采用JQuery实现简单的背景图片切换，搭配简洁的文字动画，营造极简的登录背景特效。

在这里插入图片描述

首先，新建一个html页面。先添加图片和字体部分代码，代码添加在标签下，如下：

<div class="flexslider">
        <ul class="slides">
            <li>
                <div class="fontcss1">
                   <span style="font-size:34px;font-weight:bold;color:#fefefe">我曾难自拔于世界之大</span>
                </div>
                <img class="slideimg" src='img/1.png' alt='' />
            </li>
            <li>
                <div class="fontcss2">
                    <span style="font-size:44px;font-weight:bold;color:yellow">也沉溺于其中梦话</span>
                &