图片 15

示例

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

在本示例中,大家将从制作一文山会海能整合动画的图纸初步。在此,大家选用来源
Instagram 的“fave”图标动画的部分图片集:

图片 1

为了能让这一个帧动起来,大家要求把它们放置在一排上。在此个文件中,那个帧已经排列在一排上了,那意味我们得以透过安装背景地方(background-position)属性使背景从第一帧过渡到最后一帧。

图片 2

动画–过渡所需时日 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;
}

事必躬亲结果:

鼠标移入

图片 3

鼠标移出

图片 4

本学科分为以下三步:

背景图片

接下去, 大家能够添加一些体制并设置背景图片地点:

图片 5

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

请在乎第四个法规 animation。在本例中,大家应用 steps
时序函数,让background-position 属性经历了多少个持续时间为1秒的联网。在
steps 部分的“55”这几个值,代表了这段动画是由55帧组成的。

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

除此以外这么些案例,也足以用 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);
}

变形–缩放 scale()

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

缩放 scale 具备二种情状:

1、 scale(X,Y)使元素水平方向和垂直方向同期缩放(也正是X轴和Y轴相同的时候缩放)

图片 6

例如:

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轴缩放)

图片 7

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

图片 8

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

示范结果

图片 9

注意: scale()的取值暗中同意的值为1,当班值日设置为0.010.99里面的任何值,成效使二个成分降低;而别的大于或等于1.01的值,功用是让要素放大。

Step2 – HTML/CSS

备忘小条

若是您喜欢那篇小说,你能够将它分享在推文(Tweet),可能封存下边的备忘小条,以便仿照效法。

图片 10

打赏援救小编翻译越来越多好小说,谢谢!

打赏译者

动画片–过渡延迟时间 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;
}

示范结果

鼠标移入:

图片 11

鼠标移出:

图片 12

你可能感兴趣的稿子:

  • jQuery得到字体颜色15人码的不二等秘书籍
  • jquery达成实时改动网页字体大小、字体背景象和颜色的法子
  • JQuery完毕动态及时退换字体颜色的主意
  • jQuery完成的背景颜色渐变动画效能示例
  • jQuery与js实现颜色渐变的不二秘诀
  • jQuery达成的文字hover颜色渐变效果实例
  • 根据jquery的direction图片渐变动画成效
  • jQuery达成的立体文字渐变效果
  • jQuery渐变发光导航菜单的实例代码
  • jquery实现模拟百分比进度条渐变效果代码
  • jQuery完结渐变弹出层和弹出菜单的点子
  • jquery落成鼠标经过彰显下划线的渐变下拉菜单效果代码
  • jQuery实现字体颜色渐变效果的不二等秘书籍

“steps()”的别的用法

背景动画Smart(background sprites)仅仅只是 steps
时序函数的用法之一。除了这么些之外该函数还适用于创设其余须要一密密麻麻离散步骤的动画。举例,你可以用该函数制作一个摆钟。

变形–原点 transform-origin

其余三个要素都有三个主导点,私下认可意况之下,个中央点是处在成分X轴和Y轴的一半处。如下图所示:

图片 13

在未有重新恢复设置transform-origin改造成分原点地方的场馆下,CSS变形举行的团团转、位移、缩放,扭曲等操作都以以元素谐和主题地方进行变形。但过多时候,我们能够透过transform-origin来对成分进行原点位置变动,使成分原点不在成分的为主地点,以到达需求的原点地方。

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

图片 14

示范展示:

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

示范结果:

图片 15

Step1 – Photoshop

admin

相关文章

发表评论

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