css3动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100% } animation-iteration-count:infinite; 无限循环播放 animation-play-state:paused; 暂停动画" 小汽车案例 body { background: white; } img { width: 200px; } .animation { animation-name: goback; animation-duration: 5s; animation-timing-function: ease; animation-iteration-count: infinite; } @keyframes goback { 0%{} 49%{ transform: translateX(1000px); } 55%{ transform: translateX(1000px) rotateY(180deg); } 95%{ transform: translateX(0)

css这块知识难点不是很多，更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结，另一方面也是希望能教大家一些实用的技巧和高效开发css的方式，以提高在工作中的效率。 我们将学到 box-shadow的高级应用 制作自适应的椭圆 纯css3实现饼图进度动画 用border来实现一个对话框样式 css3 filter的简单应用 css3伪元素实现自定义复选框 在线制作css3动画的利器 正文 1.box-shadow的高级应用 利用css3的新特性可以帮助我们实现各种意想不到的特效，接下来的几个案例我们来使用css3的box-shdow来实现，马上开始吧！ 实现水波动画 知识点：box-shadow 想想我们如果不用css3，是怎么实现水波扩散的动画呢？想必一定是写一大堆的js才能实现如下的效果： css3实现核心代码 <style> .wave { margin-left: auto; margin-right: auto; width: 100px; height: 100px; border-radius: 100px; border: 2px solid #fff; text-align: center; line-height: 100px; color: #fff; background: #06c url

css3的3d起步 要玩转css3的3d，就必须了解几个词汇，便是透视( perspective )、旋转( rotate )和移动( translate )。 透视 即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。 旋转 则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。 平移 同理。 当然用理论来说明，估计你还不明白。下面是3个gif： 沿着X轴旋转 沿着Y轴旋转 沿着Z轴旋转 旋转应该没问题了，那理解平移起来就比较容易了，就是在在X轴、Y轴、z轴移动。 你可能会说透视比较不好理解，下面我介绍一下透视的几个属性。 perspective perspective 英文名便是透视，没有这东西就没办法形成3D效果，但是这个东西是怎么让我们浏览器形成3D 效果的呢，可以看下面这张图，其实学过绘画的应该知道透视关系，而这里就是这个道理。 但是在css里它是有数值的，例如 perspective: 1000px 这个代表什么呢？我们可以这样理解，如果我们直接眼睛靠着物体看，物体就超大占满我们的视线，我们离它距离越来越大，它在变小，立体感也就出来了是不是，其实这个数值构造了一个我们眼睛离屏幕的距离，也就构造了一个虚拟3D假象。 perspective-origin 由上面我们了解了 perspective ，而加上了这个 origin 是什么

1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画，并且支持移动端触摸滑动。功能上，这款HTML5图片播放器支持鼠标滑动、手机端触摸滑动以及自动播放。外观上，这款HTML5图片切换动画的两侧有淡化处理，因此更显立体效果。 在线演示 源码下载 2.可爱的CSS3圆盘时钟动画 之前我们分享过一些基于CSS3和jQuery的圆盘时钟，比如纯CSS3实现圆盘时钟动画和HTML5/CSS3时尚的圆盘时钟动画。今天要分享的也是一款可爱的CSS3圆盘时钟动画，时钟背景是乳白色的，显得非常干净，另外，时钟也可以和你本地的时候保持同步。 在线演示 源码下载 3.CSS3 登录表单 个性化登录按钮 这是一款基于jQuery和CSS3的登录表单，登录表单的界面整体呈现扁平化风格，非常简洁和清新。当焦点在表单的输入字段上时，表单提示文字会出现一个小动画，同时这款CSS3登录表单的最大特点是其个性化的登录按钮，鼠标滑过也有不错的效果。 在线演示 源码下载 4.自适应jQuery焦点图插件 支持移动端触摸 今天我们要来分享一款很灵活的jQuery焦点图插件，和以前介绍的jQuery焦点图动画类似，它也提供左右切换按钮，同时在图片上悬浮自定义图片切换按钮。切换动画包括上下左右切入动画以及淡入淡出动画。这款jQuery焦点图最大的特点是支持移动端触摸功能。 在线演示 源码下载

1、HTML5的画布花朵生成器可生成多种样式的花朵 HTML5非常流行，利用HTML5制作动画也非常方便，今天要分享一款利用HTML5 Canvas制作的花朵生成器，我们只需要在Canvas画布上点击鼠标，即可动态生成各种颜色样式的花朵，并且每一朵花都可以缓慢地旋转，非常炫酷。 在线演示 源码下载 2、HTML5/CSS3仿谷歌播放的垂直菜单 今天介绍的一款CSS3菜单也是垂直菜单，是一款仿Google玩的垂直菜单，另外菜单左侧还有非常漂亮的小图标。 在线演示 源码下载 3、CSS3 3D按钮按钮有漂亮的边线 今天要分享的这款CSS3按钮效果非常不错，是一款3D的按钮特效，当按钮按下时，按钮便会凹陷下去，这款CSS3 3D按钮还有一个特点，按钮左侧边有漂亮的边线。 在线演示 源码下载 4、10款造型奇特的CSS3进度条 /加载动画 今天我们要分享10款造型奇特的CSS3进度条 /Loading动画，这10款进度条应用不仅有创意的外观，而且还有非常特别的动画效果。另外，有些进度条还可以用在Loading动画，效果也挺不错。 在线演示 源码下载 5、HTML5/CSS3动画进度条可用于投票结果分析 今天我们要来分享一款很酷的CSS3动画进度条插件，这款CSS3进度条还可以用在投票结果分析，效果也非常不错。 在线演示 源码下载 6、非常个性化的CSS3自定义复选框和RadioBox的

CSS3也有着非常强大的属性，那就是过渡——Transition。过渡——Transition在W3C的描述：“css的transition允许css的属性值在一定 的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 ”既然CSS3的过渡这么强大，下面我们就一点一点掌握它吧。 　　CSS3中的过渡Transition有四个中心属性：transition-property、transition-duration、transition-delay和transition-timing- function。 　　一、transition-property——指定要运动的样式 　　1、transition-property的语法 [css] transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变) 　　2、transition-property的属性值 　　(1)none：transition马上停止执行 　　(2)all：元素产生任何属性值变化时都将执行transition效果 　　(3)attr：指定要运动的样式 　　二、transition-duration 　　transition-duration是指定元素转换过程的持续时间

HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局，因为他们给这个领域带来了太多太多令人惊奇的新特性！我用大量时间学习了HTML5和CSS3技术，它们的动画、圆角等特效会令你震惊…在后面的内容将向大家推荐一些能帮助你更好的掌握甚至精通HTML5和CSS3的终极工具资源集合。虽然还有很多特性不被浏览器所支持，但我们作为前端开发从业者，有必要掌握它们。 HTML5 & CSS3 准备就绪 　　该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。 HTML5安全手册 CSS3按钮生成器 　　所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。 When can I use…（HTML5 & CSS3 浏览器兼容性） 　　很详细的关于HTML5, CSS3, SVG等技术的浏览器兼容性列表。 CSS3颜色值/名称速查手册 　　CSS3颜色值查询手册，包括颜色英文名、16进制值、rgb百分比、rgb整数值、颜色缩写和颜色效果等… CSS3生成器 　　在线测试CSS3新特性，即时生成效果。 Modernizr 当前浏览器对HTML5支持情况测试 　　该工具可以帮助你测试当前你使用的浏览器对HTML5的兼容情况，很详细

圆圈转动完整代码 html <div id="wrap"> <div class="box-left"> <div class="circle-left"></div> </div> <div class="box-right"> <div class="circle-right"></div> </div> </div> css #wrap{ width: 200px; height: 200px; margin: 200px auto; position: relative; border-radius: 50%; } /*底部圆圈*/ #wrap::before{ content: ""; position: absolute; width: 100%; height: 100%; box-sizing: border-box; left: 0; top: 0; border: 10px solid rgba(255,255,255,0.5); border-radius: 50%; } /*左右两个盒子里面各放着一个半圆圈，主要overflow*/ .box-left, .box-right{ width: 50%; height: 100%; box-sizing: border-box; position: absolute; top: 0; overflow:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> css3圆形轨迹动画 </title> <style type="text/css"> @keyframes animX{ 0% {left: 0px;} 100% {left: 500px;} } @keyframes animY{ 0% {top: 0px;} 100% {top: 500px;} } #ball { width: 20px; height: 20px; background-color: #f66; border-radius: 50%; position: absolute; animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate; } #lopp { width: 498px; height: 498px; border: 2px solid #999; border-radius: 50%; position: absolute; left: 9px; top: 9px; } </style> </head>

1、@keyframes 定义关键帧动画 2、animation-name 动画名称 3、animation-duration 动画时间 4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数) 5、animation-delay 动画延迟 6、animation-iteration-count 动画播放次数 n|infinite 7、animation-direction 动画结束后是否反向还原 normal|alternate 8、animation-play-state 动画状态 paused(停止)|running(运动) 9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用) 10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性 理解练习： 1、风车动画 2、loading动画 3、人物走路动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>走路动画</title>