用JS制作网页动画_安全

首先你的效果有问题，因为移动，是只怎么移动？平移？上下移动？还是只旋转？如果移动的话那方块移出鼠标不就自己动又回去了吗？这是一个问题~
如果只是旋转变大的话可以用CSS3的属性，用JQ控制一下就可以了~百度一下，CSS3旋转就知道怎么用了~

引入jquery

然后给你要设置动画的对象增加或者删除css3动画的类就可以了。

如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        body{
            padding: 20px;
            background-color:#FFF;
        }
        colorchange
        {
            animation:myfirst 5s;
            -moz-animation:myfirst 5s; / Firefox /
            -webkit-animation:myfirst 5s; / Safari and Chrome /
            -o-animation:myfirst 5s; / Opera /
        }
        @keyframes myfirst
        {
            from {background:red;}
            to {background:yellow;}
        }
        @-moz-keyframes myfirst / Firefox /
        {
            from {background:red;}
            to {background:yellow;}
        }
        @-webkit-keyframes myfirst / Safari and Chrome /
        {
            from {background:red;}
            to {background:yellow;}
        }
        @-o-keyframes myfirst / Opera /
        {
            from {background:red;}
            to {background:yellow;}
        }
        #main{
            width:100px;
            height:100px;
            background:red;
        }
        #cgbt{
            width: 100px;
            margin: 20px 0 0 0;
            text-align: center;
            cursor: pointer;
        }
        #cgbt:hover{
            background-color: #2D93CA;
        }
    </style>
</head>
<body>
<div id="main">
    我会变么？
</div>
<div id="cgbt">
    点我让上面的变颜色
</div>
<script src="jquery-321minjs" type="application/javascript"></script>
<script>
    $(document)ready(function(){
        $("#cgbt")click(function(){
            $("#main")attr("class","colorchange");
        });
    });
</script>
</body>
</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/yw/13393576.html

用JS制作网页动画

发表评论

评论列表（0条）