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>

  • 相关阅读:
    html页面自动运行php文件
    在数据库原有字段后增加新内容
    mysql判断字段不等于空
    php中的日期加减
    js验证只能输入中文
    session_start()关于Cannot send session cache limiter headers already sent错误解决方法
    php记录前一页面url
    打印功能
    js验证email
    用php获取本周,上周,本月,上月,本季度日期
  • 原文地址:https://www.cnblogs.com/chenguanai/p/6611337.html
Copyright © 2011-2022 走看看