关于jQuery配合CSS3实现背景图片滑动实例

最新推荐文章于 2021-06-15 17:26:53 发布

HeLang_qrf

最新推荐文章于 2021-06-15 17:26:53 发布

阅读量936

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： css3 javascript jquery

本文链接：https://blog.youkuaiyun.com/hl582567508/article/details/60750738

CSS3 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS3的@keyframes规则创建动画效果，并通过一个背景图片定位变化的例子展示了具体的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。下面是一个改变背景图片定位的一个动画效果，首先是定义动画：

 /*定义名为slide-bkg动画*/
        @keyframes slide-bkg {
            from{background-position: 0 0;}
            to{background-position: 0 55px;}
        }
        @-moz-keyframes slide-bkg {
            from{background-position: 0 0;}
            to{background-position: 0 55px;}
        }
        @-khtml-keyframes slide-bkg {
            from{background-position: 0 0;}
            to{background-position: 0 55px;}
        }
        @-webkit-keyframes slide-bkg {
            from{background-position: 0 0;}
            to{background-position: 0 55px;}
        }
        @-o-keyframes slide-bkg {
            from{background-position: 0 0;}
            to{background-position: 0 55px;}
        }

前缀为浏览性兼容性处理，IE10以前浏览器不支持CSS3动画效果，下面为调用动画效果。

 .active-state{
            background-image: url("images/active-state.png");
            background-repeat: no-repeat;
            background-position: 0 55px;
            animation: slide-bkg 0.2s;
            -moz-animation: slide-bkg 0.2s;	/* Firefox */
            -webkit-animation: slide-bkg 0.2s;	/* Safari 和 Chrome */
            -o-animation: slide-bkg 0.2s;	/* Opera */
        }

至此就将动画绑定在了选择器上了。整体页面请看下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习</title>
    <style>
        * {
            margin: 0px;
        }

        .container {
            width: 100%;
            height: 100px;
            background-color: #181818;
        }

        .container .logo {
            width: 350px;
            height: 100px;
            background-color: #28b865;
            margin-left: 200px;
            color: #ffffff;
            line-height: 100px;
            float: left;
        }

        .container .logo img {
            margin: 7px 20px;
            float: left;
        }

        .container .nav {
            width: 750px;
            height: 100px;
            line-height: 100px;
            float: right;
            margin-right: 200px;
        }

        .container .nav ul {
            float: right;
            color: white;
            list-style: none;
            font-size: 24px;
        }

        .container .nav li {
            float: left;
            margin: 10px 10px;
            /*border: #28b865 1px solid;*/
            cursor: pointer;
            z-index: 1;
        }

        .container .nav li a {
            display: block;
            width: 139px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            text-decoration: none;
            color: white;
            z-index: 3;
        }
        .active-state{
            background-image: url("images/active-state.png");
            background-repeat: no-repeat;
            background-position: 0 55px;
            animation: slide-bkg 0.2s;
            -moz-animation: slide-bkg 0.2s;	/* Firefox */
            -webkit-animation: slide-bkg 0.2s;	/* Safari 和 Chrome */
            -o-animation: slide-bkg 0.2s;	/* Opera */
        }
        /*定义名为slide-bkg动画*/
        @keyframes slide-bkg {
            from{background-position: 0 0;}
            to{background-position: 0 55px;}
        }
        @-moz-keyframes slide-bkg {
            from{background-position: 0 0;}
            to{background-position: 0 55px;}
        }
        @-khtml-keyframes slide-bkg {
            from{background-position: 0 0;}
            to{background-position: 0 55px;}
        }
        @-webkit-keyframes slide-bkg {
            from{background-position: 0 0;}
            to{background-position: 0 55px;}
        }
        @-o-keyframes slide-bkg {
            from{background-position: 0 0;}
            to{background-position: 0 55px;}
        }

    </style>
</head>
<body>
<div class="container">
    <div class="logo">
        <img src="images/templatemo_logo.png">
        <h2>综合练习</h2>
    </div>
    <div class="nav">
        <ul>
            <li  class="active-state"><a href="#">主页</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>

</div>
<script src="JS/jquery-3.1.1.min.js"></script>
<script src="JS/animateBackground-plugin.js"></script>
<script>
    $(document).ready(function () {
        $(".nav ul li").on("click",function () {
            $(this).addClass("active-state").siblings().removeClass("active-state");
        })
    })
</script>
</body>
</html>