相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 贝塞尔曲线.但是这些动画效果都是连续性的. 今天发现个新功能 animation-timing-function 的另外个属性值 steps()功能符,可以让动画不连续,就是制作逐帧动画.   steps(n,start/end)   第一个参数 number 为把动画分为 n 步阶段性展示,表示把…

steps() 设置间隔参数,可以实现分步过渡 第一个参数指定了时间函数中的间隔数量(必须是正整数)第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end. steps() 的实现方法: .heart{ background-image: url('images/heart-sprite.png'); -webkit-animation: animate 1s steps(28) infinite; animation: animate 1…

前言  在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是--我们只需定义动画起始和结束帧的状态的动画.一旦关键帧数大于2时,我们必须转向CSS Animation了.本文为这段时间学习的记录,欢迎拍砖. 简单粗暴介绍CSS Animation 规则和属性 定义关键帧动画 语法: @keyframes <Animation Name> { [<An…

Function类型 函数由于是Function类型的一个实例,所以函数名就是一个指向函数对象的指针,不会与某个函数死死的连接在一起,这也导致了js中没有真正的重载,但好处是,函数对象可以作为另一个函数的参数或是返回值; 访问一个函数对象的指针而不是执行函数本身不能加括号 var func = new Function("x", "y", "return x + y");// 构造函数来实例化一个Function类型, 但不推荐使用 functi…

Title/ CSS Background&Gradient完全指南 #Archives009 序: 关于 background 属性, 了解点CSS的人总会知道个大概. 但是你肯定多半还有点不会的吧(别在这装!), 比如你能手写CSS的6个渐变函数吗? 你知道bg-repeat中space和round的作用吗? 你能用纯CSS实现AI中的"任意渐变"吗? 这篇文章详细的整理了一遍CSS的Background和Gradient属性的各种诡异用法. 当然照顾萌新, 讲的会比较完整…

/* 在padding和margin这样的简写属性中,值赋值的顺序是top.right.bottom.left. 它们还有其他简写方式,例如给padding两个值,则第一个值表示top/bottom,第二个值表示left/right */ padding: 10px 15px 15px 5px;…

CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动画的方法,可以做出类似于 GIF 动画的效果. CSS3 Animation steps函数 首先看看,CSS3 animation的兼容性.可以看到基本上主流浏览器都支持了 animation 属性,chrome.safari.opera和移动端的浏览器带上前缀就可以支持. 利用雪碧图来制作动画使…

HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设置和清除元素的className属性来为元素添加或移除attention类 function grabAttention(e){e.className="attention";} function releaseAttention(e){e.className="";}…

薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗.这是什么鬼??? 待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此: Banner 以下的文字都会间歇性闪(chou)烁(feng). 鼠标移动到某个产品图上,在该元素以后区域的文字也会闪烁,而之前的元素都没问题. 通过现象可以观察到文字闪烁基本和动画有关,Banner 轮播图用到了 transform: translate3d,产品展示图缩放效果用到了transfo…

*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow: hidden; } div>img{ width: 100%; height: auto; position: absolute; z-index:; left: -100%; animation: out 1s; } ul{ position: absolute; top:560px; mar…