css3 tween

/* * Tween.js * t: current time(当前时间) * b: beginning value(初始值) * c: change in value(变化量) * d: duration(持续时间) */ var Tween = { Linear: function(t, b, c, d) { return c*t/d + b; }, Quad: { easeIn: function(t, b, c, d) { return c * (t /= d) * t + b; },…

tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween.js允许你以平滑的方式修改元素的属性值.你只需要告诉tween你想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效果.例如,假设你有一个对象position,它的坐标为 x 和 y: var positio…

利用requestAnimationFrame和Tween算法实现兼容所有浏览器的运动动画，直接秒杀Css3动画

以下贴出Tween的代码: /* * Tween.js * t: current time(当前时间): * b: beginning value(初始值): * c: change in value(变化量): * d: duration(持续时间). * you can visit 'http://easings.net/zh-cn' to get effect */ var Tween = { Linear: function(t, b, c, d) { return c*t/d + b;…

利用tween，使用原生js实现模块回弹动画效果

最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回其实这个效果css3就可以很轻松实现,但是公司要求最低兼容ie7,只能说是无缘了后来,利用jq的animate也能够实现,但是不知道怎么回事当滚回去时有延迟,好几秒后才能隐藏不见. 最终使用tween能够完美实现,只能说原生js的强大了. tween其实是一个函数库,里面都是些公式,比如说运动轨迹的算数公式. 实现效果:其实就是一个小方块弹啊弹. 首先给…

前端的3D(css3版本)

其实是依托Css3的功劳,先上一个例子代码地址:链接: https://pan.baidu.com/s/1sldhljJ 密码: i6qh 这动画纵有万般变化,也离不开以下几个属性 transform (元素2D 3D转换) translate,3d,X,Y,Z (移动距离) scale,3d,X,Y,Z (缩放比例) rotate,3d,X,Y,Z (旋转角度) skew,X,Y (倾斜角度) transform-origin (允许被转换元素位置) left center right le…

前端的3D(css3版本)--淘宝造物节3D创景的制作

其实是依托Css3的功劳,先上一个例子链接: https://pan.baidu.com/s/1cZ-mMI01FHO3u793ZhvF2w 提取码: d3s7代码地址:链接: https://pan.baidu.com/s/1sldhljJ 密码: i6qh 这动画纵有万般变化,也离不开以下几个属性 transform (元素2D 3D转换) translate,3d,X,Y,Z (移动距离) scale,3d,X,Y,Z (缩放比例) rotate,3d,X,Y,Z (旋转角度) skew…

CSS3动画那么强，requestAnimationFrame还有毛线用？

一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多指教! .... 咳咳,大家不要一副不屑的样子嘛.跟你讲,我可是很有用的.所谓人如其名,看我名字这么长,表意为“请求动画帧”,明摆着一副很屌的样子! ....按照这种说法,“樱桃小丸子”就是樱桃做的丸子咯,恩,看脑袋确实蛮像的~ .... 想到明天就是国庆大假,今天我就小人不记大人过.给你们来副震精…

CSS3动画那么强，requestAnimationFrame还有毛线用--摘抄

CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3695 一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,…

css3 制作圆环进度条

引子移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给出的css代码代入,然后根据自己的需求改,发现圆环可以完美转动了,但是好像没法用百分比控制,所以放弃了随便copy一个现成的想法,该动动脑子还是有必要的. 实现原理 css实现圆环的方法很多,我看大部分都是采用边框(border)+ 裁剪(clip:rect())来实现的,所以我也准备采用这种方式.…

纯CSS3实现的一些酷炫效果

之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看下页面结构: <body> <div class="container">  <div class="face">  <div class="hair&…

CSS3 border-radius边框圆角

在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. border-top-right-radius :设置右上角边框的圆角样式. border-bottom…

CSS3 3D立方体效果－transform也不过如此

CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立方体的效果实例来深入了解css3的transform属性,下面是这个实例的截图,加上动画还能旋转起来哟,是不是很酷炫?换上你喜欢的女生的照片,就可以大胆的撩妹了,哈哈!想要查看demo,请点击这里,3D transform立方体效果初识transform 顾名思义:变换.就可以想到它可以做很多很多…

三分钟学会用 js + css3 打造酷炫3D相册

之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的js初学者感受到学习的乐趣.我会尽可能讲得详细,不需要你对css和js有多么高深的理解,你也可以跟着一步步做出来.如果你是为了讨女票开心,那么也完全可以把图片换成对方的照片,在某个特别的时刻给对方一个惊喜哦 ~ css3的强大使得网页的展示变得空前得丰富起来,再配合简单的js代码,就可以实现这个效果.…

使用CSS3实现一个3D相册

CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一个用CSS3实现的立方体实例,详细讲解了3D旋转和transform等属性. 本文再来利用CSS3属性来编写一个实例,话不多说,先直接看看效果.3D相册实例DEMO 因为前面已经讲解过一些属性的用法,此篇文章不再赘述,只记录这个实例的编码过程.项目代码已上传至github,项目代码github地址…

Web大前端时代之：HTML5+CSS3入门系列

准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTDotNet/ 思维导图(不断更新): 图片:http://dnt.dkill.net/DNT/HTML5/index.jpg 源码:http://dnt.dkill.net/DNT/HTML5/h5.zip 在线文档:http://dnt.dkill.net/DNT/HTML5 00.Web大前端时…

07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/dunitian/LoTHTML5/tree/master/LoTHTML5/4.HTML5定位定位类型 IP 定位优点任何位置都可用在服务器端处理缺点不精确,一般精确到城市运算代价大,可能出错代理的时候就可能定位出错了 GPS定位优点定位精准缺点定位时间长,耗电量大室内效果不好需要…

前端制作动画的几种方式（css3，js）

制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css的transition. 语法: transition: property duration timing-function delay; property:填写需要变化的css属性如:width,line-height,font-size,color等; duration:完成过渡效果需要的时间(…

原生js+css3实现图片自动切换，图片轮播

运用CSS3transition及opacity属性制作图片轮播动画自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播运用css3的opacity透明度属性和transition动画过度属性,用js对过程加以控制,也实现了js对CSS3中transition动画的触发实例链接地址:http://pspgbhu.github.io/opacity 今天突然发现这个代码有问题,主要出在html/css上,问题主要是由于使…

css3线条围绕跑马+jquery打字机效果

原文地址:css3线条围绕跑马+jquery打字机效果有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果,一起合并,稍微整理了下. 点这里(chrome浏览器):查看演示先来说说这个线条,我们会看到它是2条,实际上就是1个四周border有规律的显示隐藏,那么这里必定会想到after,before属性,我们暂且先考虑after. 先建立一个box,然后after一个边框 <div class="…

css3圆形百分比进度条的实现原理

原文地址:css3圆形百分比进度条的实现原理今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必用2个圆心相同,半径不同的div即可实现.大圆的颜色即为圆形进度条的底色,小圆的颜色即为中间百分比的遮罩颜色白色,还要加上左右2边一边一个半圆,也就是说总共应该有4个div,一个大圆的div中包含3个div,左右一边半个圆,遮罩div处于最上面. 那这里的一边半个圆怎么实现呢?使用css的clip属…

图解CSS3制作圆环形进度条的实例教程

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: .circleprogress{ width: 160px; height: 160px; border:20px solid red; border-radius: 50…

CSS3 @keyframes 动画

CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. 例子: @keyframes myfirst { from {background: red;} to {background: yellow;} }…

总结30个CSS3选择器

或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法.*选择器也可以应用到子选择器中,例如下面的代码: #container * { border:1px solid black; } 这样ID为container 的…

CSS3自定义滚动条样式 -webkit-scrollbar(转)

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 演示来看看这2个滚动条demo:demo1(图片版).demo2(纯CSS3版) 滚动条组成 ::-webkit-scroll…

css3制作旋转动画

现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来整理一下思路,这个圆轴轨迹上一共有八个圆. 仔细看的话,你会发现一个规律,那就是一个月是360度的,里面放了八个圆,也就是每个圆都是占了45度,然后平均的在圆轴上面分布开来.有了这个发现之后,我们就开始想想该怎么布局好啦.下面是我的布局方式,可以给大家参考一下: 我是每两个垂直对应的圆就放在同一个d…

深入理解css3中nth-child和 nth-of-type的区别

在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的.也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败. 文字未免听起来比较晦涩,便于理解,这里附上一个小例子:…

【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开) 本文完整的代码,以及更多的 CSS3 效果,在我 Github 上可以看到,也希望大家可以点个 star. 嗯,可能有些人打不开 demo 或者页面乱了,贴几张效果图:(图片有点大,耐心等待一会) CSS3 3D 行星运转效果图随机再截屏了一张: 强烈建议你点进 Demo页感受一下 CSS3…

酷酷的CSS3三角形运用

概述在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成.在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师! 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! Triangle DemoPage DemoGitHub Source 图…

吐血大奉献，打造cnblogs最新最火辣的css3模板（IE9以下请勿入内） -- 第一版

一直自己都想给自己的博客打造一个独一无二的皮肤,但是一直没有强劲的动力去完成这件事情.后来凭借着工作上面的需求(涉及到css3),就把自己的博客当成一个最好的试验场地.从而产生了你现在所看到的这个模板,强烈建议大家到我的博客首页转一圈.这个模板是自适应的,暂时没有做太多的自适应处理,但是也满足了基本的分辨率变化.(特别注明一下,首页是三栏结构的和文章内页的两栏结构是不一样的,因为我希望突出作者最新.最优秀的文章给读者第一时间关注) 好不好看这是一个见仁见智的问题了,不过为了制作这套模板确实花费了…

实现了一个百度首页的彩蛋——CSS3 Animation简介

在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩蛋简单来说可以分三步: 1.实现一些css动画类,等待调用: 2.设立关键字与动画匹配方法: 3.每当页面加载完成,根据关键字为body添加指定动画类. 查看DEMO:百度搜索彩蛋 CSS3 Animation animation: name duration timing-function de…

【css3 tween】的更多相关文章