css3元素简单的闪烁效果实现(html5 jquery)

css3 Animation：


代码如下:

@-webkit-keyframes twinkling{    /*透明度由0到1*/
    0%{
       opacity:0; /*透明度为0*/
     }
    100%{
       opacity:1; /*透明度为1*/

}
  }

Jquery ：


代码如下:

$(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); //在对象element中添加闪烁动画

也可以在css样式里添加如下：


代码如下:

#element{

-webkit-animation: twinkling 1s infinite ease-in-out;
     }

注：动画名称为twinkling  时间为1s  动画次数为无限次  动画效果 ease-in-out

简单吧！其实用css3做动画效果，比用flash，javascript要方便简单多了！希望浏览器赶快都支持css3 Animation .目前webkit内核的浏览器都支持（safrai,chrome）

赞 (0)

相关推荐

  • asp.net正则表达式删除指定的HTML标签的代码

    如果全盘删除里面的 HTML 标签,可能会造成阅读上的困难(比如 a, img 这些标签), 最好是删除一部分,保留一部分. 正则表达式里,判断 包含某些字符串 是非常容易理解的,但是如何判断 不包含某些字符串 (是字符串,不是字符,是某些,不是某个) 确实是个费解的事. 复制代码 代码如下: <(?!((/?\s?li)|(/?\s?ul)|(/?\s?a)|(/?\s?img)|(/?\s?br)|(/?\s?span)|(/?\s?b)))[^>]+> 这个正则是判断HTML标签不

  • asp采集HTML内容常用代码,详讲正则采集

    先说一下采集原理: 采集程序的主要步骤如下: 一.获取被采集的页面的内容 二.从获取代码中提取所有用的数据 一.获取被采集的页面的内容 我目前所掌握的ASP常用获取被采集的页面的内容方法: 1.用serverXMLHTTP组件获取数据 复制代码 代码如下: Function GetBody(weburl) '创建对象 Dim ObjXMLHTTP Set ObjXMLHTTP=Server.CreateObject("MSXML2.serverXMLHTTP") '请求文件,以异步形式

  • 正则表达式与HTML5新元素

    正则表达式与HTML5新元素

    ProcessOn是一个在线协作绘图平台,为用户提供最强大.易用的作图工具! 它可以很方便的在线简单绘制一些东西,让自己去具体理解. 正则表达式 今日的正则只是学习正则的简单使用.在HTML5的标签属性的强大面前,我们已经可以不用去先学习javascript才能再去正则了,因为HTML5的input标签的pattern可以实现标签的验证,近似取代复杂的javascript使用正则验证表单,在未来一定会完全取代的. 正则的简单使用: [0-9] 查找任何从 0 至 9 的数字. [a-z] 查找任

  • Java/Js下使用正则表达式匹配嵌套Html标签

    Java/Js下使用正则表达式匹配嵌套Html标签

    通用 HTML 标签区配正则 最近看网站日志,发现有人在博客上转了我不知道几年前写的一个匹配 HTML 标签的正则,刚好最近也在做一些相关的事情,顿时来了兴趣.就拿回来改改,成了下面这样,可能会有一些 case 遗漏,欢迎修改,已知在内嵌 <script> 复杂内容的处理能力较弱,不过对纯 HTML 来说已经够用,拿来做一些分析工具还是不错滴. 复制代码 代码如下: <script type="text/javascript"> var str = "

  • javascript+HTML5自定义元素播放焦点图动画

    javascript+HTML5自定义元素播放焦点图动画

    这是一款基于HTML5的焦点图动画,它和其他焦点图不同的地方在于,它播放的不仅仅是图片,而是可以自定义控制的网页元素.它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动.打散.重新组合等,这款HTML5动画图片播放器算得上是高端大气上档次. 效果图: HTML代码 <div class="parallax-bg" id="slider-wrap"> <div class="slider para

  • php正则过滤html标签、空格、换行符的代码(附说明)

    复制代码 代码如下: $str=preg_replace("/\s+/", " ", $str); //过滤多余回车 $str=preg_replace("/<[ ]+/si","<",$str); //过滤<__("<"号后面带空格) $str=preg_replace("/<\!--.*?-->/si","",$str); //

  • asp自动补全html标签自动闭合(正则表达式)

    复制代码 代码如下: Function closeHTML(strContent) Dim arrTags, i, OpenPos, ClosePos, re, strMatchs, j, Match Set re = New RegExp re.IgnoreCase = True re.Global = True arrTags = Array("p", "div", "span", "table", "ul&qu

  • 用正则查找html中有id属性的html标签

    如: 字符串<div style="float:left" id="ab">123213</div><div class="a123">21314423</div> 不匹配<div class="a123">--</div>的内容 写这个例子可以用 <[a-zA-Z0-9][^>]+?id=[^>]+?>.*?</div>

  • css3元素简单的闪烁效果实现(html5 jquery)

    css3 Animation: 复制代码 代码如下: @-webkit-keyframes twinkling{    /*透明度由0到1*/    0%{       opacity:0; /*透明度为0*/     }    100%{       opacity:1; /*透明度为1*/ }  } Jquery : 复制代码 代码如下: $(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-

  • Jquery获取第一个子元素简单实例

    如获取id为divId的div下的第一个子div $("#divId").children("div").get(0) 但得到的是一个dom对象,如果要得到Jquery对象,要使用 $($("#divId").children("div").get(0)) 以上这篇Jquery获取第一个子元素简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • js+css3实现简单时钟特效

    本文实例为大家分享了js+css3实现简单时钟的具体代码,供大家参考,具体内容如下 1.实现了时钟的特效,可以转动,时间准确,画面美观大气: 2.用到了css3的transform: rotate,transform-origin:,伪元素,border-radius,定位,z-index等等 效果如图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

  • HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

    HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

    本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图.希望大家喜欢! 先来看看效果图: HTML5代码 首先我们使用HTML5的代码来创建一个html文档,将所需的quicksand类库,及其jquery类库,还有HTML5类库倒入,如下: <!DOCTYPE h

  • Html5+jQuery+CSS制作相册小记录

    Html5+jQuery+CSS制作相册小记录

    本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化了JavaScript编程 CSS 样式将表现与内容分离 话不多说,先上效果图: 代码如下: <!DOCTYPE html> <html> <head> <title>The second html page</title> <style ty

  • HTML5+jQuery实现搜索智能匹配功能

    HTML5+jQuery实现搜索智能匹配功能

    HTML5+jquery实现的搜索匹配效果,或者说是搜索过滤,当你在文本框输入一个字符时,如果下边的列表中有以此为开头的内容时,将自动为你显示相关内容,示例中仅列出了一些,用时候你可以自己再完善下,代码仅为您提供一种思路,我想对你是有帮助的 效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name=&q

  • wap图片滚动特效无css3元素纯js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所以下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面 问题根源主要是不能判断是点击还是拖动,手机

  • wap手机图片滑动切换特效无css3元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,

  • JavaScript css3实现简单视频弹幕功能

    JavaScript css3实现简单视频弹幕功能

    本文尝试写了一个demo模拟了最简单的视频弹幕功能. 思路: 设置一个<div>和所播放的video的大小一致,把这个div标签蒙在video上面用于放置弹幕.在video的右边放一个<ul>列表用于显示弹幕列表. 屏幕上面的弹幕,把内容放在<span>标签里面,一般一行字都是从左边飞到右边, 为了简单起见,这个移动就用了CSS3 的transition 属性.position设置为absolute, 那么就用的transition过度left属性,实现弹幕的移动.当然

  • 简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

    简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

    简单易用的jQuery 写的仿新浪微博 向下滚动效果 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $u

随机推荐