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

<head>

<style>

#aa{

background-color: red;

width: 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; width: 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>

css动画特效与js动画特效（一）------2017-03-24的更多相关文章

  1. Web高性能动画及渲染原理（1）CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  2. CSS3动画与JS动画的优缺点？

    JS动画: 缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况. 2.JS动画代码复杂度高于CSS3动画. 优点: ...

  3. CSS3动画和JS动画的比较

    前言 之前有被问到一个问题,css3动画和js动画性能谁更好,为什么.据我的经验,当然觉得css3动画性能更好,至于为什么一时还真答不上来,所以特意查了一下资料总结一波. JS动画 优点: js动画控 ...

  4. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  5. wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  6. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  7. CSS VS JS动画，哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  8. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  9. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

随机推荐

  1. ThreadLocal模式的原理

    在JDK的早期版本中,提供了一种解决多线程并发问题的方案:java.lang.ThreadLocal类.ThreadLocal类在维护变量时,实际使用了当前线程(Thread)中的一个叫做Thread ...

  2. 使用动态内置的JSON 数据源

    自从ActiveReports 11发布以来,一个重磅功能推出,为Web开发人员又带来一大福利.JSON数据常常会通过WebService来动态生成JSON数据,因此动态链接JSON 数据内置参数会更 ...

  3. Ubuntu 14.04 64bit 系统下打开PHPadmin时出现缺少mysqli|mysql 扩展的解决方法(php5)

    网上找了很多方法,都是翻来覆去的抄袭. 都在说把 /etc/php5/apache2/php.ini 下面的  ;extension=php_mysqli.dll  前面的 ; 注释符号去掉 再重启 ...

  4. 谁该吃药了(线性判别法LDA小故事)

    一家"胡说八道医院"拥有一种治疗癌症的药物, 根据过去的记录, 该药物对一些患者非常有效, 但是会让一些患者感到更痛苦... 我们希望有一种判别准则能帮助我们判断哪些病人该吃药,哪 ...

  5. python - bilibili（三）wireshark分析

    当我们开始打开浏览器,并进入B站直播网页前,我们打开wireshark软件(软件的下载与安装请百度一下)开始截取当前数据. 然后输入直播间网址,enter进入就可以停止截取数据了,然后我们分析所截取的 ...

  6. 内存管理 （C++）

    转:http://hi.baidu.com/%D0%A1%B0%FC%D7%D349/blog/item/de1a8e4fa5eeafc3d0c86a68.html1.进程地址空间    Window ...

  7. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  8. Synchronize执行过程

    Synchronize执行过程及原理 在windows原生应用程序开发中,经常伴随多线程的使用,多线程开发很简单,难点就是在于线程的同步,在Delphi中提供了VC中不具备的一个过程Synchroni ...

  9. 第六篇 项目疑问 ------- BaseService<T> where T : class, new() 含义

    public abstract class BaseService<T> where T : class, new() { //当前仓储 //DbSession的存放 //为了职责单一的原 ...

  10. windows container (docker) 容器资料笔记

    背景 业务需求:简化公司私有云,公有云的部署,尝试寻找更好的,更优化的技术方案替换现有的虚拟机部署方案. 技术背景: .net Docker 学习资料 Docker中文社区: http://www.d ...