澳门金莎娱乐网站十天精通CSS3

时间:2019-10-06 09:06来源:网页制作
Twitter的”fave”动画 2015/05/12 · HTML5 ·Twitter,动画 本文由 伯乐在线 -刘健超-J.c翻译,胡屹校稿。未经许可,禁绝转发! 葡萄牙共和国(República Portuguesa)语出处:cssanimation.rocks。迎接到

Twitter的”fave”动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,胡屹 校稿。未经许可,禁绝转发!
葡萄牙共和国(República Portuguesa)语出处:cssanimation.rocks。迎接到场翻译组。

变形--旋转 rotate()

旋转rotate()函数经过点名的角度参数使成分相对原点进行旋转。它最主要在二维空间内开展操作,设置二个角度值,用来钦点旋转的宽窄。如若那么些值为正值,成分相对原点大旨顺时针旋转;即使这么些值为负值,元素相对原点宗旨逆时针旋转。如下图所示:

澳门金莎娱乐网站 1

HTML代码:

<div class="wrapper">
  <div></div>
</div>

CSS代码:

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

身体力行结果

澳门金莎娱乐网站 2

 

Twitter的“fave” 动画

近期 Facebook通过引进一段新的动画重新规划了“fave”按键(也叫“fav”)。这段动画并不借助于 CSS transition,而是由一多种图片组成的。下边呈现怎样用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新创设这段动画。

变形--扭曲 skew()

扭曲skew()函数能够让要素倾斜突显。它可以将三个对象以其大旨岗位围绕着X轴Y轴安份守己一定的角度倾斜。那与rotate()函数的旋转区别,rotate()函数只是旋转,而不会变动成分的形态。skew()函数不会旋转,而只会退换成分的形象。

Skew()具备三种景况:

1、skew(x,y)使成分在档次和垂直方向同期扭曲(X轴和Y轴同时按一定的角度值实行翻调换形);

澳门金莎娱乐网站 3

首先个参数对应X轴,第2个参数对应Y轴。假设第贰个参数未提供,则值为0,也正是Y轴方向上无斜切。

2、skewX(x)仅使成分在档案的次序方向扭曲变形(X轴扭曲变形);

澳门金莎娱乐网站 4

3、skewY(y)仅使成分在笔直方向扭曲变形(Y轴扭曲变形)

澳门金莎娱乐网站 5

演示演示:

因此skew()函数将纺锤形形成平行四边形。

HTML代码:

<div class="wrapper">
  <div>我变成平形四边形</div>
</div>

CSS代码:

.wrapper {
  width: 300px;
  height: 100px;
  border: 2px dotted red;
  margin: 30px auto;
}
.wrapper div {
  width: 300px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background: orange;
  -webkit-transform: skew(45deg);
  -moz-transform:skew(45deg) 
  transform:skew(45deg);
}

示范结果

澳门金莎娱乐网站 6

运动发生的错觉

这段动画的法力类似于观望古老的西洋镜,该装置彰显的是一多级一而再的拱卫着圆筒的插图。在底下的演示中,大家不行使圆筒,而是在有个别成分内部显示一多元图片。

变形--缩放 scale()

缩放 scale()函数 让要素依照中央原点对指标实行缩放。

缩放 scale 具备三种情形:

1、 scale(X,Y)使成分水平方向和垂直方向同期缩放(也便是X轴和Y轴同一时间缩放)

澳门金莎娱乐网站 7

例如:

div:hover {
  -webkit-transform: scale(1.5,0.5);
  -moz-transform:scale(1.5,0.5)
  transform: scale(1.5,0.5);
}

小心:Y是三个可选参数,若无安装Y值,则意味着X,Y五个趋势的缩放倍数是千篇一律的。

2、scaleX(x)成分仅水平方向缩放(X轴缩放)

澳门金莎娱乐网站 8

3、scaleY(y)成分仅垂直方向缩放(Y轴缩放)

澳门金莎娱乐网站 9

HTML代码:

<div class="wrapper">
  <div>我将放大1.5倍</div>
</div>

CSS代码:

.wrapper {
  width: 200px;
  height: 200px;
  border:2px dashed red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  background: orange;
  text-align: center;
  color: #fff;
}
.wrapper div:hover {
  opacity: .5;
  -webkit-transform: scale(1.5);
  -moz-transform:scale(1.5)
  transform: scale(1.5);
}

亲自去做结果

澳门金莎娱乐网站 10

注意: scale()的取值暗许的值为1,当班值日设置为0.010.99里头的别样值,功用使贰个要素降低;而另外大于或等于1.01的值,效用是让要素放大。

示例

把鼠标悬停在有限上就足以看见动画效果(请到原文翻开动画效果——译者注)。

在本示例中,大家将从制作一密密麻麻能结合动画的图纸起初。在那边,大家选用来源 推特(Twitter) 的“fave”Logo动画的部分图片集:

澳门金莎娱乐网站 11

为了能让这个帧动起来,我们要求把它们放置在一排上。在那些文件中,这么些帧已经排列在一排上了,那意味大家能够经过设置背景地点(background-position)属性使背景从第一帧过渡到结尾一帧。

澳门金莎娱乐网站 12

变形--位移 translate()

translate()函数能够将成分向内定的可行性移动,类似于position中的relative。或以轻松的知情为,使用translate()函数,能够把成分从原先的地点移动,而不影响在X、Y轴上的其余Web组件。

translate咱们分为二种情况:

1、translate(x,y)水平方向和垂直方向同期活动(也正是X轴和Y轴同一时间活动)

澳门金莎娱乐网站 13

2、translateX(x)仅水平方向移动(X轴移动)

澳门金莎娱乐网站 14

3、translateY(Y)仅垂直方向移动(Y轴移动)

澳门金莎娱乐网站 15

实例演示:因而translate()函数将成分向Y轴下方移动50px,X轴右方移动100px。

HTML代码:

<div class="wrapper">
  <div>我向右向下移动</div>
</div>

CSS代码:

.wrapper {
  width: 200px;
  height: 200px;
  border: 2px dotted red;
  margin: 20px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: orange;
  color: #fff;
  -webkit-transform: translate(50px,100px);
  -moz-transform:translate(50px,100px);
  transform: translate(50px,100px);
}

示范结果

澳门金莎娱乐网站 16

Steps() 时序函数

大部的时序函数,例如 ease(缓冲)和 cubic-bezier(一回贝塞尔),都能让要素从开头状态平滑地连贯到最后状态。steps 时序函数与此分裂,它并不是平整地衔接,而是将连接进度分割为自然数额的手续,而且在这么些手续之间赶快地活动。

澳门金莎娱乐网站 17

笔者们先创立如下的 HTML 代码:

XHTML

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

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

变形--矩阵 matrix()

matrix() 是一个含多少个值的(a,b,c,d,e,f)调换矩阵,用来钦赐二个2D更换,也就是直接行使二个[a b c d e f]更动矩阵。正是依赖水平方向(X轴)和垂直方向(Y轴)重新定位成分,此属性值使用涉及到数学中的矩阵,小编在此处只是简单来说一下CSS3中的transform有这么一个属性值,借使供给深入摸底,要求对数学矩阵有肯定的文化。

示范演示:通过matrix()函数来模拟transform中translate()位移的作用。
HTML代码:

<div class="wrapper">
  <div></div>
</div>

CSS代码:

.wrapper {
  width: 300px;
  height: 200px;
  border: 2px dotted red;
  margin: 40px auto;
}
.wrapper div {
  width:300px;
  height: 200px;
  background: orange;
  -webkit-transform: matrix(1,0,0,1,50,50);
  -moz-transform:matrix(1,0,0,1,50,50);
  transform: matrix(1,0,0,1,50,50);
}

演示结果:

澳门金莎娱乐网站 18

背景图片

接下去, 我们得以增加一些体裁并设置背景图片地方:

澳门金莎娱乐网站 19

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;
  }
}

请小心第2个法规 animation。在本例中,大家选取 steps 时序函数,让background-position 属性经历了三个持续时间为1秒的联网。在 steps 部分的“55”这么些值,代表了这段动画是由55帧组成的。

当我们将鼠标悬停在这些因素上时,所看见的功能是其背景图片通过五14个同样的步子经历了二遍对接。

另外这么些案例,也能够用 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);
}

变形--原点 transform-origin

其他八个因素都有三个着力点,暗许景况之下,个中央点是高居成分X轴和Y轴的八分之四处。如下图所示:

澳门金莎娱乐网站 20

在并未有重新载入参数transform-origin改变成分原点地方的气象下,CSS变形举行的转动、位移、缩放,扭曲等操作都以以成分和煦大旨岗位张开变形。但众多时候,我们得以由此transform-origin来对成分举办原点地点变动,使成分原点不在成分的中坚岗位,以高达必要的原点地方。

transform-origin取值和因素设置背景中的background-position取值类似,如下表所示:

澳门金莎娱乐网站 21

演示呈现:

经过transform-origin改形成分原点到左上角,然后举行顺时旋转45度。

HTML代码:

<div class="wrapper">
  <div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
  <div>原点重置到左上角</div>
</div>

CSS代码:

.wrapper {
  width: 300px;
  height: 300px;
  float: left;
  margin: 100px;
  border: 2px dotted red;
  line-height: 300px;
  text-align: center;
}
.wrapper div {
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.transform-origin div {
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

亲自去做结果:

澳门金莎娱乐网站 22

为啥不使用gif?

尽管也得以利用 gif 动画,但在那么些案例中实际不是很得体。gif 文件的高低平时相当的大而且帧速率也不便决定。而利用那些措施,大家就足以用 CSS 对这一个动画举行甘休、倒回以及各式各样的调解。

动画--过渡性质 transition-property

开始的一段时代在Web中要落到实处动画效果,都是凭仗于JavaScript或Flash来形成。但在CSS3中新净增了三个新的模块transition,它能够通过一些简约的CSS事件来触发成分的外观变化,让职能显得尤其细腻。轻巧点说,不怕经过鼠标的单击、得到主旨,被点击或对成分任何改换中触发,并平滑地以动画效果改动CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;
第二,声明过渡元素最终状态样式,比如悬浮状态;
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。

CSS3的过火transition属性是三个复合属性,首要回顾以下多少个子属性:

  • transition-property:内定过渡或动态模拟的CSS属性

  • transition-duration:钦赐达成过渡所需的光阴

  • transition-timing-function:钦定过渡函数

  • transition-delay:钦赐开首现出的延迟时间

先来看transition-property属性

transition-property用来钦定连通动画的CSS属性名称,而以此过渡性质独有具备贰个中式茶食值的性质(须要发出动画的属性)本事有所过渡效果,其对应享有过渡的CSS属性重要有:

澳门金莎娱乐网站 23

HTML:

<div></div>

CSS:

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

示范结果:

鼠标移入

澳门金莎娱乐网站 24

鼠标移出

澳门金莎娱乐网站 25

极度注意:当“transition-property”属性设置为all时,表示的是富有中式茶食值的性质。

用一个大约的例证来阐明这些主题素材:

万一你的开始状态设置了体制“width”,“height”,“background”,当你在终始状态都转移了这四个属性,那么all意味着的正是“width”、“height”和“background”。假设您的终始状态只退换了“width”和“height”时,那么all代表的正是“width”和“height”。

“steps()”的别的用法

背景动画精灵(background sprites)仅仅只是 steps 时序函数的用法之一。除了这么些之外该函数还适用于营造其余须求一密密麻麻离散步骤的卡通片。比如,你能够用该函数制作一个摆钟。

动画--过渡所需时日 transition-duration

transition-duration品质首要用于设置八个属性过渡到另八个属性所需的小时,约等于从旧属性过渡到新属性费用的时长,俗称持续时间

案例演示:

在鼠标悬停(hover)状态下,让容器从直角渐渐过渡到圆角,并让漫天动画持续0.5s。

HTML:

<div></div>

CSS:

div {
  width: 300px;
  height: 200px;
  background-color: orange;
  margin: 20px auto;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 20px;
}

演示结果:

鼠标移入

澳门金莎娱乐网站 26

鼠标移出

澳门金莎娱乐网站 27

备忘小条

假如你喜欢那篇文章,你能够将它分享在推特(Twitter),只怕封存下边包车型地铁备忘小条,以便参照他事他说加以考察。

澳门金莎娱乐网站 28

打赏支持本人翻译更加多好作品,多谢!

打赏译者

动画--过渡函数 transition-timing-function

transition-timing-function属性指的是连着的“缓动函数”。首要用于钦命浏览器的连片速度,以及连接时期的操作实市场价格况,个中要包蕴以下两种函数:

澳门金莎娱乐网站 29

(单击图片可拓展)

案例展现:

在hover状态下,让容器从三个长方形慢慢过渡到一个圆形,而全套过渡是先加快再减速,约等于运用ease-in-out函数。

HTML代码:

<div></div>

CSS代码:

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 100%;
}

亲自去做结果

鼠标移入:

澳门金莎娱乐网站 30

鼠标移出:

澳门金莎娱乐网站 31

打赏支持自个儿翻译越来越多好小说,多谢!

任选一种支付形式

澳门金莎娱乐网站 32 澳门金莎娱乐网站 33

赞 收藏 评论

动画--过渡延迟时间 transition-delay

transition-delay属性transition-duration属性Infiniti类似,不相同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay主要用于钦赐三个动画片早先实施的日子,也便是说当改换成分属性值后多长期起先实行。

突发性大家想改造两个也许多少个css属性的transition效果时,只要把多少个transition的宣示串在同步,用逗号(“,”)隔开,然后分别能够有各自不相同的继续时间和其时光的速率转换情势。但必要值得注意的一点:第二个日子的值为 transition-duration,第三个为transition-delay。

例如:a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

身体力行演示:

透过transition属性将三个200px *200px的铁蓝容器,在鼠标悬浮状态时,过渡到二个300px * 300px的革命容器。况兼整个过渡0.1s后触发,并且整个过渡持续0.28s。

HTML代码:

<div class="wrapper">
  <div>鼠标放到我的身上来</div>
</div>

CSS代码:

.wrapper {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  border: 2px dotted red;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background-color: orange;
  -webkit-transition: all .28s ease-in .1s;
  transition: all .28s ease-in .1s;
}
.wrapper div:hover {
  width: 300px;
  height: 300px;
  background-color: red;
}

身体力行结果

鼠标移入:

澳门金莎娱乐网站 34

鼠标移出:

澳门金莎娱乐网站 35

至于我:刘健超-J.c

澳门金莎娱乐网站 36

前端,在路上... 个人主页 · 笔者的稿子 · 19 ·     

澳门金莎娱乐网站 37

编辑:网页制作 本文来源:澳门金莎娱乐网站十天精通CSS3

关键词:

  • 上一篇:没有了
  • 下一篇:没有了