js实现 两个函数 即setInterval和setTimeout
setTimeout((function(){})(1/10),1*100) 该函数有两个参数,第一个为执行的函数,第二个为事件参数,即多长时间执行一次;
setInterval 用来执行连续的透明度变换,2000为间隔时间;
 
html文件中写一个<div id="animation"></div>的块级元素;css #animation{width:300px;height:300px;background:red}
js代码如下:这样就可以实现了~
css实现代码如下:
 

js和css分别实现透明度的动画实现的更多相关文章

  1. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  2. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  3. 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  4. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  5. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

  6. 原生JS、CSS实现的转盘效果(目前仅支持webkit)

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  7. 纯css做的安卓开机动画

    随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...

  8. js和jquery中有关透明度操作的问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置       透明度在IE浏览器 ...

  9. anime.js 实战:实现一个带有描边动画效果的复选框

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

随机推荐

  1. Html笔记(一)概述

    Html就是超文本标记语言的简写,是最基础的网页语言 Html是通过标签来定义的语言,代码都是由标签所组成 Html代码不用区分大小写 Html代码由<html>开始</html&g ...

  2. aix挂载centos 的nfs

    centos作为服务器,提供nfs文件系统,aix作为客户端,挂载centos的指定目录 (1)NFS的安装配置:centos 5 : yum -y install nfs-utils portmap ...

  3. POJ2479,2593: 两段maximum-subarray问题

    虽然是两个水题,但是一次AC的感觉真心不错 这个问题算是maximum-subarray问题的升级版,不过主要算法思想不变: 1. maximum-subarray问题 maximum-subarra ...

  4. 每个android项目都应该使用的android 库

    http://blog.teamtreehouse.com/android-libraries-use-every-project A good developer knows to never re ...

  5. glusterfs repo

    Installing Gluster For RPM based distributions, if you will be using InfiniBand, add the glusterfs R ...

  6. A Tour of Go Variables with initializers

    A var declaration can include initializers, one per variable. If an initializer is present, the type ...

  7. rcp(插件开发)The type XXX cannot be resolved. It is indirectly referenced from required .class files解决办法

    如果你在使用插件开发时遇到这个问题: The type org.eclipse.core.resources.IFile cannot be resolved. It is indirectly re ...

  8. mysql 不支持innodb的问题解决

    在新的机器上安装了mysql后,发现里面新创建的数据表的存储引擎都是myisam,于是 执行下面语句,把mysiam改为innodb. alter table tbl_test engine=inno ...

  9. 关于css中z-index 的应用

    我想很多人在应用中的会碰到这个问题,设置 z-index无效:无论设置为多高的数字都没有效果: 原因是在设置z-index之前必须满足一下两个条件: 1,给设置z-index的元素设置相应的定位值,p ...

  10. 导演类(CCDirector)