zoukankan      html  css  js  c++  java
  • css动画特效与js动画特效(一)------2017-03-24

    1、用css做动画效果: 放鼠标才会发生 利用hover

    <head>

    <style>

                         #aa{

                                background-color: red;

                                  100px;

                                 height: 120px;

                                 margin-top: 50px;

                         }

                         #aa:hover{          /* 鼠标放在图片上发生的变化,鼠标移开效果停止*/

                                margin-left: 400px;

                                transition: 10s;        /* 变化时间为5秒*/

                                background-color: yellow;  /* 鼠标放上后颜色会由红色变为黄色*/

                                transform: rotate(360deg);    /* 以360度旋转的方式到指定地方*/    

                         }

                  </style>

           </head>

           <body>

                  <div id="aa"></div>

        2、  js动画效果:不用放鼠标可以自己移动  利用时间间隔

                  <div id="bb" style="background-color: yellow; 50px; height: 50px;

                         margin-left: 50px;" ></div>

                  <script>

                         var a=window.setInterval("change()",500);

                         function change(){

                                var d=document.getElementById("bb");

                                var c=d.style.marginLeft;

                                c=parseInt(c);

                                c+=1;

                                if(c<=500){

                                       d.style.marginLeft=c+"px";

                                        }

                                else{

                                       window.clearInterval(a);      -----清除间隔

                                }}

                  </script>

  • 相关阅读:
    家庭记账本APP开发准备(二)
    使用花生壳5做内网穿透
    课堂练习之可视化的强化版
    第五周总结
    课堂练习之疫情可视化
    第四周总结
    第三周总结
    第二周总结
    课堂练习之最大子数组
    软工第二学期开课博客
  • 原文地址:https://www.cnblogs.com/chenguanai/p/6611337.html
Copyright © 2011-2022 走看看