css3动画

如何停止CSS3的动画?

孤街醉人 提交于 2020-01-05 14:33:25
前言 相信对移动端有了解的朋友对iScroll这个库非常熟悉吧,今天我们就来说下我们移动页面的iScroll化 iScroll是我们必学框架之一,我们这次先根据iScroll功能自己实现其功能,然后再学习iScroll源码 下面先给出iScroll官方的例子和源码,要看效果的朋友自己去看吧: https://github.com/cubiq/iscroll 本人能力有限,文中有误请提出 viewport 在移动端新出了一个属性叫做“viewport”,这个便是我们手机上的虚拟视口(viewport),也就是视觉窗口,显示区域 移动设备的显示区域比电脑小得多(但也方便得多),为了让手机显示的更加友好,Apple提供了一个方法:在浏览器定义了viewport meta标签 他的作用就是创建一个虚拟窗口,这个虚拟窗口接近桌面浏览器(980px),事实上viewport就是用以放大缩小网页内容 <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。 height:和 width 相对应,指定高度

【CSS3】loading动画

一个人想着一个人 提交于 2020-01-05 02:54:22
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading</title> </head> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>loading</p> </div> </body> </html> CSS: <style> * { margin: 0; padding: 0; list-style: none; } div { width: 85px; height: 70px; margin: 50px auto; } ul { width: 85px; height: 50px; } li { width: 8px; height: 50px; background-color: green; float: left; margin-left: 5px; animation: loading 1.2s ease-in-out infinite; } p { text-align: center; vertical-align: middle; } li:nth-of-type(1) { animation-delay: -1.1s; }

简单的CSS3 Loading动画

Deadly 提交于 2020-01-05 02:34:56
  最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单,分别是border-radius、伪元素、css3关键帧以及animation动画。   首先整理一下大概的思路:整个圆分为AB两部分,左右都是半圆,上面盖了一个背景色为白色的小圆,如右图,简单布局如下:    <style> .loading{margin:100px auto; width: 8em; height: 8em; position: relative;} .loading .progress{position: absolute; width: 6em; height:6em; background-color: white; border-radius: 50%; left: 1em; top: 1em; line-height: 6em; text-align: center; } .left,.right{width: 4em;height: 8em;overflow: hidden; position: relative; float: left;} .left{ border-radius: 8em 0 0 8em;} .right{ border-radius: 0 8em 8em 0;} .left:after,.right:after

css3动画-加载中...

删除回忆录丶 提交于 2020-01-05 02:29:51
写几个简单的加载中动画吧。 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小。css3里面有一个用于尺度变换的方法: scale( x , y ) : 定义 2D 缩放转换,改变元素的宽度和高度 。 第四种就是一个小球从上往下跌落,再弹回去,在上面的时候速度最小,下面的时候速度最大。由于该小球只进行了上下的移动,所以我们可以运用: translateY( n ):定义 2D 转换,沿着 Y 轴移动元素, 从而实现小球沿Y方向来回移动。 废话不多说了,上代码。 首先,第一个加载中的动画: 1 <div id="loading1"> 2 <div class="demo1"></div> 3 <div class="demo1"></div> 4 <div class="demo1"></div> 5 <div class="demo1"></div> 6 <div class="demo1"></div> 7 </div> html Code 1 .demo1 { 2 width: 4px; 3 height: 4px; 4 border-radius: 2px; 5 background: #68b2ce; 6 float: left; 7 margin: 0 3px; 8 animation: demo1 linear 1s infinite; 9 -webkit

CSS3新增特性详解(一)

匆匆过客 提交于 2020-01-03 16:20:11
注:由于CSS3的新特性较多,所以分两篇博文来说明。第一篇主要包括新的选择器、文字及块阴影、多背景图、颜色渐变、圆角等。第二篇主要细说CSS3的各种动画效果,如:旋转、移动、缩放等,还包括图标字体的应用。 CSS3属性选择器: a[href$=‘.pdf’] 表示 href属性中以.pdf结尾的被选中 a[href^=‘mailto’] 表示href属性中以mailto开头的被选中 a[href*=‘item’] 表示href属性中含有item的都被选中 其中a只是指代元素标签 现有三个div,他们的属性name的值各不同: 样式如下: 加入选择器: 效果: 再加入一属性选择器: 效果: 选择器的用法相信大家已经比较熟练了,这里也比较简单就不再赘述了。这种属性选择器比较多用在 href 属性中,通过载入文件名的不同后缀名来做出相应的选择,如:.jpg .png .gif等等。 CSS3伪类选择器: 现有一表格如下: 加入伪类选择器: :nth-of-type 可以通过参数来选择表格的奇数行或偶数行, odd 代表奇数行, even 代表偶数行。 效果: :nth-child 伪类,同样是用来选择行。参数为 n 时选中所有行,参数为 n+i 时表示从第 i 行开始下面的都被选中, 2n 表示 2 的倍数行被选中,即偶数行, 3n 表示 3 的倍数行被选中。 效果: n+i: 2n:

一款基于css3的散子3D翻转特效

放肆的年华 提交于 2020-01-03 08:09:31
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程。 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body> <div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class="page" id="page2">..</div> <div class="page" id="page3">...</div> <div class="page" id="page4">....</div> <div class="page" id="page5">.....</div> <div class="page" id="page6">......</div> </div> </div> </body> 在body中定义一个叫做outer的div,它是最外层的div,用来提供一个3D场景,可以认为它是一个3D图形的展示平台,只有定义了这样一个div,才能够展示3D图形,此外定义一个class为group的div,用来盛放色子的六个平面,将它们组合在一起。最后再定义6个平行的div,表示色子的六个平面。 第二步,定义三维场景的css,代码如下: #outer{ /*定义视距*/ -webkit-perspective

HTML5实践 -- 使用css3创建动态3d立方体

怎甘沉沦 提交于 2020-01-03 08:08:58
  在今天的课程中,我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果,操作上下左右键,实现立方体的翻转效果。   demo地址: http://www.paulrhayes.com/experiments/cube-3d/   demo下载地址: animated-css3-cube.zip   下面我们开始介绍如何制作。   html: <div id="experiment"> <div id="cube"> <div class="face one"> One face </div> <div class="face two"> Up, down, left, right </div> <div class="face three"> Lorem ipsum. </div> <div class="face four"> New forms of navigation are fun. </div> <div class="face five"> Rotating 3D cube </div> <div class="face six"> More content </div> </div> </div>   上面的html中,class为face的6个div分别代表立方体的6个面,使用one到six的class名字对他们加以区分

CSS3制作漂亮的照片墙

自作多情 提交于 2020-01-02 22:29:03
CSS3可以做动画大家肯定都是耳熟能详的了,但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢? 那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧! 第一部分:HTML 这里我们首先放十张图片在页面上面。(有什么靓照尽管上来哦!) <div class="content"> <img class="pic1" src="img/1.jpg" /> <img class="pic2" src="img/2.jpg" /> <img class="pic3" src="img/3.jpg" /> <img class="pic4" src="img/4.jpg" /> <img class="pic5" src="img/5.jpg" /> <img class="pic6" src="img/6.jpg" /> <img class="pic7" src="img/7.jpg" /> <img class="pic8" src="img/8.jpg" /> <img class="pic9" src="img/9.jpg" /> <img class="pic10" src="img/10.jpg" /> </div> 第二部分:CSS3 这一部分就是我们这节的重点了,如上图所示照片的位置各不相同,我们肯定会用到CSS3一下的知识点: CSS3的旋转

我的收藏

馋奶兔 提交于 2019-12-26 00:17:51
平时收藏了一些好的站点,在些谢谢那些作者: Bookmarks 书签栏 书签工具栏 综合 看雪安全论坛 - www.pediy.com 蓝色理想 经典论坛-前端开发 UI设计 web编程 w3school 在线教程 DIV+CSS教程_DIV+CSS布局_十天学会div+css_web标准化——标准之路 禅意花园 学习编程 | Codecademy 51CTO.COM - 技术成就梦想 - 中国领先的IT技术网站 后代选择器和子选择器的区别!!! - Knuth_档案 - 博客园 详细解读DIV+CSS定位 CSS/DIV网页设计视频教程目录 - CSS,Javascript,jQuery,视频教程 - Web网页设计开发制作技巧,前沿视频教室 CSS论坛 - DIVCSS5 前端练习系列60-ie绝对定位点击的问题 | <前端开发> CSS3-HTML5之家 中文CSS3,HTML5教程网站 让IE也支持box-shadow | Web前端开发 – 专注于网站前端设计与Web用户体验 W3CPlus | css3教程-css3实例-css3动画 | 记述前端那些事——引领Web前沿 22款给力的HTML5和CSS3帮助工具前端集锦工具 | 前端开发网(W3Cfuns.com)! RD1012: 不同浏览器内 'line-height' 样式设置会影响不同行内替换元素的显示高度 -

CSS3动画【归纳总结】

南笙酒味 提交于 2019-12-24 15:39:54
<!---网易的动画如下---> <style> .dhb66{ width:300px; height:300px; border:1px solid #f00;} .dhb66:hover{ box-shadow: 3px 3px 6px rgba(0,0,0,0.2); -webkit-transform: translate(-2px,-2px); -moz-transform: translate(-2px,-2px); -ms-transform: translate(-2px,-2px); -o-transform: translate(-2px,-2px); transform: translate(-2px,-2px); transition: all ease-in-out .1s; } </style> <!--------- 的动画如下:----------------------------> transition: transform .2s ease-in; <!---------淘宝小三角的动画如下:----------------------------> <b></b> b { -webkit-backface-visibility: hidden; display:inline-block; vertical-align:middle;