pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
分类:前端技术

CSS技巧:逐帧动漫抖动实施方案

2017/08/16 · CSS · 动画

原来的书文出处: 坑坑洼洼实验室   

我所在的前端共青团和少先队首要从事活动端的H5页面开荒,而公司动用的适配方案是: viewport units rem。具体能够参见凹凸实验室的文章 – 运用视口单位落实适配布局 。

笔者近日(2017.08.12卡塔尔接触到的位移端适配方案中,「利用视口单位得以完成适配布局」是最棒的方案。然则使用 rem 作为单位会遇上以下四个难题:

  • 微观尺寸(20px左右卡塔 尔(阿拉伯语:قطر‎定位不准
  • 逐帧动漫轻松有震憾

率先个难题的平时出现在 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.add伊夫ntListener("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(卡塔尔国达成逐帧动漫:

行使上边那张七喜图,通过更动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;
    }
}

打赏帮助本身写出越多好文章,多谢!

打赏小编

思路同有时间改动光滑度和圆形的大小,Infiniti循环

世家都晓得,在网页制作时使用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;
  }
}

观看在主流(手提式有线电话机卡塔尔分辨率下的播音意况:

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;
}
/* 发生动漫(向外扩散变大卡塔 尔(英语:State of Qatar)的圆圈 */
.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完成的全显示器覆盖层效果

浅析抖动

图像由终端(显示屏卡塔尔国显示,而终端则是一个个光点(物理像素卡塔尔组成的矩阵,换句话说图片也风华正茂组光点矩阵。为了便利描述,作者借使终端上的贰个光点代表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(亏卡塔 尔(阿拉伯语:قطر‎,其它七个增长幅度晋级为 2px(盈卡塔 尔(阿拉伯语:قطر‎,小编把那个意况称为「盈亏互补」。

再看一下盈利和亏折互补后,逐帧的取位进程:

情况一 情况二 情况三

可以看出由于盈利和赔本互补导致了多个帧的拉长率不相像,亏的那意气风发帧在动漫中的表示正是抖动

作者计算抖动的来头是: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

依照上海体育场所,其实比较轻易就联想到多个简易的方案:不用7-Up图(即风度翩翩帧对应一张图片卡塔尔
本条方案确实是能够解决抖难题,然则小编并不引入应用它,因为它有五个消极面的东西:

  • 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

本文由pc28.am发布于前端技术,转载请注明出处:pusle雷达动漫完结,推荐8款CSS3兑现的动态特效

上一篇:减去窒碍渲染的CSS的自动解决决方案,减少梗塞 下一篇:没有了
猜你喜欢
热门排行
精彩图文