您的位置:澳门新葡8455最新网站 > Web前端 > 十天精通CSS3

十天精通CSS3

发布时间:2019-10-05 16:07编辑:Web前端浏览(136)

    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” 动画

    前不久 推特(Twitter)通过引进一段新的卡通片重新设计了“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轴,第三个参数对应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的值,成效是让要素放大。

    示例

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

    在本示例中,大家将从塑造一层层能组成动画的图片最先。在此处,我们运用来源 照片墙 的“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;
      }
    }

    请留意第一个规则 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()”的别的用法

    背景动画Smart(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

    备忘小条

    设若你喜爱那篇小说,你能够将它分享在Facebook,只怕封存上边包车型地铁备忘小条,以便仿效。

    图片 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属性极致类似,分歧的是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

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:十天精通CSS3

    关键词:

上一篇:没有了

下一篇:没有了