妙用 scale 与 transfrom-origin,精准控制动画方向

2019-05-01 作者:计算机教程   |   浏览(145)

妙用 scale 与 transfrom-origin,精准控制动画方向

2018/04/25 · CSS · 1 评论 · scale, transfrom-origin

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后,很多朋友找我讨论,感叹 CSS 的奇妙。

然后昨天,群里一位朋友问到了一个和这个效果比较类似的效果,问如何

将下面这个动画的下划线效果,从左进入,右边离开修改为从上方进入,下方离开。

描述很难理解,看看原本的效果:

www.2003.com 1

编写自己的代码库:CSS3 常用动画的实现

2017/08/16 · CSS · 动画

原文出处: 守候你   

难点所在

第一眼看到这个效果,我的内心毫无波澜。以为只是简单的一个下划线 hover 效果,经过友人提醒,才发现,这个动画效果中,下划线是从一端进入,从另外一端离开的。而且,这个 hover 动画是纯 CSS 实现的。

www.2003.com 2

先不考虑上面说的修改需求,先想一想,如果就是还原上述效果,仅仅使用 CSS,该如何做呢?

 

1.前言

在月初的时候,发了CSS3热身实战–过渡与动画(实现炫酷下拉,手风琴,无缝滚动)。js的代码库也发过两次,两篇文章。之前也写了css3的热身实战,既然热身完了,是时候开始封装css3的代码库了,相比起js的代码库,css3的代码库的逻辑性就更加简单了!可以说只要打上注释和一张效果图就可以让大家明白了其中的原理了!
我写代码库的时候,动画效果主要是参考了三个开源项目,nechover.cssanimate.css这三个项目的质量非常的高,建议大家去了解。
源码已经放到github上面了,大家可以去看,也欢迎大家star一下!ec-css

我指出这三个库并不是叫大家去拿别人的代码,稍微修改一下,或者直接拷贝到自己的项目上,然后就说是自己的项目。我是让大家去看别人的代码,学习别人的实现方式或者动画效果,然后再用自己的方式实现,当然如果把别人的项目,增删改查到面目全非的地步,这个我个人觉得可以说是自己的项目了!强调一点,不要直接复制别人的代码,放到自己的项目上,然后说是自己开发的,这是不尊重别人的成果,对自己的技术水平提升的帮助也较少。我写文章,虽然也会给出代码,但是我的目的是提供大家参考的,希望给让大家学习到知识或者发散思维,写出更好的作品。之前也说过,我写文章的目的是授人以渔,不是授人以鱼

还原效果

嗯,正常而言,我们一个 hover 效果,可能就是从哪里来,回哪里去,大部分的应该是这样的:

www.2003.com 3

DEMO1

现在,难点就在于如何在 hover 离开的时候,改变动画行进的方向。

下面我们将一个 hover 动画分解为 3 个部分:

  1. hover 进入状态
  2. hover 停留状态
  3. hover 离开状态

但是,对于一个 hover 效果而言,正常来说,只有初始状态,和hover状态两种。可能我们的代码是这样:

div { xxxx... } div:hover { xxxx... }

1
2
3
4
5
6
7
div {
    xxxx...
}
div:hover {
    xxxx...
}

对于一个 hover transition 动画,它应该是从:

  • 正常状态 -> hover状态 -> 正常状态 (三个步骤,两种状态)

所以,必须要有一种方法,能够使得 hover 动画的进入与离开产生两种不一样的效果,实现:

  • 状态1 -> hover状态 -> 状态2 (三个步骤,三种状态)

 

声明

1.下面将会看到很多个类似www.2003.com 4这样的矩形,都是span标签,样式都是给出的css

span{ cursor: pointer; height: 40px; line-height: 40px; text-align: center; display: inline-block; color: #333; background: #ccc; min-width: 80px; padding: 0 10px; margin: 10px; }

1
2
3
4
5
6
7
8
9
10
11
12
span{
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        color: #333;
        background: #ccc;
        min-width: 80px;
        padding: 0 10px;
        margin: 10px;
    }

2.关于class命名方式,l代表left,r代表right,t代表top,b代表bottom,c代表center,m代表middle。切记

文章比较长,但是说得就是两点,大家看得也应该会很快
1.写出一些hover动画和预设动画的运行效果,并且贴出代码
2.发现几个动画组合,和加上无限动画,反向动画,会有不一样的效果,并且继续研究,看下能不能研究出不一样的东西!

实现控制动画方向的关键点

所以,这里的关键点就在于(划重点):

使得 hover 动画的进入与离开产生两种不一样的效果 。

接下来,也就是本文的关键所在,使用 transform: scale() 以及 transform-origin 实现这个效果。

 

2.hover动画

说了那么多,是时候进入正文了,

首先是hover动画,关于这个概念,我解释下,就是鼠标移上去触发的动画,就是触发了鼠标的hover事件时能看到的动画!下面,按照类型,一个一个的写!

transform: scale() 实现线条运动

transform: scale 大家应该都很熟悉了,通俗来说是用于缩放,用官方的话说,就是:

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值。

这里我们使用 transform: scaleX(0) 与 transform: scaleX(1) 来改变线条的显示与隐藏,它的 CSS 代码简单来看,可能是这样:

div { position: absolute; width: 200px; height: 60px; } div::before { content: ""; position: absolute; left: 0; bottom: 0; width: 200px; height: 2px; background: deeppink; transition: transform .5s; transform: scaleX(0); transrform-origin:100% 0; } div:hover::before { transform: scaleX(1); transform-origin:0 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
    position: absolute;
    width: 200px;
    height: 60px;
}
div::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 200px;
height: 2px;
background: deeppink;
transition: transform .5s;
transform: scaleX(0);
transrform-origin:100% 0;
}
 
div:hover::before {
transform: scaleX(1);
transform-origin:0 0;
}

www.2003.com 5

DEMO2

嗯?为什么是要用 transform: scale() 来实现线条的动画?因为它可以配合 transform-origin 实现动画的不同运动方向:

 

2-1.简单动画

transform-origin 实现线条运动方向

transform-origin 让我们可以更改一个元素变形(transform)的原点,transform-origin 属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。

本效果最最最重要的地方就在于这里,我们使用 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向。

  1. 我们给线条设置一个默认的 transform-origin 记为状态1
  2. hover 的时候,设置另外一个不同的 transform-origin, 记为状态2

所以,当然我们 hover 的时候,会读取状态2的transform-origin,从该原点开始放大至 scaleX(1),hover 离开的时候,会读取状态1的transform-origin,从scaleX(1)状态缩小至该原点。

嗯,CSS代码大概是这样:

div { position: absolute; width: 200px; height: 60px; } div::before { content: ""; position: absolute; left: 0; bottom: 0; width: 200px; height: 2px; background: deeppink; transition: transform .5s; transform: scaleX(0); transform-origin: 100% 0; } div:hover::before { transform: scaleX(1); transform-origin: 0 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
    position: absolute;
    width: 200px;
    height: 60px;
}
div::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 200px;
height: 2px;
background: deeppink;
transition: transform .5s;
transform: scaleX(0);
transform-origin: 100% 0;
}
 
div:hover::before {
transform: scaleX(1);
transform-origin: 0 0;
}

这里,我们巧妙的通过 hover 状态施加了一层新的 transform-origin ,让动画的进入与离开产生了两种不同的效果,两个不同的方向。

如此一来,也就顺利实现了我们想要的效果,撒花:

www.2003.com 6

DEMO3

注意,这里使用了 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向,而没有借助诸如 position 位移,transform: translate(),或者 margin 等位置属性去改变线条所在的位置。

所以,有趣的是,线条其实没有产生过任何位移,这里其实也是障眼法,让它看上去,它好像在移动。

 

2-1-1大小变化

www.2003.com 7

html

<span class="ech-big">big</span> <span class="ech-small">small</span>

1
2
<span class="ech-big">big</span>
<span class="ech-small">small</span>

css

.ech-big,.ech-small { transition: all .4s; } .ech-big:hover{ transform: scale(1.2); } .ech-small:hover{ transform: scale(.9); }

1
2
3
4
5
6
7
8
9
.ech-big,.ech-small {
    transition: all .4s;
}
.ech-big:hover{
    transform: scale(1.2);
}
.ech-small:hover{
    transform: scale(.9);
}

拓展延伸

嗯,有了上述方法,也就是 transform: scale() 配合 transform-origin ,我们可以开始随意改变动画的初始与结束状态了。把他们运用到其他效果之上,简单的几个示意效果:

www.2003.com 8

 

DEMO4

2-1-2形状变化

www.2003.com 9

html

<span class="ech-skew-l">skew-l</span> <span class="ech-skew-r">skew-r</span> <span class="ech-skew-l-t">skew-l-t</span> <span class="ech-skew-r-t">skew-r-t</span> <span class="ech-skew-l-b">skew-l-b</span> <span class="ech-skew-r-b">skew-r-b</span>

1
2
3
4
5
6
<span class="ech-skew-l">skew-l</span>
<span class="ech-skew-r">skew-r</span>
<span class="ech-skew-l-t">skew-l-t</span>
<span class="ech-skew-r-t">skew-r-t</span>
<span class="ech-skew-l-b">skew-l-b</span>
<span class="ech-skew-r-b">skew-r-b</span>

css

.ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b, .ech-skew-r-t{ transition: all .4s; } .ech-skew-r-t, .ech-skew-l-t { transform-origin: 0 100%; } .ech-skew-r-b, .ech-skew-l-b { transform-origin: 100% 0; } .ech-skew-l:hover { transform: skew(-15deg); } .ech-skew-r:hover { transform: skew(15deg); } .ech-skew-l-t:hover { transform: skew(-15deg); } .ech-skew-r-t:hover { transform: skew(15deg); } .ech-skew-l-b:hover { transform: skew(15deg); } .ech-skew-r-b:hover { transform: skew(-15deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b, .ech-skew-r-t{
    transition: all .4s;
}
.ech-skew-r-t, .ech-skew-l-t {
    transform-origin: 0 100%;
}
.ech-skew-r-b, .ech-skew-l-b {
    transform-origin: 100% 0;
}
.ech-skew-l:hover {
    transform: skew(-15deg);
}
.ech-skew-r:hover {
    transform: skew(15deg);
}
.ech-skew-l-t:hover {
    transform: skew(-15deg);
}
.ech-skew-r-t:hover {
    transform: skew(15deg);
}
.ech-skew-l-b:hover {
    transform: skew(15deg);
}
.ech-skew-r-b:hover {
    transform: skew(-15deg);
}

值得注意的点

还有几个点是比较有意思的,大家可以尝试尝试,思考思考:

  • 尝试改变两种状态的 transition-timing-function 缓动函数,可以让动画更加流畅具有美感;
  • 注意一下,线条的 transition 设置的是 transition: transform .5s 而不是 transition: all .5s,体验一下两种写法所产生的不同效果。

 

2-1-3旋转角度变化

www.2003.com 10

html

<pre class="lang:default decode:true"> <span class="ech-grow-rotate-l">grow-rotate-l</span> <span class="ech-grow-rotate-r">grow-rotate-r</span> <span class="ech-rotate5">rotate5</span> <span class="ech-rotate15">rotate15</span> <span class="ech-rotate30">rotate30</span> <span class="ech-rotate60">rotate60</span> <span class="ech-rotate90">rotate90</span> <span class="ech-rotate180">rotate180</span> <span class="ech-rotate360">rotate360</span> <span class="ech-rotate-5">rotate-5</span> <span class="ech-rotate-15">rotate-15</span> <span class="ech-rotate-30">rotate-30</span> <span class="ech-rotate-60">rotate-60</span> <span class="ech-rotate-90">rotate-90</span> <span class="ech-rotate-180">rotate-180</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<pre class="lang:default decode:true">
<span class="ech-grow-rotate-l">grow-rotate-l</span>
<span class="ech-grow-rotate-r">grow-rotate-r</span>
<span class="ech-rotate5">rotate5</span>
<span class="ech-rotate15">rotate15</span>
<span class="ech-rotate30">rotate30</span>
<span class="ech-rotate60">rotate60</span>
<span class="ech-rotate90">rotate90</span>
<span class="ech-rotate180">rotate180</span>
<span class="ech-rotate360">rotate360</span>
<span class="ech-rotate-5">rotate-5</span>
<span class="ech-rotate-15">rotate-15</span>
<span class="ech-rotate-30">rotate-30</span>
<span class="ech-rotate-60">rotate-60</span>
<span class="ech-rotate-90">rotate-90</span>
<span class="ech-rotate-180">rotate-180</span>

css

.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{ transition: all .4s; } .ech-grow-rotate-l:hover { transform: scale(1.1) rotate(4deg); } .ech-grow-rotate-r:hover { transform: scale(1.1) rotate(-4deg); } .ech-rotate-5:hover { transform: rotate(-5deg); } .ech-rotate-15:hover { transform: rotate(-15deg); } .ech-rotate-30:hover { transform: rotate(-30deg); } .ech-rotate-60:hover { transform: rotate(-60deg); } .ech-rotate-90:hover { transform: rotate(-90deg); } .ech-rotate-180:hover { transform: rotate(-180deg); } .ech-rotate5:hover { transform: rotate(5deg); } .ech-rotate15:hover { transform: rotate(15deg); } .ech-rotate30:hover { transform: rotate(30deg); } .ech-rotate60:hover { transform: rotate(60deg); } .ech-rotate90:hover { transform: rotate(90deg); } .ech-rotate180:hover { transform: rotate(180deg); } .ech-rotate360:hover { transform: rotate(360deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{
transition: all .4s;
}
.ech-grow-rotate-l:hover {
    transform: scale(1.1) rotate(4deg);
}
.ech-grow-rotate-r:hover {
    transform: scale(1.1) rotate(-4deg);
}
.ech-rotate-5:hover {
    transform: rotate(-5deg);
}
.ech-rotate-15:hover {
    transform: rotate(-15deg);
}
 
.ech-rotate-30:hover {
    transform: rotate(-30deg);
}
 
.ech-rotate-60:hover {
    transform: rotate(-60deg);
}
 
.ech-rotate-90:hover {
    transform: rotate(-90deg);
}
 
.ech-rotate-180:hover {
    transform: rotate(-180deg);
}
.ech-rotate5:hover {
    transform: rotate(5deg);
}
.ech-rotate15:hover {
    transform: rotate(15deg);
}
 
.ech-rotate30:hover {
    transform: rotate(30deg);
}
 
.ech-rotate60:hover {
    transform: rotate(60deg);
}
 
.ech-rotate90:hover {
    transform: rotate(90deg);
}
 
.ech-rotate180:hover {
    transform: rotate(180deg);
}
 
.ech-rotate360:hover {
    transform: rotate(360deg);
}

最后

本方法我个人最早见于 Css菜单悬停效果。如果你有更好的方法欢迎提出共同探讨。

更多精彩 CSS 技术文章汇总在我的 Github — iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

2-1-4位移变化

www.2003.com 11

html

JavaScript

<span class="ech-t">up</span> <span class="ech-b">bottom</span> <span class="ech-l">left</span> <span class="ech-r">right</span>

1
2
3
4
<span class="ech-t">up</span>
<span class="ech-b">bottom</span>
<span class="ech-l">left</span>
<span class="ech-r">right</span>

css

.ech-t,.ech-bottom,.ech-top,.ech-right{ transition: all .4s; } .ech-t:hover { transform: translate3d(0, -10px, 0); } .ech-b:hover { transform: translate3d(0, 10px, 0); } .ech-l:hover { transform: translate3d(-10px, 0, 0); } .ech-r:hover { transform: translate3d(10px, 0, 0); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ech-t,.ech-bottom,.ech-top,.ech-right{
    transition: all .4s;
}
.ech-t:hover {
    transform: translate3d(0, -10px, 0);
}
.ech-b:hover {
    transform: translate3d(0, 10px, 0);
}
.ech-l:hover {
    transform: translate3d(-10px, 0, 0);
}
.ech-r:hover {
    transform: translate3d(10px, 0, 0);
}

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

www.2003.com 12 www.2003.com 13

1 赞 3 收藏 1 评论

2-1-5边框变化

www.2003.com 14

html

JavaScript

<span class="ech-border">border</span> <span class="ech-border-in">border-in</span>

1
2
<span class="ech-border">border</span>
<span class="ech-border-in">border-in</span>

css

.ech-border,.ech-border-in{ transition: all .4s; } .ech-border:hover { box-shadow: 0 0 0 4px #09f, 0 0 1px transparent; } .ech-border-in:hover { box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent; }

1
2
3
4
5
6
7
8
9
10
.ech-border,.ech-border-in{
    transition: all .4s;
}
.ech-border:hover {
    box-shadow: 0 0 0 4px #09f, 0 0 1px transparent;
}
 
.ech-border-in:hover {
    box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent;
}

关于作者:chokcoco

www.2003.com 15

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

www.2003.com 16

2-1-6阴影变化

www.2003.com 17

(gif图看得效果太难看了,大家可以去github下载看)

html

JavaScript

<span class="ech-shadow">shadow</span> <span class="ech-shadow-in">shadow-in</span> <span class="ech-shadow-write">shadow-write</span> <span class="ech-shadow-big">shadow-big</span>

1
2
3
4
<span class="ech-shadow">shadow</span>
<span class="ech-shadow-in">shadow-in</span>
<span class="ech-shadow-write">shadow-write</span>
<span class="ech-shadow-big">shadow-big</span>

css

.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{ transition: all .4s; } .ech-shadow:hover { box-shadow: 0 0 10px #333; } .ech-shadow-in:hover { box-shadow: inset 0 0 10px #333; } .ech-shadow-write:hover { box-shadow: inset 0 0 20px #fff; } .ech-shadow-big:hover { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); transform: scale(1.1); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{
    transition: all .4s;
}
.ech-shadow:hover {
    box-shadow: 0 0 10px #333;
}  
.ech-shadow-in:hover {
    box-shadow: inset 0 0 10px #333;
}
.ech-shadow-write:hover {
    box-shadow: inset 0 0 20px #fff;
}
.ech-shadow-big:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

2-1-7透明度变化

www.2003.com 18

html

JavaScript

<span class="ech-fade-out">fade-out</span> <span class="ech-fade-in">fade-in</span>

1
2
<span class="ech-fade-out">fade-out</span>
<span class="ech-fade-in">fade-in</span>

css

.ech-fade-out,.ech-fade-in{ transition: all .4s; } .ech-fade-out:hover { opacity: .6; } .ech-fade-in { opacity: .5; } .ech-fade-in:hover { opacity: 1; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ech-fade-out,.ech-fade-in{
    transition: all .4s;
}
.ech-fade-out:hover {
    opacity: .6;
}
 
.ech-fade-in {
    opacity: .5;
}
 
.ech-fade-in:hover {
    opacity: 1;
}

2-1-8圆角变化

www.2003.com 19

html

JavaScript

<span class="ech-rectangle">rectangle</span> <span class="ech-radius">radius</span>

1
2
<span class="ech-rectangle">rectangle</span>
<span class="ech-radius">radius</span>

css

.ech-radius,.ech-rectangle{ transition: all .4s; } .ech-radius { border-radius: 10px; } .ech-radius:hover { border-radius: 0; } .ech-rectangle:hover { border-radius: 10px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ech-radius,.ech-rectangle{
    transition: all .4s;
}
.ech-radius {
    border-radius: 10px;
}
 
.ech-radius:hover {
    border-radius: 0;
}
 
.ech-rectangle:hover {
    border-radius: 10px;
}

2-2.颜色动画效果

这部分的动画主要是利用:before和:after进行实现的,所以,大家如果使用的时候,切记:before和:after没有被占用,否则会显示不正常

2-2-1.颜色块变化

www.2003.com 20

因为这块内容很像,我就一大块一起说,大家看代码的时候要留神注意。看代码看不明白,直接在github下载,然后运行文件,边调试边看效果!这样大家就很容易明白了!

html

JavaScript

<span class="ech-fade">fade</span> <span class="ech-fade-t">fade-t</span> <span class="ech-fade-b">fade-b</span> <span class="ech-fade-l">fade-l</span> <span class="ech-fade-r">fade-r</span> <span class="ech-bounce-t">bounce-t</span> <span class="ech-bounce-b">bounce-b</span> <span class="ech-bounce-l">bounce-l</span> <span class="ech-bounce-r">bounce-r</span> <span class="ech-fade-c-out">fade-c-out</span> <span class="ech-fade-c-in">fade-c-in</span> <span class="ech-fade-m-out">fade-m-out</span> <span class="ech-fade-m-in">fade-m-in</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
<span class="ech-fade">fade</span>
<span class="ech-fade-t">fade-t</span>
<span class="ech-fade-b">fade-b</span>
<span class="ech-fade-l">fade-l</span>
<span class="ech-fade-r">fade-r</span>
<span class="ech-bounce-t">bounce-t</span>
<span class="ech-bounce-b">bounce-b</span>
<span class="ech-bounce-l">bounce-l</span>
<span class="ech-bounce-r">bounce-r</span>
<span class="ech-fade-c-out">fade-c-out</span>
<span class="ech-fade-c-in">fade-c-in</span>
<span class="ech-fade-m-out">fade-m-out</span>
<span class="ech-fade-m-in">fade-m-in</span>

css

/*当前元素设置相对定位*/ .ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l { position: relative; transition: all .3s; z-index: 1; } /*当前元素的:before和:after设置绝对定位*/ .ech-fade:before, .ech-fade-t:before, .ech-fade-b:before, .ech-fade-l:before, .ech-fade-r:before, .ech-fade-c-in:before, .ech-fade-m-in:before, .ech-fade-m-out:before, .ech-fade-c-in:after, .ech-fade-m-in:after, .ech-fade-c-out:before { position: absolute; transition: all .3s; content: ""; display: block; background: #09f; z-index: -1; width: 100%; height: 100%; } /*弹跳元素:before和:after设置绝对定位和运动曲线*/ .ech-bounce-t:before, .ech-bounce-b:before, .ech-bounce-r:before, .ech-bounce-l:before { transition: all .3s; transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4); position: absolute; content: ""; display: block; background: #09f; z-index: -1; width: 100%; height: 100%; } /*背景颜色和文字变化*/ .ech-fade:before { top: 0; left: 0; transform: scaleX(1); opacity: 0; } .ech-fade:hover:before { opacity: 1; } /*颜色从左至右变化*/ .ech-fade-l:before, .ech-bounce-l:before { top: 0; right: 0; transform-origin: 0 50%; transform: scaleX(0); } /*颜色从右至左变化*/ .ech-fade-r:before, .ech-bounce-r:before { top: 0; left: 0; transform-origin: 100% 50%; transform: scaleX(0); } /*颜色从上往下变化*/ .ech-fade-t:before, .ech-bounce-t:before { bottom: 0; left: 0; transform-origin: 50% 0; transform: scaleY(0); } /*颜色从下往上变化*/ .ech-fade-b:before, .ech-bounce-b:before { top: 0; left: 0; transform-origin: 50% 100%; transform: scaleY(0); } /*颜色垂直居中出去*/ .ech-fade-m-out:before { top: 0; bottom: 0; left: 0; margin: auto; transform: scaleY(0); } /*www.2003.com,水平居中出去*/ .ech-fade-c-out:before { top: 0; right: 0; bottom: 0; left: 0; margin: auto; transform: scaleX(0); } .ech-fade-c-out:hover:before { transform: scaleX(1); } /*水平居中进来*/ .ech-fade-c-in:before { top: 0; left: 0; transform-origin: 0 50%; transform: scaleX(0); } .ech-fade-c-in:after { top: 0; right: 0; transform-origin: 100% 50%; transform: scaleX(0); } /*垂直居中进来*/ .ech-fade-m-in:before { top: 0; left: 0; transform-origin: 50% 0; transform: scaleY(0); } .ech-fade-m-in:after { bottom: 0; left: 0; transform-origin: 50% 100%; transform: scaleY(0); } /*当前元素文字颜色变化*/ .ech-fade:hover, .ech-fade-t:hover, .ech-fade-b:hover, .ech-fade-l:hover, .ech-fade-r:hover, .ech-fade-c-in:hover, .ech-fade-m-in:hover, .ech-fade-m-out:hover, .ech-fade-c-out:hover, .ech-bounce-t:hover, .ech-bounce-b:hover, .ech-bounce-r:hover, .ech-bounce-l:hover { color: #fff; } /*垂直方向进来的:before变化(一半)*/ .ech-fade-m-in:hover:before, .ech-fade-m-in:hover:after { transform: scaleY(.51); } /*垂直方向进来的:before变化*/ .ech-fade-t:hover:before, .ech-fade-b:hover:before, .ech-fade-m-out:hover:before, .ech-bounce-b:hover:before, .ech-bounce-t:hover:before { transform: scaleY(1); } /*水平方向进来的:before变化(一半)*/ .ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after { transform: scaleX(.51); } /*水平方向进来的:before变化*/ .ech-fade-l:hover:before, .ech-fade-r:hover:before,.ech-fade-c-out:hover:before, .ech-bounce-l:hover:before, .ech-bounce-r:hover:before { transform: scaleX(1); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/*当前元素设置相对定位*/
.ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l {
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*当前元素的:before和:after设置绝对定位*/
.ech-fade:before, .ech-fade-t:before, .ech-fade-b:before, .ech-fade-l:before, .ech-fade-r:before, .ech-fade-c-in:before, .ech-fade-m-in:before, .ech-fade-m-out:before, .ech-fade-c-in:after, .ech-fade-m-in:after, .ech-fade-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/*弹跳元素:before和:after设置绝对定位和运动曲线*/
.ech-bounce-t:before, .ech-bounce-b:before, .ech-bounce-r:before, .ech-bounce-l:before {
    transition: all .3s;
    transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
    position: absolute;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
 
/*背景颜色和文字变化*/
.ech-fade:before {
    top: 0;
    left: 0;
    transform: scaleX(1);
    opacity: 0;
}
 
.ech-fade:hover:before {
    opacity: 1;
}
 
/*颜色从左至右变化*/
.ech-fade-l:before, .ech-bounce-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
/*颜色从右至左变化*/
.ech-fade-r:before, .ech-bounce-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
 
/*颜色从上往下变化*/
.ech-fade-t:before, .ech-bounce-t:before {
    bottom: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
/*颜色从下往上变化*/
.ech-fade-b:before, .ech-bounce-b:before {
    top: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
 
/*颜色垂直居中出去*/
.ech-fade-m-out:before {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleY(0);
}
 
/*水平居中出去*/
.ech-fade-c-out:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleX(0);
}
 
.ech-fade-c-out:hover:before {
    transform: scaleX(1);
}
 
/*水平居中进来*/
.ech-fade-c-in:before {
    top: 0;
    left: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
 
.ech-fade-c-in:after {
    top: 0;
    right: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
 
/*垂直居中进来*/
.ech-fade-m-in:before {
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
 
.ech-fade-m-in:after {
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
/*当前元素文字颜色变化*/
.ech-fade:hover, .ech-fade-t:hover, .ech-fade-b:hover, .ech-fade-l:hover, .ech-fade-r:hover, .ech-fade-c-in:hover, .ech-fade-m-in:hover, .ech-fade-m-out:hover, .ech-fade-c-out:hover, .ech-bounce-t:hover, .ech-bounce-b:hover, .ech-bounce-r:hover, .ech-bounce-l:hover {
    color: #fff;
}
/*垂直方向进来的:before变化(一半)*/
.ech-fade-m-in:hover:before, .ech-fade-m-in:hover:after {
    transform: scaleY(.51);
}
/*垂直方向进来的:before变化*/
.ech-fade-t:hover:before, .ech-fade-b:hover:before, .ech-fade-m-out:hover:before, .ech-bounce-b:hover:before, .ech-bounce-t:hover:before {
    transform: scaleY(1);
}
/*水平方向进来的:before变化(一半)*/
.ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after {
    transform: scaleX(.51);
}
/*水平方向进来的:before变化*/
.ech-fade-l:hover:before, .ech-fade-r:hover:before,.ech-fade-c-out:hover:before, .ech-bounce-l:hover:before, .ech-bounce-r:hover:before {
    transform: scaleX(1);
}

本文由www.2003.com发布于计算机教程,转载请注明出处:妙用 scale 与 transfrom-origin,精准控制动画方向

关键词: