逐帧动画抖动实施方案，推荐8款CSS3贯彻的动态特

CSS技术：逐帧动漫抖动实施方案

2017/08/16 · CSS · 动画

原稿出处： 坑坑洼洼实验室   

小编所在的前端团队首要从事活动端的H5页面开采，而团队动用的适配方案是: viewport units rem。具体能够参见凹凸实验室的稿子 – 接受视口单位落到实处适配布局 。

作者前段时间（2017.08.12卡塔 尔（英语：State of Qatar）接触到的运动端适配方案中，「利用视口单位落到实处适配布局」是最佳的方案。不过使用 rem 作为单位会遭逢以下多个难题：

  • 微观尺寸（20px左右卡塔 尔（英语：State of Qatar）定位不许
  • 逐帧动漫轻巧有震憾

首先个困难的平凡出今后 icon 绘制进程，可以选拔图片或者 svg-icon 消除那些标题，笔者刚毅建议使用 svg-icon，具体理由能够敬仰：「拥抱Web设计新倾向：SVG 七喜s施行应用」。

其次个难点作者举个例证来解析抖动的原原本本的经过和搜索解决方案。

三个板栗上手 CSS3 动漫

2017/05/10 · CSS · 2 评论 · CSS3, 动画

正文作者： 伯乐在线 - 陈被单 。未经笔者许可，禁止转发！
应接参加伯乐在线 专辑作者。

前日混乱的事体比非常多，非常多学问都没来得及计算，是时候计揣度算，开启新的篇章～

本篇小说不生龙活虎一列举CSS3动画片的习性，若要求领会API，可前往MDN 。

在开端栗子前，大家先补补基本功知识。

css3动漫分类：

  • 补间动漫 – 具备连贯性的动画片
  • 逐帧动漫 – 使用steps过渡方式落实跳跃

animation常用属性及形貌：

animation: name duration timing-function delay iteration-count direction;

1
animation: name duration timing-function delay iteration-count direction;

1. timing-function属性：  

  • ease 规定慢速在这里早先，然后变快，然后慢速截止的联网效果。
  • ease-in 规定以慢速最早的衔接效果。
  • ease-out 规定以慢速截至的连结效果。
  • ease-in-out 规定以慢速起始和终结的连片效果。
  • linear 动漫自始至终的快慢是平等的。
  • cubic-bezier（n,n,n,n卡塔 尔（阿拉伯语：قطر‎ 在cubic-bezier函数中温馨的值，n取值为0～1
  • steps()

2. delay属性：用于将动漫片与别的动漫片的实施机会错开，将动漫落到不一样的时间点。那几个天性很好用～

动漫片原则：

  1. 挪动日常常有个惯性，所以要先快后有两个慢一点的反弹。
  2. 背景若选取四个少于熠熠闪闪，错位闪烁

配合JS使用

slide.addEventListener("webkitAnimationEnd", function() { console.log('eeee') //动漫截至再调用 });

1
2
3
slide.addEventListener("webkitAnimationEnd", function() {
   console.log('eeee') //动画结束再调用
});

稍稍情状大家必要确定保障动漫甘休后再开展其余一些相互，可采取该事件监听。

实战练习：

若是大家须求贯彻三个那样回顾的动漫片：

图片 1

稳重观看地点的卡通片，大家开掘，它能够由以下3局部构成：

  1. 登场动漫——从右往左移动

  2. 反正循环往复移动

  3. 逐帧动漫

兑现方式：

使用3个dom元素，最外层dom达成登台动漫，第二层dom实现左右平移，第三层dom完毕逐帧动漫。

可取：调节和测量检验方便，节省时间。

缺点：dom多。

1. dom结构

<div class="anima_entrance"> <div class="anima_move"> <div class="anima_sprite"></div> </div> </div>

1
2
3
4
5
<div class="anima_entrance">
    <div class="anima_move">
        <div class="anima_sprite"></div>
    </div>
</div>

2. 解析动漫产生的时光轴：

图片 2

登场动漫持续0.6s，只播放二次，左右运动以至逐帧动漫持续2s，循环播放，代码如下：

.anima_entrance { animation: anima_entrance .6s ease-in-out both; } .anima_move { animation: anima_move 2s linear .6s infinite both; } .anima_sprite { animation: anima_sprite 2s step-end .6s infinite both; }

1
2
3
4
5
6
7
8
9
10
11
.anima_entrance {
    animation: anima_entrance .6s ease-in-out both;
}
 
.anima_move {
    animation: anima_move 2s linear .6s infinite both;
}
 
.anima_sprite {
    animation: anima_sprite 2s step-end .6s infinite both;
}

3. 用到steps（卡塔尔实现逐帧动漫：

接受上面那张Pepsi-Cola图，通过转移background-position完毕动漫切换。

图片 3

蹬蹬蹬，效果如下边所示，是还是不是很深负众望

图片 4

案由：由于animation默许以ease方式衔接，它会在各种关键帧之间插入补间动漫，所以动漫效果是连贯性的。那时得以应用steps()撤消补间动漫。

贴贰个图：

图片 5

  • steps(1,start): 动漫生机勃勃最初就跳到 百分之百直到那生机勃勃帧（不是总体周期卡塔尔国结束   == step-start
  • steps(1,end): 保持 0% 的体裁直到那黄金时代帧（不是一切周期卡塔 尔（英语：State of Qatar）结束   == step-end

接着，大家将timing-function改成 step-end，效果如下：

animation: sprite 2s step-end .6s infinite both;

1
animation: sprite 2s step-end .6s infinite both;

图片 6

并发想要的作用了哈～不错。

总体的css代码如下：

.anima_entrance { position: absolute; z-index: 3; top: 5.1rem; left: 4.05rem; width: 12.9rem; height: 19.1rem; -webkit-animation: anima_entrance .6s ease-in-out both; animation: anima_entrance .6s ease-in-out both; } .anima_move { width: 218px; height: 382px; position: absolute; z-index: 1; top: 0; left: 42px; -webkit-animation: anima_move 2s linear .6s infinite both; animation: anima_move 2s linear .6s infinite both; } .anima_sprite { width: 218px; height: 382px; background: url(demo.png) no-repeat 0 0; background-size: 25.8rem 19.1rem; -webkit-animation: anima_sprite 2s step-end .6s infinite both; animation: anima_sprite 2s step-end .6s infinite both; } @keyframes anima_entrance { 0% { -webkit-transform: translate3d(18.75rem, 0, 0); transform: translate3d(18.75rem, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes anima_move { 0%, 16%, 42%, 74%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 29% { -webkit-transform: translate3d(-1rem, 0, 0); transform: translate3d(-1rem, 0, 0); } 87% { -webkit-transform: translate3d(1rem, 0, 0); transform: translate3d(1rem, 0, 0); } } @keyframes anima_sprite { 0%, 16%, 42%, 58%, 74%, 100% { background-position: -12.9rem 0; } 8%, 50%, 66% { background-position: 0 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.anima_entrance {
    position: absolute;
    z-index: 3;
    top: 5.1rem;
    left: 4.05rem;
    width: 12.9rem;
    height: 19.1rem;
    -webkit-animation: anima_entrance .6s ease-in-out both;
    animation: anima_entrance .6s ease-in-out both;
}
 
.anima_move {
    width: 218px;
    height: 382px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 42px;
    -webkit-animation: anima_move 2s linear .6s infinite both;
    animation: anima_move 2s linear .6s infinite both;
}
 
.anima_sprite {
    width: 218px;
    height: 382px;
    background: url(demo.png) no-repeat 0 0;
    background-size: 25.8rem 19.1rem;
    -webkit-animation: anima_sprite 2s step-end .6s infinite both;
    animation: anima_sprite 2s step-end .6s infinite both;
}
 
@keyframes anima_entrance {
    0% {
        -webkit-transform: translate3d(18.75rem, 0, 0);
        transform: translate3d(18.75rem, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
 
@keyframes anima_move {
    0%, 16%, 42%, 74%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    29% {
        -webkit-transform: translate3d(-1rem, 0, 0);
        transform: translate3d(-1rem, 0, 0);
    }
    87% {
        -webkit-transform: translate3d(1rem, 0, 0);
        transform: translate3d(1rem, 0, 0);
    }
}
 
@keyframes anima_sprite {
    0%, 16%, 42%, 58%, 74%, 100% {
        background-position: -12.9rem 0;
    }
    8%, 50%, 66% {
        background-position: 0 0;
    }
}

打赏支持自个儿写出愈来愈多好小说，多谢！

打赏小编

思路同临时候改善发光度和圆形的分寸，无限循环

大家都精晓，在网页制作时接收CSS本领，能够使得地对页面包车型大巴布局、字体、颜色、背景和任何功能达成尤其可信赖的支配。只要对相应的代码做一些回顾的改善，就可以更改同生机勃勃页面包车型地铁不如部分，恐怕页数不一样的网页的外观和格式。CSS3是CSS本事的晋升版本，CSS3语言开荒是通往模块化发展的。推荐7款CSS3落实的动态特效。希望对大家有着扶持！

一个震撼的例证

做三个8帧的逐帧动画，每帧的尺寸为：360×540。

JavaScript

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat; background-size: 45rem 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -45rem; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
  background-size: 45rem 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -45rem;
  }
}

观察在主流（手提式有线电话机卡塔 尔（英语：State of Qatar）分辨率下的广播情形：

iPhone 6
(375×667)		 iPhone 6
(414×736)		 iPhone 5
(320×568)		 Android
(360×640)

二种分辨率下，能够阅览除了 ip6 别的的两种分辨率都发出了震撼。（ip6 不抖动的缘由是适配方案是着力于 ip6 的分辨率订制的。卡塔尔国

打赏协理笔者写出更加多好小说，感谢！

任选生龙活虎种支付方式

图片 7 图片 8

1 赞 7 收藏 2 评论

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文书档案</title>
<style>
@keyframes warn {
0% {
transform: scale(0);
opacity: 0.0;
}
25% {
transform: scale(0);
opacity: 0.1;
}
50% {
transform: scale(0.1);
opacity: 0.3;
}
75% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0.0;
}
}
.container {
position: relative;
border: 1px solid #000;
background: #f55e55;
}
.part {
position: relative;
margin: 200px auto;
width: 90px;
height: 90px;
background: #f55e55;
}
/* 发生动漫（向外扩散变大卡塔 尔（阿拉伯语：قطر‎的圆圈 */
.pulse-max {
position: absolute;
width: 90px;
height: 90px;
background: #fff;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
animation-delay: 0.2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.pulse-mid {
position: absolute;
left: 4px;
top: 4px;
width: 82px;
height: 82px;
background: #ff5e39;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 1.8s ease-out;
-moz-animation: warn 1.8s ease-out;
animation: warn 1.8s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.pulse-min {
position: absolute;
left: 7px;
top: 7px;
width: 76px;
height: 76px;
background: #fff;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;

CSS3达成的全荧屏覆盖层效果

浅析抖动

图像由终端（荧屏卡塔尔显示，而终端则是二个个光点（物理像素卡塔 尔（英语：State of Qatar）组成的矩阵，换句话说图片也生龙活虎组光点矩阵。为了便利描述，小编假若终端上的二个光点代表css中的1px。

以下是一张 9px * 3px 的sprite:

图片 9

每帧的尺码为 3px * 3px，逐帧的取位进程如下：
图片 10

把 sprite 的 background-size 的上升的幅度取八分之四，那么极端会怎么管理？
9 / 2 = 4.5
极限的光点都是以自然数的花样现身的，这里须要做取整处理。取整天常是两种办法：round/ceil/floor。假设是 round ，那么 background-size: 5px，sprite 会是以下三种的一个：

情况一 情况二 情况三

理论上，5 / 3 = 1.666...。但实际光点取整后，多个帧的小幅度都不容许非常 1.666...，而是有一个帧的幅度降级为 1px（亏卡塔 尔（英语：State of Qatar），此外两个上升的幅度进级为 2px（盈卡塔 尔（英语：State of Qatar），作者把那一个场景称为「盈利和亏折互补」。

再看一下盈利和赔本互补后，逐帧的取位进程：

情况一 情况二 情况三

可以看看由于盈利和耗损互补招致了多个帧的上升的幅度不等同，亏的那大器晚成帧在动漫中的表示正是抖动。

小编总计抖动的因由是：sprite在尺寸缩放后，帧与帧之间的盈利和亏蚀互补现象招致动漫抖动

附注：1px 由多少个光点表示是由以终端的 dpr 决定

关于小编：陈被单

图片 11

热爱前端，接待调换 个人主页 · 笔者的小说 · 19 ·   

图片 12

-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.dot {
position: absolute;
left: 20px;
top: 20px;
width: 50px;
height: 50px;
line-height: 50px;
color: #ff5e39;
border-radius: 50%;
background: #fff;
z-index: 999;
text-align: center;
}

图片 13

杀鸡取蛋方案

「盈利和亏蚀互补」也足以说是「盈亏不等同」，假诺尺寸在缩放后「盈利和亏空黄金时代致」那么抖动现象能够化解。

</style>

在线演示1在线演示2在线演示3在线演示4在线演示5本地下载

养虎遗患构想生机勃勃

小编依据「盈利和亏损意气风发致」设计了「消除构想生龙活虎」：

图片 14

逸事上海体育场合，其实超级轻巧就联想到二个简约的方案：不用Pepsi-Cola图（即大器晚成帧对应一张图片卡塔尔国。
本条方案确实是能够消除抖难题，可是笔者并不引入应用它，因为它有五个负面包车型大巴东西：

  • KB变大与央浼数扩大
  • 多余的 animation 代码

本条方案很简短，这里就不赘述了。

</head>

二个用到CSS3生成的超酷幻灯效果，具有相当的棒覆盖效果，全部规划也丰盛的通畅大气，我们能够直接下载演示看效果，只怕采取GBdebug来在线调节和测量试验。非常切合顾客首页恐怕成品，作品集的展现。

缓慢解决构想二

把逐帧取位与图像缩放拆分成五个独立的进度，正是作者的「解决构想二」：
图片 15

金镶玉裹福禄双全「构想二」，作者首先想到的是应用 transform: scale()，于是整理了四个落到实处方案A：

.steps_anim { position: absolute; width: 360px; height: 540px; background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat; background-size: 1800px 540px; top: 50%; left: 50%; transform-origin: left top; margin: -5.625rem 0 0 -5.625rem; transform: scale(.5); animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -1800px; } } /* 写断点 */ @media screen and (width: 320px) { .steps_anim { transform: scale(0.4266666667); } } @media screen and (width: 360px) { .steps_anim { transform: scale(0.48); } } @media screen and (width: 414px) { .steps_anim { transform: scale(0.552); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.steps_anim {
  position: absolute;
  width: 360px;
  height: 540px;
  background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
  background-size: 1800px 540px;
  top: 50%;
  left: 50%;
  transform-origin: left top;
  margin: -5.625rem 0 0 -5.625rem;
  transform: scale(.5);
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px;
  }
}
/* 写断点 */
@media screen and (width: 320px) {
.steps_anim {
transform: scale(0.4266666667);
}
}
@media screen and (width: 360px) {
.steps_anim {
transform: scale(0.48);
}
}
@media screen and (width: 414px) {
.steps_anim {
transform: scale(0.552);
}
}

这几个达成方案A存在显然的劣点：scale 的值须要写过多断点代码。于是作者结全大器晚成段 js 代码来改良这么些达成方案B：

css:

.steps_anim { position: absolute; width: 360px; height: 540px; background: url("//misc.aotu.io/leeenx/sprite/m.png") 0 0 no-repeat; background-size: 1800 540px; top: 50%; left: 50%; transform-origin: left top; margin: -5.625rem 0 0 -5.625rem; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -1800px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.steps_anim {
  position: absolute;
  width: 360px;
  height: 540px;
  background: url("//misc.aotu.io/leeenx/sprite/m.png") 0 0 no-repeat;
  background-size: 1800 540px;
  top: 50%;
  left: 50%;
  transform-origin: left top;
  margin: -5.625rem 0 0 -5.625rem;
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px;
  }
}

javascript:

// 以下代码放到<head></head>中// <![CDATA[ document.write(" .steps_anim {scale(.5); } "); function doResize() { scaleStyleSheet.innerHTML = ".steps_anim {-webkit-transform: scale(" (document.documentElement.clientWidth / 750) ")}"; } window.onresize = doResize; doResize(); // ]]>

1
2
3
4
5
6
7
8
9
10
11
12
13
// 以下代码放到<head></head>中// <![CDATA[
document.write("
 
.steps_anim {scale(.5); }
 
 
");
function doResize() {
  scaleStyleSheet.innerHTML = ".steps_anim {-webkit-transform: scale(" (document.documentElement.clientWidth / 750) ")}";
}
window.onresize = doResize;
doResize();
// ]]>

经过更改后的方案 CSS 的断点没了，以为是理当如此了，可是作者以为那一个方案不是个纯粹的营造方案。

咱俩掌握<img> 是能够依照内定的尺寸自适应缩放尺寸的，要是逐帧动画也能与 <img> 自适应缩放，那就足以从纯构建角度完毕「构想二」。

SVG赶巧能够消除难点！！！SVG 的显现与 <img>``形似同时能够做动画。以下是作者的落实方案C。

html:

JavaScript

<svg viewBox="0, 0, 360, 540" class="steps_anim"> <image xlink:href="//misc.aotu.io/leeenx/sprite/m.png" width="1800" height="540" /> </svg>

1
2
3
<svg viewBox="0, 0, 360, 540" class="steps_anim">
  <image xlink:href="//misc.aotu.io/leeenx/sprite/m.png" width="1800" height="540" />
</svg>

css:

JavaScript

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; image { animation: step 1.2s steps(5) infinite; } } @keyframes step { 100% { transform: translate3d(-1800px, 0, 0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
  image {
   animation: step 1.2s steps(5) infinite;
  }
}
@keyframes step {
  100% {
    transform: translate3d(-1800px, 0, 0);
  }
}

<body>
<div class="container">

CSS3兑现的混淆文字效果

方案C的改良

福寿齐天方案C很好地消除了方案A和方案B的瑕疵，可是方案C也会有它的标题：不便利自动化学工业具去管理图片。

自动化学工业具日常是怎么管理图片的？
自动化工具常常是扫描 CSS 文件搜索富有的 url(...) 语句，然后再管理那么些讲话指向的图片文件。

如果 可以改用 CSS 的 `background-image` 就可以解决这个问题，不过 `SVG` 不支持 CSS 的 `background-image`。但是，`SVG`有一个扩展标签：`foreignObject`，它允许向 插入 html 代码。在应用它前，先看一下它的异常意况：

图片 16

iOS 与 Android 4.3 一片松石绿宽容意况到底地利人和，小编实机测验Tencent X5 内核的浏览器宽容仍旧可以。以下是修改后的方案。

html:

JavaScript

<svg viewBox="0, 0, 360, 540" class="steps_anim"> <foreignObject class="html" width="360" height="540"> <div class="img"></div> </foreignObject> </svg>

1
2
3
4
5
<svg viewBox="0, 0, 360, 540" class="steps_anim">
  <foreignObject class="html" width="360" height="540">
    <div class="img"></div>
  </foreignObject>
</svg>

css:

JavaScript

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; } .html { width: 360px; height: 540px; } .img { width: 1800px; height: 540px; background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat; background-size: 1800px 540px; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -1800px 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
}
.html {
width: 360px;
height: 540px;
}
.img {
width: 1800px;
height: 540px;
background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
background-size: 1800px 540px;
animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px 0;
  }
}

精雕细刻后的方案DEMO:

<div class="part">
<div class="pulse-max"></div>
<div class="pulse-mid"></div>
<div class="pulse-min"></div>
<div class="dot">额头</div>
</div>
</div>
</body>
</html>

图片 17

总结

多谢阅读完本文章的读者。本文是笔者的个人观点，希望能协理到有相关难题的对象，假使本文有不妥之处请多多点拨。

在线演示1本地下载

参照他事他说加以考察资料：



1 赞 4 收藏 评论

图片 18

十三分极度的风华正茂款效果，鼠标离开就能够变得好像有一点点近视度同样的混淆，但把鼠标移动回来，却又清晰起来。那样效果即便用在七夕告白上，可能会更有效果与利益啊。

用CSS3贯彻的开关效果

图片 19

在线演示1本地下载

用CSS3 达成的二种开关的效果。当鼠标滑过按键，就可以以知道见差异的效应啊！

异常的棒CSS3动漫泡沫按键，不影响旧版本浏览器接纳

图片 20

在线演示1本地下载

那个讨人喜欢的泡沫按键！适用于多样作风的网址。

CSS3落到实处的非常棒3D Grid效果

图片 21

在线演示1在线演示2本地下载

可怜棒的风度翩翩款3D特效，笔者本身特别赏识3D效果，因为它能够让您真个页面看起来越发立体越发丰裕！要是您也和本人相仿，快速来珍藏吧！

CSS完结的变戏法小球

图片 22

在线演示1

#container {

width: 200px;

height: 50px;

position: absolute;

top: calc(50% 50px);

left: calc(50% 50px);

opacity: 0;

animation: fadeIn 1s 1;

animation-fill-mode: forwards;

}

.wrap {

animation: translateX 1000ms infinite ease-in-out alternate;

position: absolute;

}

.ball {

width: 50px;

height: 50px;

box-shadow: -5px -5px 0 rgba(0, 0, 0, 0.15) inset;

background-color: #397BF9;

border-radius: 50%;

animation: translateY 500ms infinite ease-in-out alternate;

border: 2px solid black;

}

.wrap:after {

content: '';

width: 50px;

height: 7.5px;

background: #eee;

position: absolute;

bottom: 0;

top: 70px;

border-radius: 50%;

animation: scale 500ms infinite ease-in-out alternate;

}

#wrap2, #ball2, #wrap2:after {

animation-delay: -400ms;

}

#wrap3, #ball3, #wrap3:after {

animation-delay: -800ms;

}

#wrap4, #ball4, #wrap4:after {

animation-delay: -1200ms;

}

#wrap5, #ball5, #wrap5:after {

animation-delay: -1600ms;

}

#ball2 {

background-color: #F4B400;

}

#ball3 {

background-color: #EEEEEE;

}

#ball4 {

background-color: #00A656;

}

#ball5 {

background-color: #E3746B;

}

@keyframes translateX {

100% {

transform: translateX(-150px);

}

}

@keyframes translateY {

100% {

transform: translateY(-187.5px);

}

}

@keyframes scale {

100% {

transform: scale(0.85);

}

}

@keyframes fadeIn {

100% {

opacity: 1;

}

}

复制代码

行使CSS3 keyframe生成的风趣变戏法小球特效。非常风趣，假诺在有个小丑在边缘就更周密了不是吗？

接纳CSS3的step()生成的卡通片效果

图片 23

在线演示1在线演示2在线演示3在线演示4本地下载

在这里些DEMO中，将演示怎么样使用CSS3的step()来管理动画效果。

移步的小车：

.contain-car {

animation: drive 4s steps(4, end) infinite;

}

.contain-car-2 {

animation: drive 4s steps(4, start) infinite;

}

@keyframes drive {

to {

transform: translateX(640px);

}

}

复制代码

石英钟效果：

.second {

animation: tick-tock 60s steps(60, end) infinite;

}

@keyframes tick-tock {

to {

transform: rotate(360deg);

}

}

复制代码

脚爪：

.cover {

animation: walk 7s steps(7, end) infinite;

}

@keyframes walk {

to {

transform: translateX(675px);

}

复制代码

进度：

.circle {

animation: fill 5s steps(5, start) forwards;

}

@keyframes fill {

to {

opacity: 1;

}

}

复制代码

via:http://www.gbtags.com/gb/share/3557.htm

本文由星彩网app下载发布于前端技术,转载请注明出处：逐帧动画抖动实施方案，推荐8款CSS3贯彻的动态特

TAG标签：

今日热点

小编精选

返回列表
Ctrl+D 将本页面保存为书签，全面了解最新资讯，方便快捷。