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. 使用PMD进行代码审查

    很久没写博客了,自从上次写的设计模式的博客被不知名的鹳狸猿下架了一次之后兴趣大减,那时候就没什么兴致写博客了,但是这段时间还没有停下来,最近也在研究一些其他的东西,目前有点想做点东西的打算,但好像也没 ...

  2. Python学习--16 正则表达式

    正则表达式是一种描述性的语言,用来匹配字符串.凡是符合规则的字符串,我们认为就是匹配了. 正则表达式并非Python独有的,它与语言无关.很多语言都支持正则表达式. 我们经常用正则表达式来匹配电子邮件 ...

  3. Dynamics CRM 2015-Auto Save

    Auto Save,顾名思义,就是不需要明确地点击Save按钮,自动保存.这个功能在创建CRM Organization的时候,默认是开启的. 需要注意的是: 1. Auto Save适用于Main ...

  4. Angular2的模块架构浅谈

    引言angular2相比1引入了更完善的模块系统,回忆ng1的应用中通常在页面的html标签或body标签中添加ng-app节点,值为应用的模块名,整个应用都将围绕这个模块来展开,到了ng2,模块概念 ...

  5. object c入门

    无意间看到Object C编写的程序,感觉蛮有意思的,记载下来,慢慢品味,也许会有用得上的时候.吼吼~~ 大部分有一点其他平台开发基础的初学者看到XCode,第一感想是磨拳擦掌,看到 Interfac ...

  6. JavaScript中国象棋程序（5） - Alpha-Beta搜索

    "JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第5节. 这一系列共有9个部分: 0.JavaScript中国象 ...

  7. 在javascript中关于变量与函数的提升

    在javascript中关于变量与函数的提升 一.简介 在javascript中声明变量与函数的执行步骤: 1.先预解析变量或函数声明代码,会把用var声明的变量或者函数声明的代码块进行提升操作 2. ...

  8. Linux实战教学笔记18:linux三剑客之awk精讲

    Linux三剑客之awk精讲(基础与进阶) 标签(空格分隔): Linux实战教学笔记-陈思齐 快捷跳转目录: * 第1章:awk基础入门 * 1.1:awk简介 * 1.2:学完awk你可以掌握: ...

  9. RAC之常用方法-----新手入门

    年后换工作新入职,公司开发在使用RAC,之前居然一直没有了解过,独立开发的弊端,信息闭塞,而且自己也懒,这几天看了下RAC,确实很强大有木有. 什么是ARC 简单的说,RAC就是一个第三方库,他可以大 ...

  10. 调用android方法，出现版本太低解决方法

    原因如下图所示: 调用需要API级别11,当前是8. 解决方法如下图所示: 点击