xml地图|网站地图|网站标签 [设为首页] [加入收藏]
精准控制动画方向,个有意思的
分类:web前端

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

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

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

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

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

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

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

图片 1

我脑中飘来飘去的 CSS 魔幻属性

2017/12/27 · CSS · 属性

原文出处: Denzel   

最近看到一篇20 个CSS高级技巧汇总的汇总,感触很深,不过我想,与技巧相比,有些常见css布局难题,有时候更加让我们的日常开发变得踌躇沮丧吧。
在写这一篇文章之前,自己还写过一篇:我所不注意的那些CSS冷知识,但却阻止了我做项目的速度,如果你看了,我相信你也会受益的。

2018 年 3 月 15 个有意思的 JavaScript 和 CSS 库

2018/04/03 · CSS, JavaScript · 库

原文出处: Georgi Georgiev   译文出处:oschina   

图片 2

Tutorialzine 旨在让你了解最新最酷的 Web 发展趋势。这就是我们每个月为何都会发布一些我们偶然发现并认为值得你关注的优秀资源的原因。图片 3

 

难点所在

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

图片 4

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

 

为什么此处li标签内的p元素看起来独自撑开了一行

这是我在segmentfault上看到的一个问题,以前自己遇到过,所以就很热情洋溢的去回答了一下,难道遇到个自己会的,示例代码是这样的:
CSS:

JavaScript

li{ display: inline-block; text-align: center; } .left,.center,.right{ width:300px; height:300px; } .left{ background-color: #999; } .center{ background-color: #ccc; } .right{ background-color: #eee; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
li{
    display: inline-block;
    text-align: center;
}
.left,.center,.right{
    width:300px;
    height:300px;
}
.left{
    background-color: #999;
}
.center{
    background-color: #ccc;
}
.right{
    background-color: #eee;
}

HTML:

JavaScript

<ul> <li class="left"> <p style="display: inline-block;">1</p> </li> <li class="center"></li> <li class="right"></li> </ul>

1
2
3
4
5
6
7
<ul>
    <li class="left">
        <p style="display: inline-block;">1</p>  
    </li>
    <li class="center"></li>
    <li class="right"></li>
</ul>

图片 5
大概就是这样子,其实文和图有点不对应,代码中第一个模块他只写了一个“1”,我为了现象更加明显,且好说明为什么,就打了一大段文字,现在我们来说说为什么。先来一张图,看懂vertical-align的几个属性,顺便带上图片出处,文章讲得还可以,理解这张图片,后面就好理解了。

图片 6

inline-block的vertical-align 属性默认是baseline对齐(深入理解的送福利),也就是英文文字小写字母a,b,c这类字母底部的那条线,因为这些是外国人发明的,所以以英文字母才有针对性。inline-block拥有vertical-align属性,其默认是基线对齐的,所以这三个inline-box需要基线对齐,而其基准线就是正常流中最后一个line box的基线,如果这个元素是空的,没有内容,那么这个基线就是最后这个元素的margin-bottom线;如果这个元素不为空,那么这个元素的基线就是元素里面内容最后一行文字的基线;所以我们一个一个来套,发现这三个li元素在一行,第一个有文字,其基线为文字底部;最后一个没有文字,其基线为margin-bottom线,考试要考,划重点,可以自己为元素设置margin-bottom试试,这就会造成第一个和二,三个错行的感觉,其实他两是为了基线对齐,所以多敲几十个文字就能明显看出其差别。所以最简单的解决方案就是为li添加vertical-align: 属性不为baseline,气不气,改变其纵向的对齐方式的默认属性;为啥非弄个折腾人勒。关于vertical-align,如果还想做这方面的深入了解,可以看看张大侠的分析

BasicScroll

该库使你可以在你的设计中添加 parallax 滚动动画效果。你可以直接在你的 CSS 中使用变量和属性,或者使用 JS 来获得更好的动画效果。它运行非常流畅,独立于框架,在桌面和移动设备上非常出色,并且支持触屏输入。图片 7

 

还原效果

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

图片 8

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 (三个步骤,三种状态)

 

img图片撑不满整个div,有空隙

直接上图更直观(箭头所指):
图片 9
相关css和html:

JavaScript

<style> body,div{margin: 0;padding: 0;} .test{ background-color: yellowgreen; } img{ width:260px; height:260px; } </style> <body> <div class="test"> <img width="130" height="130" src="; </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    body,div{margin: 0;padding: 0;}
    .test{
        background-color: yellowgreen;
    }
    img{
        width:260px;
        height:260px;
    }
</style>
<body>
<div class="test">
    <img width="130" height="130" src="https://user-gold-cdn.xitu.io/2017/12/10/160409cc0f090c6f">
</div>
</body>

其实这个问题,如果你单单这样看,和我一样涉世未深的话,是一眼看不出答案的,但是如果你在图片后面多敲两个文字,你就会发现,和上个问题,这又是一个有关于vertical-align属性相关的问题。

JavaScript

<div class="test"> <img width="130" height="130" src="; </div>

1
2
3
<div class="test">
    <img width="130" height="130" src="https://user-gold-cdn.xitu.io/2017/12/10/160409cc0f090c6f"><span>abcd看文字</span>
</div>

让人恍然大悟的效果图:
图片 10
这下你应该就懂了,下面的空隙的距离实际上等与1个line-height的底边与baseline之间的间距。仔细观察,图片的底边是和a的下边缘是在一条水平线上的,而不是和‘看’字下边缘一条水平线上的。所以为什么上面说这又是一个和vertical-align属性相关的问题。先说解决方案
针对于父元素div:

  • 设置行高足够小,比如.test{line-height:0},至于这么小吗,其实高度小于top线和baseline线之间的距离的距离就行了,至于到底多小,这和font-size是相关的,其目的就是没有多余的高度拿来给baseline下面的空间用(个人理解);
  • 上面说了设置line-height最小和font-size相关,所以,还有的方法,就是直接设置字体大小为0,.test{font-size:0;},道理你应该懂;

针对于图片div:

  • 上面说了这是一个和vertical-align属性相关的问题,所以设置vertical-align属性不为baseline也可以解决,比如img{vertical-align:top;},当然也可以是数字,比如img{vertical-align:-10px;},这个数值绝对不是正值,其数值应该是大于bottom线和line-height的底边距离的;
  • 最后一种,就是vertical-align是一个对块状元素无效的属性,仅针对于内联元素有效的,当然inline-block也有效.所以img{display:block;}也可以解决问题。

也许到这里,你和我一样,有疑惑,为什么vertical-align是一个对块状元素无效的属性,设置img为块级元素,其和div就可以完美在一起,而一个内联元素放在块状元素里,就非得有隔阂。开始,我也是有这个疑问的,个人理解就是块状元素里面装了一个内联元素,如果块状没有显示的设置高度,其高度是由里面的最高的lineboxes组成的,这个div其实就是有两个lineboxes组成,图片linebox和,其实还有一个linebox就是div自身的innerText(”),这不过这里内容为空,如果你把span去掉,你就更能理解这个隐身的linebox,所以就像是两个内联元素在一起,需要baseline对齐。所以网上有人说设置img{font-size:0;},是非常错误的,img元素很特殊,他不但是内联元素,他还是一个置换元素(下面会讲),它的高度不是文字内容撑开的,是其置换的图片高度撑开的,所以设置font-size是无效的。

Proton Native

Proton native 允许你为所有平台创建原生桌面应用程序。它具有与 React Native 相同的语法,支持 Redux 等现有的 React 库,并与大多数 Node.js 包兼容。它适用于原生组件,并不再需要 electron 。图片 11

 

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

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

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

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

 

浮动不按想要的方式浮

图片 12
像上图那样的形式,盒子由导航栏和右侧一个搜索框或者登录名什么的一起组成,这也是我们常用浮动的方式来解决这样的布局。
说浮动前,先说三点概念:
1.浮动最初出现的意义是为了解决文字环绕图片这种在杂志报纸中常会出现的布局样式; (看下图)
2.浮动与绝对定位能实现相同的效果,但的区别是,浮动未脱离正常文档流,但绝对定位脱离了正常文档流;
3.浮动能带来灵活的布局,但同时也带来了父元素高度塌陷的缺点(看下图),所以清除浮动是使用浮动前的必修课,后面会说到;
图片 13
图片 14
现在看一下高度塌陷相关的代码:

JavaScript

<div class="test"> <img width="130" height="130" src="; 1.浮动最初出现的意义是为了解决文字环绕图片这种在杂志报纸中常会出现的布局样式;<br> 2.浮动与绝对定位能实现相同的效果,但的区别是,浮动未脱离正常文档流,但绝对定位脱离了正常文档流;<br> 3.浮动能带来灵活的布局,但同时也带来了父元素高度塌陷的缺点,所以清除浮动是使用浮动前的必修课,后面会说到;<br> <br> </div> <div class="blank"></div> <div> <div class="box"> <span class="dot"></span> 我是下面一个div的文字。 </div> <div class="blank"></div> <div class="box"> <span class="dot"></span> 我是再下面一个div的文字。。 </div> <input width="260" value="输入一段文字"/> </div> .test { background-color: yellowgreen; font-size: 18px; vertical-align: top; } .test span { background-color: bisque; } .blank { line-height: 20px; height: 20px; } img { width: 260px; height: 260px; float: left; } input { border: 1px solid red; height: 24px; margin-left: 30px; } .box { background: black; color: white; padding-left: 20px; line-height: 10px; } .box .dot { display: inline-block; width: 4px; height: 4px; background: white; vertical-align: bottom; }

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
    <div class="test">
    <img width="130" height="130" src="https://user-gold-cdn.xitu.io/2017/12/10/160409cc0f090c6f">
    1.浮动最初出现的意义是为了解决文字环绕图片这种在杂志报纸中常会出现的布局样式;<br>
    2.浮动与绝对定位能实现相同的效果,但的区别是,浮动未脱离正常文档流,但绝对定位脱离了正常文档流;<br>
    3.浮动能带来灵活的布局,但同时也带来了父元素高度塌陷的缺点,所以清除浮动是使用浮动前的必修课,后面会说到;<br>
    <br>
    </div>
    <div class="blank"></div>
    <div>
    <div class="box">
        <span class="dot"></span>
        我是下面一个div的文字。
    </div>
        <div class="blank"></div>
    <div class="box">
        <span class="dot"></span>
        我是再下面一个div的文字。。
    </div>
        <input  width="260" value="输入一段文字"/>
    </div>
      
    .test {
    background-color: yellowgreen;
    font-size: 18px;
    vertical-align: top;
    }
    .test span {
        background-color: bisque;
    }
    .blank {
        line-height: 20px;
        height: 20px;
    }
    img {
        width: 260px;
        height: 260px;
        float: left;
    }
    input {
        border: 1px solid red;
        height: 24px;
        margin-left: 30px;
    }
    .box {
        background: black;
        color: white;
        padding-left: 20px;
        line-height: 10px;
    }
    .box .dot {
        display: inline-block;
        width: 4px;
        height: 4px;
        background: white;
        vertical-align: bottom;
    }

图片一中,实现了文字环绕图片那种想要的效果,并且后面的元素没有上移错位,其原因是上面说过的,如果块状元素没有显示的设置高度,其高度由其元素内的最高的linebox决定,所以第一张图片div的高度是比img高度高的,因为我重要的事情说了三遍,文字够多。而第二张图片,div高度只有144px,因为img是浮动的,他的linebox被浮动属性破坏了,而文字又不够多,所以就造成了所谓的高度塌陷,致使最后两个div陷进了图片所在的div中,要知道,这种情况在正常块状元素布局中是根本不会出现的。至于解决浮动引起的高度塌陷,我总结了两条,分别是:

  1. 使用clear:both,常见的什么clearfix;
  2. 触发浮动元素父元素的BFC(块状格式上下文,为解决盒子与盒子之间,内容不相符影响而生的概念);

清除浮动,相信大家都懂,而触发bfc。

我说说我常用的几条,网上讲bfc的很多:

  • float属性不为none的元素
  • position(absolute,fixed)
  • display (table-cell,inline-block,flex等)
  • overflow属性不为visible

除了上面讲的这些,我还遇到过有人问,为什么我用了浮动,但元素没有浮在这一行,却换了行,像下图这样
图片 15

JavaScript

<div> <div class="gr">我是导航栏的一些文字</div> <div class="fr">我想浮在右边</div> </div> .gr{ background-color: yellowgreen; margin:5px; } .fr{ float:right; background-color: green; }

1
2
3
4
5
6
7
8
9
10
11
12
   <div>
    <div class="gr">我是导航栏的一些文字</div>
    <div class="fr">我想浮在右边</div>
   </div>
   .gr{
      background-color: yellowgreen;
      margin:5px;
    }
    .fr{
      float:right;
      background-color: green;
    }

上面这种没按想要的方式浮,是因为块状元素会不敢其内容长度有没有一行的长度,其都会占据一行的长度,后面的元素会自动换行。解决这个其最简单的方式就是将fr元素放在gr元素前,为什么这样就可以,因为float破坏了div元素的块状属性,但其未撑开父元素的高度,其浮动属性为right,默认从右侧开始布局,所以后面的div仍按正常的文档流从最左端开始布局。

Normalize.css

Normalize.css 是一个全新的浏览器样式重置库。它使得 HTML 元素样式在不同的浏览器上保持统一,同时也极大程度地减少了不同浏览器之间的冲突,提供了更高的可用性。图片 16

 

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

图片 17

DEMO2

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

 

有一种行内元素,又叫置换元素

如果你看上面一题代码的时足够细心,你会发现我给img设置了width和height两个属性值为130,但由于又在css属性里定义了宽高260,但最终表现出的宽高为260。如果css不定义宽高呢?答案是多少,要不你试试,你慢慢试,我还是先公布答案:130.这里我们将会说一个css中的一个鲜为人知的术语:置换元素,那什么又是置换元素呢?

置换元素是指:浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如:浏览器根据<img>标签的src属性显示图片。input元素根据标签的type属性决定显示输入框还是按钮。还有,还有近来很火的canvas。

置换元素有如下共同点:

  1. 置换元素一般内置宽高属性,因此可以设置其宽高;
  2. 置换元素与一般的行内元素相比,其可以设置margin,padding,height,width等css属性;

感觉要写的还有很多,事件根本不够用,先睡了,未完待续
如果文中有任何不足和错误之处,还请及时指正。

2 赞 3 收藏 评论

图片 18

Fork Awesome

这是一个拥有超过 600 个可缩放的矢量图形的图标库。这些图标非常易于自定义,比如更换颜色、大小、阴影等,同时兼容所有框架。这个库非常容易上手,不需要用户拥有 Javascript 语言知识,最重要的是它们在 Retina 屏幕中的显示效果令人惊艳。图片 19

 

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 ,让动画的进入与离开产生了两种不同的效果,两个不同的方向。

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

图片 20

DEMO3

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

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

 

Filepond

Filepond 是一个用于上传文件的小型 Javascript 库。它提供了许多不同的上传方式:你可以使用拖拽、拷贝粘贴,浏览本地文件系统的方式,甚至只是使用它提供的 API 方式来上传文件。这个库内置了图形优化和图形自动缩放功能,Gzip 压缩后只有 21 KB。图片 21

 

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:精准控制动画方向,个有意思的

上一篇:你需要知道的一切,如何使用 下一篇:没有了
猜你喜欢
热门排行
精彩图文