css3中的animation
不使用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的更多相关文章
- CSS3中的animation动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- css3中动画animation的应用
<!DOCTYPE html> <html> <head> <style> /* @-webkit-keyframes anim1 { // 规定动画. ...
- css3中的animation属性
作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html> <head> <styl ...
- 怎样使CSS3中的animation动画当每滑到一屏时每次都运行
这个得结合js来做的.比如这里有3个层,js判断滚动到当前层位置的时候给其加上一个class即可,而加的这个class就是带css3执行动画的 class <div id="a1&qu ...
- 如何使CSS3中的animation动画当每滑到一屏时每次都运行
这个我还没用过,但感觉以后会用到,就随手摘抄一下啦<div id="a1"></div> <div id="a2">< ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- css3中的变形(transform)、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- css3中的动画效果
css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...
- css3中的制作动画小总结
系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...
随机推荐
- 关于pt与px
pt:point,点,是印刷业一个标准的长度单位,1pt=1/72英寸: 在Windows里,默认的显示设置中,把文字定义为96dpi.这说明了:1px=1/96英寸:而1pt=1/72英寸,可以得 ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- 【Android学习笔记】XmlResourceParser解析xml文件
最近学习Android时,需要用到解析XML文件里的数据,可以用XmlResourceParser来解析xml文件,正好将此记录下来. XmlResourceParser里常用的字段和方法 首先先给出 ...
- SQL Server获取下一个编码字符实现继续重构与增强
我在SQL Server获取下一个编码字符实现的博文中,虽然实现了这个问题,但是感觉维护起来比较麻烦,例如如果调整编码字符串的固定长度,就需要变更三个函数,这样的为何成本确实比较大.面向对象编 ...
- node.js下when.js(Promises/A)的实践
假设一个业务场景: 通过rss地址,获取rss并保存于文件,rss地址保存于文件中. 完成该场景的业务需要完成3个任务: 1.从文件中读取rss地址. 2.获取rss. 3.保存于文件. 最后将这三个 ...
- 【工具】清理Windows Installer冗余文件(支持64位NT6.x系统)
样子: 支持系统: Windows NT 5.x/6.x 32及64位所有系统.需.net framework 2.0运行环境 功能: 清理上述系统中冗余的Windows Installer补丁文件. ...
- 【SQL】靠谱的TRIM函数,附赠过程一枚
SQL中有LTRIM和RTRIM这两个函数分别用于去除字符串的首.尾空格,缺乏常见的能同时去除首尾的TRIM函数,另外,这俩函数都只对[空格]有效,所以如果首尾是制表符.换行符等等[空白],它们是不处 ...
- QQ--模拟发表带图说说
发表说说之前,必须登录. 模拟QQ登录 >> http://www.cnblogs.com/deeround/p/4386629.html 发表带图说说,自然少不了上传图片,我这使用的PC ...
- visual C++ 项目和解决方案的区别
项目: 项目是构成某个程序的全部组件的容器,该程序可能是控制台程序.基于窗口的程序或某种别的程序.程序通常由一个或多个包含用户代码的源文件,可能还要加上包含其它辅助数据的文件组成.某个 ...
- SQL查询中in、exists、not in、not exists的用法与区别
1.in和exists in是把外表和内表作hash(字典集合)连接,而exists是对外表作循环,每次循环再对内表进行查询.一直以来认为exists比in效率高的说法是不准确的,如果查询的两个表大小 ...