您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版:打造动态渐变按钮,过渡和

1010cc时时彩经典版:打造动态渐变按钮,过渡和

发布时间:2019-10-14 07:11编辑:1010cc时时彩客户端浏览(132)

    Twitter的”fave”动画

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

    本文由 伯乐在线 - 刘健超-J.c 翻译,胡屹 校稿。未经许可,防止转载!
    朝鲜语出处:cssanimation.rocks。招待参与翻译组。

    变形--旋转 rotate()

    旋转rotate()函数透过点名的角度参数使成分相对原点进行旋转。它首要在二维空间内开展操作,设置一个角度值,用来钦命旋转的上涨的幅度。假诺那些值为正值,成分相对原点中央顺时针旋转;假诺那些值为负值,成分绝对原点中央逆时针旋转。如下图所示:

    1010cc时时彩经典版 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);
    }
    

    亲自去做结果

    1010cc时时彩经典版 2

     

    本课程分为以下三步:

    连着和卡通

    transition(过渡)
    在CSS3引进transition在此以前css未有的时候间轴,全体的情状变化都以弹指间成功
    div{ height:15px; width:15px;}div:hover{ height: 450px; width: 450px;}

    transition的职能在于,钦点状态变化所需求的时日
    transition: 1s;

    点名属性
    大家还足以钦定transition适用的属性,比如只适用于height
    transition: 1s height;

    那样一来,独有height的转移必要1秒实现,别的变化(主尽管width)如故瞬间促成,在同一行transition语句中,能够分级钦命六特本性
    transition: 1s height, 1s width;

    delay(延时)
    大家仍是能够钦赐变化的延时上马,比如那个地方大家意在让height首发生变化,等收尾未来,再让width发生变化, 大家只要求为width钦命贰个delay参数
    transition: 1s height, 1s 1s width;

    地点代码钦定,width在1秒现在,再早先变化,也正是延迟(delay)1秒
    delay的的确意义在于,它内定了动画片产生的次第,使得七个例外的transition能够连在一同,变成复杂效果
    transition-timing-function
    transition的气象变化速度(又称timing function),默许不是匀速的,而是慢慢放缓,那叫做ease 除了ease以外,其余方式还饱含
    linear:匀速
    ease-in:加速
    ease-out:减速
    cubic-bezier函数(贝塞尔函数)

    贝塞尔函数工具
    语法
    transition: 1s 1s height ease;

    那实质上是三个简写格局,能够独自定义成各类属性
    transition-property: height;transition-duration: 1s;transition-delay: 1s;transition-timing-function: ease;

    注意事项
    当下,各大浏览器(包涵IE 10)都早已支撑无前缀的transition,所以transition已经能够很安全地不加浏览器前缀
    transition供给显明掌握,早先境况和得了状态的切实数值,工夫揣测出中间状态,什么none到block之类的是特其余
    transition是一回性的,不能够再度发生,除非每每触发

    事件
    transitionend
    transitionend 事件会在 CSS transition 结束后触发.
    当transition完结前移除transition时,比方移除css的transition-property 属性,事件将不会被触发.如在transition完结前安设 display: none,事件一样不会被触发.
    多少个脾性产生了扭转就接触两回,比方 ``` div{ transition: height 1s, width 1s; } div:hover{ width: 100px; height: 100px; }

    贰次hover会触发一回transitionend事件

    • 专一分歧浏览器中的前缀 webkitTransitionEnd mozkitTransitionEnd

    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轴同期按一定的角度值举行翻调换形);

    1010cc时时彩经典版 3

    率先个参数对应X轴,第三个参数对应Y轴。如若第贰个参数未提供,则值为0,也正是Y轴方向上无斜切。

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

    1010cc时时彩经典版 4

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

    1010cc时时彩经典版 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);
    }
    

    演示结果

    1010cc时时彩经典版 6

    Step1 - Photoshop

    animation(动画)

    transition 相比较轻松,animation能够帮大家贯彻复杂的动画

    一举手一投足发生的错觉

    这段动画的机能类似于观望古老的西洋镜,该装置显示的是一雨后春笋一而再的拱卫着圆筒的插画。在上边包车型大巴示范中,大家不应用圆筒,而是在有个别成分内部展现一文山会海图片。

    变形--缩放 scale()

    缩放 scale()函数 让要素依据中央原点对指标开展缩放。

    缩放 scale 具备三种情形:

    1、 scale(X,Y)使成分水平方向和垂直方向同期缩放(相当于X轴和Y轴同期缩放)

    1010cc时时彩经典版 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轴缩放)

    1010cc时时彩经典版 8

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

    1010cc时时彩经典版 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);
    }
    

    亲自去做结果

    1010cc时时彩经典版 10

    注意: scale()的取值暗中同意的值为1,当班值日设置为0.010.99里头的其余值,功能使二个要素裁减;而任何大于或等于1.01的值,成效是让要素放大。

    Step2 - HTML/CSS

    骨干用法

    @keyframes change-color{ 0% { background: red; } 50%{ background: blue; } 100%{ background: orange; }}div{ height: 100px; width: 200px; border: 1px solid #111;}div:hover{ animation-name: change-color; animation-duration: 2s;}

    咱俩运用keyframes(关键帧)来定义二个卡通效果, change-color是大家收获动画名字,每一个百分比前面写的是应和时间点本身最主要帧样式, 定义好后,在animation(动画)属性中调用,2s 表示的动画片的持续时间
     钦定播放次数(animation-iteration-count)
    暗许景况下,动画只会播放一回, 我们得以内定动画具体播放的次数,比如3次:
    div:hover { animation-name: change-color; animation-duration: 2s; animation-iteration-count: 3;}

    也能够有线循环播放:
    div:hover { animation-name: change-color; animation-duration: 2s; animation-iteration-count: infinite;}

    心跳demo
    延时(animation-delay)
    animation-timing-function
    动画播放前后的动静(animation-fill-mode)
    animation-fill-mode: none | backwards | forwards| both;

    none: 动画试行前后不更换任何样式
    forwards: 动画甘休后的靶子保持动画最后一帧的体裁
    backwards: 动画起来前目的保持动画第一帧的体制(必得同盟延时技术看到作用, 假诺设置为backwards, 延时之间的样式是动画第一帧的样式, 不然延时里面是指标暗许样式)
    both: 同期选取forwards和 backwards

    卡通播放的取向(animation-direction)
    卡通三番五次播发时,每一回都是从截至状态跳回到初阶状态,再起来广播。animation-direction属性,能够转移这种作为
    animation-direction可以使用下列值:
    normal: 符合规律播放, 私下认可值;
    reverse: 倒着播放
    alternate: 第一遍正常播放, 第二倒着播放, .. 那样交替的循环下去
    alternate-reverse: 第贰回倒着播放, 第一遍寻常播放, .. 那样交替的循环下去

    下图解释了它的规律(假定动画三回九转播发一遍)

    1010cc时时彩经典版 11

    大致说,animation-direction钦点了动画片播放的矛头,最常用的值是normal和reverse。浏览器对其他值的支撑情状不好,应该慎用
    语法
    div:hover { animation-name: change-color; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3;}

    简写
    animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;

    例子:
    div:hover { animation: 1s 1s change-color linear 3 forwards normal;}

    keyframes关键字用来定义动画的次第状态,它的写法非常自由
    @keyframes change-color { 0% { background: #c00 } 50% { background: orange } 100% { background: yellowgreen }}

    0%能够用from代表,百分之百得以用to代表,由此地点的代码等同于下边包车型客车情势
    @keyframes change-color { from { background: #c00 } 50% { background: orange } to { background: yellowgreen }}

    如若轻易有个别状态,浏览器会自动推算中间状态,所以上面都以法定的写法。
    @keyframes change-color { 50% { background: orange } to { background: yellowgreen }}@keyframes change-color { to { background: yellowgreen }}

    竟然,可以把多个状态写在一行。
    div:hover { animation: 1s change-color infinite steps(10);}

    其他一些亟待注意的是,浏览器从一个情状向另贰个处境过渡,是坦荡对接。steps函数能够达成分步过渡。
    div:hover { animation: 1s change-color infinite steps(10);}

    文字输入效果demo
    animation-play-state
    突发性,动画播放进程中,会突然结束。那时,暗许行为是跳回到动画的初阶情况,借使想让动画片保持忽然停下时的境况,将要接纳animation-play-state属性。
    div { animation: spin 1s linear infinite; animation-play-state: paused;}div:hover { animation-play-state: running;}

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版:打造动态渐变按钮,过渡和

    关键词: