不使用js或jquery,用css3实现一张图片的滑动.我用的是animation来设置所要应用的动画效果,首先在html中写好一个<div></div>,并放置一张图片在div中,然后就这样写css代码,要注意的是一定不能忘了给div加position: relative和img标签加上position: absolute的属性,否则不会出现效果。这也是我们经常在写一些动画效果时,容易粗心的地方。
.mc:hover img{    -webkit-animation:myAnimation 1s;//调用自定义动画函数,设置过渡时间为1秒
  //这个 animation 的过渡,做的是针对于谷歌浏览器的一个兼容,有四个参数,(1)是要参与过渡的属性,(2)过渡持续的时间(单位/s),(3)过渡的类型,(4)延迟过渡的时间
}
@-webkit-keyframes myAnimation{// 自定义动画函数
//从百分之1的时候开始变换到变换到100%的时候结束。translateX(水平方向平移)
  1%{      transform:translateX(-845px);//这样就是没写兼容任何浏览器的写法     -webkit-transform:translateX(-845px);//这是兼容谷歌浏览器的写法,兼容其他浏览器的无非也就是火狐(-moz-transition)IE(-ms-transition)opera(-o-transition)
    }    100%{        transform:translateX(0px);//        -webkit-transform:translateX(0px);    }}

css3中的animation的更多相关文章

  1. CSS3中的animation动画

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. css3中动画animation的应用

    <!DOCTYPE html> <html> <head> <style> /* @-webkit-keyframes anim1 { // 规定动画. ...

  3. css3中的animation属性

    作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html>    <head>        <styl ...

  4. 怎样使CSS3中的animation动画当每滑到一屏时每次都运行

    这个得结合js来做的.比如这里有3个层,js判断滚动到当前层位置的时候给其加上一个class即可,而加的这个class就是带css3执行动画的 class <div id="a1&qu ...

  5. 如何使CSS3中的animation动画当每滑到一屏时每次都运行

    这个我还没用过,但感觉以后会用到,就随手摘抄一下啦<div id="a1"></div> <div id="a2">< ...

  6. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  7. css3中的变形(transform)、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  8. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

随机推荐

  1. 关于pt与px

    pt:point,点,是印刷业一个标准的长度单位,1pt=1/72英寸:  在Windows里,默认的显示设置中,把文字定义为96dpi.这说明了:1px=1/96英寸:而1pt=1/72英寸,可以得 ...

  2. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  3. 【Android学习笔记】XmlResourceParser解析xml文件

    最近学习Android时,需要用到解析XML文件里的数据,可以用XmlResourceParser来解析xml文件,正好将此记录下来. XmlResourceParser里常用的字段和方法 首先先给出 ...

  4. SQL Server获取下一个编码字符实现继续重构与增强

        我在SQL Server获取下一个编码字符实现的博文中,虽然实现了这个问题,但是感觉维护起来比较麻烦,例如如果调整编码字符串的固定长度,就需要变更三个函数,这样的为何成本确实比较大.面向对象编 ...

  5. node.js下when.js(Promises/A)的实践

    假设一个业务场景: 通过rss地址,获取rss并保存于文件,rss地址保存于文件中. 完成该场景的业务需要完成3个任务: 1.从文件中读取rss地址. 2.获取rss. 3.保存于文件. 最后将这三个 ...

  6. 【工具】清理Windows Installer冗余文件(支持64位NT6.x系统)

    样子: 支持系统: Windows NT 5.x/6.x 32及64位所有系统.需.net framework 2.0运行环境 功能: 清理上述系统中冗余的Windows Installer补丁文件. ...

  7. 【SQL】靠谱的TRIM函数,附赠过程一枚

    SQL中有LTRIM和RTRIM这两个函数分别用于去除字符串的首.尾空格,缺乏常见的能同时去除首尾的TRIM函数,另外,这俩函数都只对[空格]有效,所以如果首尾是制表符.换行符等等[空白],它们是不处 ...

  8. QQ--模拟发表带图说说

    发表说说之前,必须登录. 模拟QQ登录 >> http://www.cnblogs.com/deeround/p/4386629.html 发表带图说说,自然少不了上传图片,我这使用的PC ...

  9. visual C++ 项目和解决方案的区别

    项目:         项目是构成某个程序的全部组件的容器,该程序可能是控制台程序.基于窗口的程序或某种别的程序.程序通常由一个或多个包含用户代码的源文件,可能还要加上包含其它辅助数据的文件组成.某个 ...

  10. SQL查询中in、exists、not in、not exists的用法与区别

    1.in和exists in是把外表和内表作hash(字典集合)连接,而exists是对外表作循环,每次循环再对内表进行查询.一直以来认为exists比in效率高的说法是不准确的,如果查询的两个表大小 ...