CSS样式 - ASP.NET技术论坛 - 编程论坛档案馆

awl805

等　级：贵宾
威　望：15
帖　子：161
专家分：664
注　册：2012-11-6

第 2 楼

得分:10

除非你自己做成gif动画，或者只是要求简单的鼠标悬停效果，不然没有js是不可能的，你参考下用滤镜

2013-04-08 10:14

拾荒者lxm

等　级：新手上路
帖　子：4
专家分：0
注　册：2015-7-17

第 4 楼

得分:0

给你一个实例。。。。。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>圣诞主题</title>
    <style type="text/css">
    .bird {
        min-width: 4rem;
        min-height: 2rem;
        top: 10%;
        right: 0;
        position: absolute;
        z-index: 10;
        background: url(http://img.);
        background-size: 300% 100%;
    }

    .birdFly {
        /*写法1*/
        -moz-animation-name: bird-slow;
        -moz-animation-duration: 400ms;
        -moz-animation-timing-function: steps(1,start);
        -moz-animation-iteration-count: infinite;

        /*写法2*/
        -webkit-animation:bird-slow 400ms steps(3) infinite;
    }

    @-webkit-keyframes bird-slow {
        0% {
            background-position: -0% 0%;
        }
        100% {
            background-position: -300% 0%;
        }
    }

    @-moz-keyframes bird-slow {
        0% {
            background-position: -0% 0%;
        }
        50% {
            background-position: -100% 0%;
        }
        75% {
            background-position: -200% 0%;
        }
        100% {
            background-position: -300% 0%;
        }
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://img.
</head>

<body>
    <div class="bird birdFly"></div>
    <button>点击运动</button>
</body>
<script type="text/javascript">

    $("button").on("click",function(){
        /**
         * 通过transition的方式改变运动
         */
        $(".bird").transition({
            'right': "3rem",
        }, 10000, 'linear', function () {
            alert("结束")
        });

    })
    var docEl = document.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            //设置根字体大小
            docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
        };

    //绑定浏览器缩放与加载时间
    window.addEventListener(resizeEvt, recalc, false);
    document.addEventListener('DOMContentLoaded', recalc, false);
</script>

</html>

2015-12-18 13:18