澳门新莆京手机网站-新蒲京娱乐场 > 联系我们 > Twitter的”fave”动漫

Twitter的”fave”动漫

Twitter的”fave”动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,胡屹 校稿。未经许可,制止转发!
土耳其共和国语出处: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(State of Qatar函数能够让要素偏斜呈现。它能够将叁个指标以其主题岗位围绕着X轴Y轴遵照一定的角度偏斜。那与rotate(卡塔尔国函数的旋转差异,rotate(卡塔尔(قطر‎函数只是旋转,而不会变动成分的形态。skew(卡塔尔国函数不会旋转,而只会改形成分的形象。

Skew(State of Qatar具备三种状态:

1、skew(x,y卡塔尔(قطر‎使成分在档期的顺序和垂直方向同不常候扭曲(X轴和Y轴同不常候按一定的角度值进行翻转变形);

图片 3

率先个参数对应X轴,第3个参数对应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

Step1 - Photoshop

将来,小编超少写介绍CSS的随笔,因为以为网址开辟的要紧如故在劳务器端。

运动发生的错觉

这段动漫的法力相同于观望古老的西洋镜,该装置呈现的是一各种各样三番五次的拱卫着圆筒的插图。在底下的示范中,大家不行使圆筒,而是在某些成分内部彰显风姿洒脱多种图片。

变形--缩放 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(xState of Qatar元素仅水平方向缩放(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的值,作用是让要素放大。

Step2 - HTML/CSS

而是,CSS动漫除却,它实在太有用了。

示例

把鼠标悬停在少数上就能够见到动漫效果(请到原文查阅动漫效果——译者注)。

在本示例中,大家将从创设意气风发连串能组成动漫的图片早前。在这里处,大家使用来源 推特(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(YState of Qatar仅垂直方向移动(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

Step3 - JavaScript(jQuery)

图片 17

Steps(卡塔尔国 时序函数

大部的时序函数,比方 ease(缓冲)和 cubic-bezier(三回贝塞尔),都能让要素从开头状态平滑地衔接到终极状态。steps 时序函数与此差别,它并非一望无际地联网,而是将联网进度分割为一定数额的步调,何况在这里些手续之间急速地移动。

图片 18

我们先成立如下的 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(State of Qatar函数来效仿transform中translate(State of Qatar位移的效果与利益。
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);
}

亲自过问结果:

图片 19

Step4 - CSS修改

 

  最后结果如下:

图片 20

正文介绍CSS动漫的两大组成都部队分:transition和animation。作者不思考提交每一条属性的事必躬亲介绍,这样能够写一本书。那篇文章只是叁个简单介绍,协理初读书人理解全貌,同一时候又是贰个不慢指南,当你想不起某三个用法的时候,能够相当慢地找到提示。

背景图片

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

图片 21

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帧组成的。

当我们将鼠标悬停在这里个成分上时,所看见的效益是其背景图片通过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);
}

变形--原点 transform-origin

其余一个要素都有一个着力点,暗许情状之下,其主题点是处在成分X轴和Y轴的二分之一处。如下图所示:

图片 22

在未曾重新载入参数transform-origin改产生分原点地方的景观下,CSS变形实行的转动、位移、缩放,扭曲等操作都以以成分协调主旨地方举办变形。但许多时候,大家能够透过transform-origin来对成分进行原点地点变动,使成分原点不在成分的骨干地点,以高达须求的原点地点。

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

图片 23

示范体现:

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

演示结果:

图片 24

Step1 - Photoshop

1. 新建文件

  开关的尺码是100px X 80px,但出于大家供给创造二个有三种情况的CSS sprite背景图,所以咱们在Photoshop中开创(Ctrl+N)四个长度宽度为200px X 160px的图样文件,如下图:

图片 25

2. 创造参谋线

  为了使绘制开关更易于,大家创造参考线,从标尺中拉出参谋线,如若您找不到标尺,能够按Ctrl+Enclave展现,如下图:

图片 26

3. 制图形状

  选拔工具面板中的矩形工具,设置圆角半径为10px,在画布上制图形状,如下图:

图片 27

4. 设置形状样式

  接上海体育场所最终一步,双击层,张开图层样式窗口,设置形状的体裁,首先采纳渐变叠合,设置渐变颜色从#3d3d3d到#8b8b8b,如下图:

图片 28

  然后,选取“内发光”,设置混合情势为“日常”,不光滑度为100%,颜色设置为#ffffff,图素大小设置为3像素,如下图:

图片 29

  之后,再选用“描边”,设置大小为1像素,地方为“内部”,颜色为灰黄#000000,如下图:

图片 30

5. 加多字体

  输入文本,设置文字相对程度和垂直居中,字体为尊重准圆简体,字号36点,加粗平滑,颜色为灰湖绿(#FFFFFF),如下图:

图片 31

6. 安装字体样式

  同样的双击文字图层,张开文字图层样式,设置字体样式,点击“投影”,设置混合方式为“平常”,颜色为#3e3e3e,不发光度为100%,角度为90度,间距为1像素,大小为2像素;点击“内阴影”,设置混合形式为“符合规律”,颜色为#454545,不光滑度为伍分叁,角度为90度,间隔为1像素,大小为2像素,如下图所示:

图片 32

  至此,大家就完事链接状态下的按键背景图,效果如下:

图片 33

7. 悬停背景图

  制作鼠标悬停状态下的按键背景图,把图层归入组内,复制组,移动,等量齐观命名,如下图:

图片 34

8.背景图属性

  纠正hover背景图的体裁属性,展开背景图的图层样式窗口,选用“描边”,改过边框颜色为#004d77;接受“渐变叠合”,校订渐变从#1671a3到#5baedc,如下图:

 

图片 35

9. 装置字体样式

  张开字体图层样式,采用“投影”,改进投影颜色为#207aad;接受“内阴影”,校正字体颜色为#0d4f74,如下图:

图片 36

10. 图层半透明

  加多图层半透明效果,按以上步骤纠正,鼠标悬停背景图如下,最终是再加多大器晚成层半透明层,先增加一个200px X 40px的石绿层,置顶并设置褐色层的发光度为十一分之后生可畏,如下图:

图片 37

  最终,大家做到的CSS sprite背景图如下,您也能够点击下载PSD文件。

图片 38

Step2 - HTML/CSS
  按键的HTML代码相当的轻便:
<a class=”button”>前端档案</a>
  再经过CSS设置一下背景图片就足以了,CSS代码如下:

复制代码 代码如下:

/*链接按键样式*/
.button {
width:200px;
height:80px;
display:block;
background:url(bg_button.gif) top no-repeat;
text-indent:-9999px;
}
/*开关悬停样式*/
.button:hover{
background:url(bg_button.gif) bottom no-repeat;
}

  依据大家近期设计的图纸,按键的长度宽度为200px X 80px,背景图为灰绿开关。这段CSS就可以看到落到实处大家演示中的第生机勃勃种效应(纯CSS效果)。

Step3 - JavaScript/jQuery

  通过JavaScript,大家得以让按键特别光彩夺目一些,大家供给在前头底子上加二个<span>成分,作为鼠标悬停时候显得的背景层,那么HTML会在DOM加载成功后修正成为:

view sourceprint?<a class=”button”><span class=”hover”>前端档案</span></a>

  <span>成分在鼠标悬停前是全透明的,鼠标经过时,逐步不透明,以高达渐变的效果,动漫进度如下图:

图片 39

由此上述深入分析,大家得以写出jQuery代码如下,在DOM加载成功后,为按键链接增加<span>层用作鼠标经过时的背景图,在为<span>成分增加鼠标悬停事件,鼠标经过时,渐变至不透明,鼠标离开时,渐变至全透明。

复制代码 代码如下:

//把手袋含到<span>成分中,再附加到.button中
$('.jsbutton,.viewbutton,.downloadbutton').wrapInner('<span class="hover"></span>').css('textIndent','0').each(function () {
//先安装<span>成分中全透明,再增加鼠标悬停事件
$('span.hover').css('opacity', 0).hover(function () {
$(this卡塔尔.stop(卡塔尔(قطر‎.fadeTo(650, 1卡塔尔; //渐变至不透明
}, function () {
$(this卡塔尔.stop(卡塔尔.fadeTo(650, 0State of Qatar; //渐变至全透明
});
});

从那之后,我们做到了JS代码,还要小心一个手续,CSS改良,见Step4。
Step4 - CSS修改
  在纯CSS效果的示范中,大家是采用:hover伪类来落到实处sprite图片的切换,当我们使用jQuery后,是引入三个<span>层用作鼠标经过时背景图,所以CSS供给做如下更改:

复制代码 代码如下:

/*事情未发生前的按键悬停样式*/
.button:hover{
background:url(bg_button.gif) bottom no-repeat;
}

修改为

复制代码 代码如下:

/*不须求在设置:hover的体制,而是设置span.hover的体裁*/
.button span.hover {
/*精心要接纳相对化定位*/
position: absolute;
display: block;
width:200px;
height:80px;
background:url(bg_button.gif) bottom no-repeat;
text-indent:-9999px;
}

总结
  以上大家按4个步骤实现了四个动态渐变按键,在示范中,作者还提供了二个恢宏示例,您能够接着本人完结三个,也得以下载源代码校勘定制,当然,您有何好的建议恐怕有何难点,应接给自己留言。
示范地址
下载地址

Step1 - Photoshop Step2 - HTML/CSS Step3 - JavaScript(jQuery卡塔尔(قطر‎ Step4 - CSS改良 最后结果如下: Step1

  • Photoshop 1. 新建文件 开关的尺寸是...

本人的首要参照他事他说加以考察资料是,贰零壹贰年10月,Lea Verou在JSConf.Asia上边的解说《CSS in the 4th Dimension》。这是四个不胜棒的解说,有视频和幻灯片,刚毅推荐。

Copyright © 2015-2019 http://www.carrefourstation.com. 澳门新莆京手机网站-新蒲京娱乐场有限公司 版权所有