菜单

CSS揭秘笔记–(2)

2019年1月29日 - 金沙前端

Twitter的”fave”动画

2015/05/12 · HTML5 ·
Twitter,
动画

本文由 伯乐在线 –
刘健超-J.c
翻译,胡屹
校稿。未经许可,禁止转发!
英文出处:cssanimation.rocks。欢迎插足翻译组。

幽默的CSS标题(13):巧妙地构建背景观渐变动画!

2017/03/24 · CSS ·
CSS,
动画

正文作者: 伯乐在线 –
chokcoco
。未经小编许可,禁止转发!
迎接参预伯乐在线 专栏小编。

一些时候,嗯,应该说一些特定场馆,我们可能要求下边那样的卡通片效果,渐变 +
animation :

图片 1

假定我们渐变的写法如下:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); }

1
2
3
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
}

根据正规想法,合作 animation ,大家第一会想到在 animation
的步骤中经过变更颜色已毕颜色渐变动画,那么我们的 CSS 代码可能是:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%);
animation: gradientChange 2s infinite; } @keyframes gradientChange {
100% { background: linear-gradient(90deg, #e91e1e 0%, #6f27b0 100%); }
}

1
2
3
4
5
6
7
8
9
10
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
    animation: gradientChange 2s infinite;
}
 
@keyframes gradientChange  {
    100% {
        background: linear-gradient(90deg,  #e91e1e 0%, #6f27b0 100%);
    }
}

上边大家用到了三种颜色:

最终,并没有我们预料的结果,而是那样的:

图片 2

See the Pen 线性渐变动画 by
Chokcoco (@Chokcoco) on
CodePen.

咱俩预料的补间动画,变成了逐帧动画。
图片 3

也就是说,线性渐变是不支持动画 animation
的,那不过的由一个颜色,变化到此外一个颜色吗?像上边那样:

div { background: #ffc700; animation: gradientChange 3s infinite
alternate; } @keyframes gradientChange { 100% { background: #e91e1e; }
}

1
2
3
4
5
6
7
8
9
10
div {
    background: #ffc700;
    animation: gradientChange 3s infinite alternate;
}
 
@keyframes gradientChange  {
    100% {
        background: #e91e1e;
    }
}

察觉,单纯的单色值是能够暴发渐变的:

See the Pen 单色值渐变动画 by
Chokcoco (@Chokcoco) on
CodePen.

最重大的 CSS3 模块包罗:

1、background缩写法(CSS3中协理给每个角度设置偏移了)

  background:#fff url() left 20px top 20px/width height no-repeat;

background默许从border起始绘制,若想从padding开首绘制,需改变其background-clip:padding-box;
background-clip只是将背景和背景观阴毒的剪裁;
background-origin定义的是背景图片地点(background-position)的起初点

Twitter的“fave” 动画

多年来 推文(Tweet)通过引入一段新的卡通片重新设计了“fave”按钮(也叫“fav”)。那段动画并不看重CSS transition,而是由一层层图片组成的。上边浮现什么用 CSS 的
animation-timing-function 属性中的 steps 时序函数(timing
function)重新创建那段动画。

So

小结一下,线性渐变(径向渐变)是不辅助 animation 的,单色的 background
是帮助的。

寻找了下文档,在 background 附近区域截图如下:

图片 4

何以 CSS
属性可以动画?,下边的截图是不完整的帮助CSS 动画的特性,完整的可以戳左边。

对于 background 相关的,文档里写的是永葆 background
不过没有前述不接济 background: linear-gradient()/radial-gradient()
。估量原因,可能是由于渐变中插手 animation 的转变对过于消耗质量。

那么是或不是大家想要的背景观渐变动画就无法兑现了吧?下边大家就分流下思想看看有没有任何办法得以达标大家的对象。

2、多重边框

box-shadow:0 0 0 2px #877,0 0 0 4px #222 

帮衬逗号分隔,理论上可以创立n层边框。注意box-shadow所得边框或阴影长度是不划算在要素的宽高的,即它不影响布局。

移动产生的错觉

那段动画的职能类似于观察古老的西洋镜,该装置突显的是一多级一而再的缠绕着圆筒的插图。在底下的言传身教中,大家不利用圆筒,而是在某个元素内部展现一多元图片。

经过 background-position 模拟渐变动画

上面什么样 CSS 属性可以动画的截图中,列出了与 background 相关还有
background-position ,也就是 background-position
是援助动画的,通过改变 background-position 的法子,可以已毕渐变动画:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%,
#6f27b0 100%); background-size: 200% 100%; background-position: 0 0;
animation: bgposition 2s infinite linear alternate; } @keyframes
bgposition { 0% { background-position: 0 0; } 100% {
background-position: 100% 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: bgposition 2s infinite linear alternate;
}
 
@keyframes bgposition {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

此地大家还协作了 background-size。首先明白下:

background-position:指定图片的上马地点。那几个开始地方是争执于以
background-origin 定义的背景地点图层来说的。>
background-size:设置背景图片大小。当取值为百分比时,表示指定背景图片相对背景区的百分比大小。当设置五个参数时,第四个值指定图片的升幅,第四个值指定图片的惊人。

通过 background-size: 200% 100%
将图纸的宽窄设置为两倍背景区的幅度,再通过改变 background-position
x 轴开始地方来运动图片,由于背景图设置的分寸是背景区的两倍,所以
background-position的位移是由 0 0 -> 100% 0 。最后效果如下:

See the Pen background-position
达成渐变动画 by Chokcoco
(@Chokcoco) on
CodePen.

 

3、calc函数

注意:calc的运算符两边必须留空格,否则算语法错误,不会卓有成效,android4.4不支持乘除,从android5先导完全扶助

background-position:calc(100% - 20px)  calc(100 - 40px);

示例

把鼠标悬停在少数上就可以看出动画效果(请到原文查阅动画效果——译者注)。

在本示例中,大家将从制作一多级能结成动画的图形开始。在此地,大家应用来源
推特 的“fave”图标动画的一对图片集:

图片 5

为了能让那么些帧动起来,大家须求把它们放置在一排上。在那几个文件中,这么些帧已经排列在一排上了,那表示大家可以由此设置背景地方(background-position)属性使背景从第一帧过渡到最后一帧。

图片 6

通过 background-size 模拟渐变动画

既然 background-position 可以,那么另一个 background-size
当然也是不遑多让。与地点的办法类似,只是这一次 background-position 辅助
background-size ,CSS 代码如下:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 33%,
#6f27b0 66%, #00ff88 100%); background-position: 100% 0; animation:
bgSize 5s infinite ease-in-out alternate; } @keyframes bgSize { 0% {
background-size: 300% 100%; } 100% { background-size: 100% 100%; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);
    background-position: 100% 0;
    animation: bgSize 5s infinite ease-in-out alternate;
 
}
 
@keyframes bgSize {
    0% {
        background-size: 300% 100%;
    }
    100% {
        background-size: 100% 100%;
    }
}

效能如下:

See the Pen position-size
达成渐变动画 by Chokcoco
(@Chokcoco) on
CodePen.

由此转移 background-size 的首先个值,我将背景图的轻重由 3
倍背景区大小向 1
倍背景区大小过渡,在背景图变换的历程中,就有了一种动画的成效。

而至于为什么要协作 background-position: 100% 0 。是出于若是不安装
background-position ,默许意况下的值为
0% 0%,会招致动画最左边的颜色不变,像上边那样,不大自然:

图片 7

CSS3 边框

4、CSS字体

windows中文
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微软雅仿宋:Microsoft YaHei

font-family:Microsoft YaHei,FangSong,NSimSun,SimSun,SimHei,KaiTi

英文

font-family:Verdana,Times New Roman,PmingLiu,Arial,Courier New

@font-face {
    font-family: 'FZYanSJW';
    src: url('../font/FZYanSJW.ttf') format('truetype');
}
p{
   font-family:"FZYanSJW"
}

font-family: Consolas, Monaco, monospace

Steps() 时序函数

多数的时序函数,例如 ease(缓冲)和
cubic-bezier(四遍贝塞尔),都能让要素从初叶状态平滑地联网到最终状态。steps
时序函数与此分化,它并不是平整地连贯,而是将接入进度分割为自然数量的手续,并且在这么些手续之间很快地活动。

图片 8

我们先创立如下的 HTML 代码:

XHTML

<section class=”fave”></section>

1
<section class="fave"></section>

由此 transform 模拟渐变动画

上边二种艺术纵然都可以兑现,不过总感觉到不够自由,或者随机性不够大。

不仅如此,上述三种方式,由于采纳了 background-position
background-size,并且在潜移默化中改变那八个特性,导致页面不断地举行大气的重绘(repaint),对页面质量消耗极度沉痛,所以我们还是能尝试
transfrom 的方法:

行使伪元素合营 transform 进行潜移默化动画,通过元素的伪元素 before 或者
after ,在要素内部画出一个大背景,再通过 transform
对伪元素举办更换:

JavaScript

div { position: relative; overflow: hidden; width: 100px; height: 100px;
margin: 100px auto; border: 2px solid #000; &::before { content:
“”; position: absolute; top: -100%; left: -100%; bottom: -100%; right:
-100%; background: linear-gradient(45deg, #ffc700 0%, #e91e1e 50%,
#6f27b0 100%); background-size: 100% 100%; animation: bgposition 5s
infinite linear alternate; z-index: -1; } } @keyframes bgposition { 0% {
transform: translate(30%, 30%); } 25% { transform: translate(30%, -30%);
} 50% { transform: translate(-30%, -30%); } 75% { transform:
translate(-30%, 30%); } 100% { transform: translate(30%, 30%); } }

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
div {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    border: 2px solid #000;
 
    &amp;::before {
        content: "";
        position: absolute;
        top: -100%;
        left: -100%;
        bottom: -100%;
        right: -100%;
        background: linear-gradient(45deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
        background-size: 100% 100%;
        animation: bgposition 5s infinite linear alternate;
        z-index: -1;
    }
}
 
 
@keyframes bgposition {
    0% {
        transform: translate(30%, 30%);
    }
    25% {
        transform: translate(30%, -30%);
    }
    50% {
        transform: translate(-30%, -30%);
    }
    75% {
        transform: translate(-30%, 30%);
    }
    100% {
        transform: translate(30%, 30%);
    }
}
 

落到实处原理如下图所示:

图片 9

咱俩得以在任意 animation 动画进程中再参预 scaleskewroate
等转移,让效果看上去越发有声有色随机。效果如下:

See the Pen
伪元素同盟transform落成背景渐变
by Chokcoco (@Chokcoco) on
CodePen.

地点列出来的只是有的主意,理论而言,伪元素协作可以暴发位移或者形变的特性都得以已毕地点的职能。大家居然足以行使区其他缓动函数或者借鉴蝉原则,制作出随机性相当强的效能。

本来,本文罗列出来的都是纯 CSS 方法,使用 SVG 或者 Canvas
同样可以创制出来,而且质量更佳。感兴趣的读者能够活动往下探讨。

 

5、线性渐变

linear-gradient(angle,color-stop+)
repeating-linear-gradient(angle,color-stop+)
水平条纹:
background:linear-gradient(to bottom,red,blue 15px);
background-size:100% 30px;
垂直条纹:
background:linear-gradient(to right,red,blue 15px);
background-size: 30px 100%;
angle参数可以是角度,以左下角为坐标原点,顺时针旋转。45deg
再也的斜向条纹:
background:repeating-linear-gradient(45deg,red,red 15px,blue 0,blue
30px
);
双色条纹须要七个色值

背景图片

接下去, 大家可以添加一些体制并设置背景图片地方:

图片 10

CSS

.fave { width: 70px; height: 50px; background:
url(images/twitter_fave.png) no-repeat; background-position: 0 0; }

1
2
3
4
5
6
.fave {
  width: 70px;
  height: 50px;
  background: url(images/twitter_fave.png) no-repeat;
  background-position: 0 0;
}

加了为止状态后,一旦鼠标悬停在该因素上,背景就会从我们指定的任务移动到这一密密麻麻图片中最后一张的职位上(为了合营浏览器,注意要丰硕相应的浏览器内核前缀——译者注)。

CSS

.fave:hover{ animation: fave 1s steps(55); } @keyframes fave{ 0%{
background-position:0 0; } 100%{ background-position:-3519px 0; } }

1
2
3
4
5
6
7
8
9
10
11
.fave:hover{
  animation: fave 1s steps(55);
}
@keyframes fave{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-3519px 0;
  }
}

请留心第1个规则 animation。在本例中,大家使用 steps
时序函数,让background-position 属性经历了一个持续时间为1秒的连接。在
steps 部分的“55”那几个值,代表了那段动画是由55帧组成的。

当大家将鼠标悬停在这些因素上时,所看到的成效是其背景图片通过55个一律的步子经历了一次对接。

除此以外这么些案例,也可以用 transition 实现:

CSS

.fave:hover { background-position: -3519px 0; transition: background 1s
steps(55); }

1
2
3
4
.fave:hover {
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

利用背景象渐变动画

背景象渐变动画具体可以行使在什么地方吧,稍微举个例子。

CSS3 边框

6、CSS动画(transition&animation)

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

timing-function:动画的速度曲线,可取ease,ease-in,ease-out,ease-in-out,step-start,step-end,step(int),linear,cubic-bezier(int1,int2,int3,int4);
有关step()函数效能可参考那篇文章;

iteration-count表示动画重复次数,取infinite表示无穷次;

direction表动画是或不是反向播放,可取:normal reverse alternate
alternate-reverse。当取alternate时,动画函数也反向,如ease-in变为ease-out。

fill-mode指定在动画执行以前和事后怎么着给动画的靶子应用样式。

play-state
定义一个卡通是不是运行如故暂停。可以通过查询它来规定动画是或不是正在运行。别的,它的值可以被装置为暂停和回复的动画的回看。復苏一个已暂停的卡通片,将从它开头搁浅的时候,而不是从动画种类的源点起头在动画。可取running和paused

transition:property time function delay

function的取值与animation的平等,transtion与transform同盟使用,作用很强大

缘何不采纳gif?

固然如此也可以使用 gif 动画,但在这么些案例中并不是很确切。gif
文件的尺寸日常较大并且帧速率也不便决定。而接纳那一个点子,大家就足以用 CSS
对这么些动画举办截至、倒回以及各式各种的调整。

背景观渐变过渡落成按钮的明暗变化

图片 11

效果如下:

See the Pen
背景观渐变过渡已毕按钮的明暗变化
by Chokcoco (@Chokcoco) on
CodePen.

而外,在背景板突显文字,让部分静态底图动起来吸引眼球等地点都有用武之地。

到此本文截止,假如还有怎么着疑难依然提出,可以多多调换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

开本连串,谈谈一些幽默的 CSS
标题,标题类型天马行空,想到什么说哪些,不仅为了拓宽一下缓解难点的思路,更涉及部分简单忽略的
CSS 细节。

解题不考虑兼容性,标题天马行空,想到怎么样说哪些,若是解题中有你倍感到生僻的
CSS 属性,赶紧去补习一下啊。

不断更新,不断更新,不断更新,紧要的事体说三回。

具备难点汇总在自家的 Github 。

打赏协理我写出越多好小说,谢谢!

打赏小编

通过 CSS3,您可以成立圆角边框,向矩形添加阴影,使用图片来绘制边框 –
并且不需采纳安顿软件,比如 PhotoShop。

“steps()”的其余用法

背景动画天使(background sprites)仅仅只是 steps
时序函数的用法之一。除此之外该函数还适用于打造其他索要一多重离散步骤的动画片。例如,你可以用该函数制作一个摆钟。

打赏辅助我写出更加多好小说,谢谢!

任选一种支付办法

图片 12
图片 13

1 赞 5 收藏
评论

 

备忘小条

假如您喜爱那篇小说,你可以将它分享在推特(Twitter),或者封存上面的备忘小条,以便参考。

图片 14

打赏接济我翻译越来越多好小说,谢谢!

打赏译者

关于作者:chokcoco

图片 15

经不住大运似水,逃不过此间少年。

个人主页 ·
我的稿子 ·
63 ·
   

图片 16

打赏援助自己翻译越来越多好作品,谢谢!

任选一种支付方式

图片 17
图片 18

赞 收藏
评论

图片 19

有关小编:刘健超-J.c

图片 20

前端,在路上…
个人主页 ·
我的篇章 ·
19 ·
    

图片 21

 

CSS3 圆角边框

在 CSS2 中添加圆角矩形须要技术。大家务必为每个圆角使用不一致的图片。

在 CSS3 中,制造圆角是非常不难的。

在 CSS3 中,border-radius 属性用于创设圆角:

图片 22

 

实例

向 div 元素添加圆角:

div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /*
Old Firefox */ }

 

 

CSS3 边框阴影

在 CSS3 中,box-shadow 用于向四方添加阴影:

 

图片 23

 

实例

向 div 元素添加方框阴影:

div { box-shadow: 10px 10px 5px #888888; }

 

CSS3 边框图片

经过 CSS3 的 border-image 属性,您可以动用图片来创制边框:

图片 24

 

实例

选拔图片创建围绕 div 元素的边框:

div { border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome
*/ -o-border-image:url(border.png) 30 30 round; /* Opera */ }

 

新的边框属性

属性 描述 CSS
border-image 设置所有 border-image-* 属性的简写属性。 3
border-radius 设置所有四个 border-*-radius 属性的简写属性。 3
box-shadow 向方框添加一个或多个阴影。 3

 

CSS3 背景

 

CSS3 背景

CSS3 包括三个新的背景属性,它们提供了对背景更有力的控制。

 

浏览器援救

图片 25

 

CSS3 background-size
属性

background-size 属性规定背景图片的尺码。

在 CSS3 从前,背景图片的尺寸是由图片的莫过于尺寸决定的。在 CSS3
中,可以确定背景图片的尺寸,那就同意大家在不一致的环境中重复使用背景图片。

您能够以像素或比重规定尺寸。如若以百分比规定尺寸,那么尺寸相对于父元素的升幅和冲天。

 

例子 1

调整背景图片的轻重缓急:

div { background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px; background-repeat:no-repeat; }

 

例子 2

对背景图片举办拉伸,使其形成填写内容区域:

div { background:url(bg_flower.gif); -moz-background-size:40% 100%; /*
老版本的 Firefox */ background-size:40% 100%;
background-repeat:no-repeat; }

图片 26

 

CSS3 background-origin
属性

background-origin 属性规定背景图片的固化区域。

背景图片可以停放于 content-box、padding-box 或 border-box 区域。

图片 27

 

实例

在 content-box 中固定背景图片:

div { background:url(bg_flower.gif); background-repeat:no-repeat;
background-size:100% 100%; -webkit-background-origin:content-box; /*
Safari */ background-origin:content-box; }

 

 

CSS3
多重背景图片

 

图片 28

实例

为 body 元素设置两幅背景图片:

body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }

新的背景属性

属性 描述 CSS
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

 

CSS3 文本效果

CSS3 文本效果

CSS3 包涵多少个新的文本特性。

 

浏览器襄助

图片 29

 

Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持
text-shadow 属性。

具有主流浏览器都协助 word-wrap 属性。

注明:Internet Explorer 9 以及更早的版本,不援救 text-shadow 属性。

 

在 CSS3 中,text-shadow 可向文本应用阴影。

图片 30

你可以确定水平阴影、垂直阴影、模糊距离,以及阴影的颜料:

实例

向标题添加阴影:

h1 { text-shadow: 5px 5px 5px #FF0000; }

CSS3 自动换行

单词太长的话就可能不可能当先某个区域:

图片 31

在 CSS3 中,word-wrap 属性允许你允许文本强制文本进行换行 –
固然这表示会对单词举行拆分:

图片 32

 

实例

允许对长单词进行拆分,并换行到下一行:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图