css动画特效与js动画特效(一)------2017-03-24
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的更多相关文章
- Web高性能动画及渲染原理(1)CSS动画和JS动画
目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...
- CSS3动画与JS动画的优缺点?
JS动画: 缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况. 2.JS动画代码复杂度高于CSS3动画. 优点: ...
- CSS3动画和JS动画的比较
前言 之前有被问到一个问题,css3动画和js动画性能谁更好,为什么.据我的经验,当然觉得css3动画性能更好,至于为什么一时还真答不上来,所以特意查了一下资料总结一波. JS动画 优点: js动画控 ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
随机推荐
- Android音频焦点详解(上)
转载请注明出处:http://www.cnblogs.com/landptf/p/6384112.html 2017年开年第一篇博客,很早就想总结一下Android音频的相关知识.今天我们先来看一下音 ...
- Android Studio 错误集
错误列表与解决方案: 1.Android studio Gradle project sync failed Android studio 构建项目出错 Error:Unable to start t ...
- Hadoop技巧(04):简易处理solr date 时区问题
阅读目录 序 创建collection 模拟程序 示例下载 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的, ...
- Xamarin组件包 Xamarin.ToolKit
一 简介 Xamarin.ToolKit是个人在使用xamrin.froms开发2年中,因实际项目需要所自定义的组件包.该组件包采用xamarin.froms方式封装,用户可像普通forms控件那样 ...
- 在Express的页面模板中的变量的定义与使用总结
前言 最近在使用Express框架中的ejs页面模板趟了些许坑,仅以本文记录总结. 本文简述的均为ejs页面模板. 创建ejs变量的各种方法 1. 在Nodejs定义的ejs变量 ejs由是在node ...
- JavaScript中国象棋程序(7) - 置换表
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第2节. 这一系列共有9个部分: 0.JavaScript中国象 ...
- ARM处理器:开放者的逆袭
作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载. 1981年,英国BBC电视台策划了一系列关于计算机的电视节目.但导演发现一个问题:怎么给没见过电脑的观众画 ...
- C++程序员的阅读清单
link:http://www.who1753.com/must-read-c-book-list/ 多读一些优秀的书籍,对于开发者稳固编程基础.提高编程技能有很大帮助.但是,大多时候,初学者不知道应 ...
- git链接GitHub命令及基本操作
Git是一款不错的代码管理工具,下面引用百科的一段话: Git是用于Linux内核开发的版本控制工具.与CVS.Subversion一类的集中式版本控制工具不同,它采用了分布式版本库的作法,不需要服 ...
- 【CNMP系列】CentOS7.0下安装PHP5.6.30服务
上一节我们讲过了如何在CentOS7.0下安装MySql服务,如果没有看到欢迎页面的朋友,可以加我的个人微信详聊:litao514148204 附上一节地址:http://www.cnblogs.co ...