您的位置:乐百家在线 > 乐百家官方网站 > 个风趣的,层叠顺序与仓库上下文知多少

个风趣的,层叠顺序与仓库上下文知多少

2020-01-01 04:37

讨论网页设计中的字体接纳(1卡塔尔(قطر‎:Font Set

2015/03/30 · CSS, HTML5 · 字体

初藳出处: 棕熊的博客   

Hihi, 大家好~

前段时间有广大人都谈到了网页上该怎么接受字体的题目。难题纵然小,可是却是前端开拓中的基本,因为这段时间的网页,依旧以文字音讯为主,而字体,作为文字表现情势的最器重参数之黄金年代,自然有着特别关键的地位。可惜字体的严重性在非常长日子内并未到手丰裕的爱抚。很三个人对字体的概念照旧停留在 font-family: “金鼎文”, Arial, Helvetica, serif 的等第,却不明白为什么这么设置,那样设置是或不是站得住等等。今后就让作者说说字体的源流吧。

4.接通案例-手风琴

图片 1

关于作者:chokcoco

图片 2

经不住光阴似箭,逃可是此间少年。 个人主页 · 小编的篇章 · 63 ·    

图片 3

3. Element

图片 4

Element 是风度翩翩款基于 Vue.js 2.0 的 UI 组件库。它饱含了 50+ 的构件,并依据风流洒脱致性的宏图基准,即分界面中的设计样式、颜色搭配保持生龙活虎致。同不常候,各个成分都轻巧定制,并可在其余的 Vue.js 项目中央银行使。那还会有三个用来创设实体模型的实用的Sketch Template组件,你也能够看看。

类型地址:【传送门】

风趣的CSS标题(13):奇妙地构建背景象渐变动漫!

2017/03/24 · CSS · CSS, 动画

正文小编: 伯乐在线 - chokcoco 。未经我许可,禁绝转载!
接待参预伯乐在线 专栏审核人。

局地时候,嗯,应该说一些特定场所,我们大概需求上面那样的卡通效果,渐变 + animation :

图片 5

假设大家渐变的写法如下:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); }

1
2
3
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
}

坚决守护正规主见,合营 animation ,大家率先会想到在 animation 的步骤中通过退换颜色实现颜色渐变动漫,那么大家的 CSS 代码只怕是:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); animation: gradientChange 2s infinite; } @keyframes gradientChange { 100% { background: linear-gradient(90deg, #e91e1e 0%, #6f27b0 100%); } }

1
2
3
4
5
6
7
8
9
10
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
    animation: gradientChange 2s infinite;
}
 
@keyframes gradientChange  {
    100% {
        background: linear-gradient(90deg,  #e91e1e 0%, #6f27b0 100%);
    }
}

上面大家用到了两种颜色:

  • #ffc700 黄色
  • #e91e1e 红色
  • #6f27b0 紫色

最终,并不曾大家预料的结果,而是那样的:

图片 6

See the Pen 线性渐变动漫 by Chokcoco (@Chokcoco) on CodePen.

大家预料的补间动漫,产生了逐帧动漫。 图片 7

也便是说,线性渐变是不扶植动漫 animation 的,这只是的由三个颜料,变化到其余二个颜色吗?像下边那样:

个风趣的,层叠顺序与仓库上下文知多少。div { background: #ffc700; animation: gradientChange 3s infinite alternate; } @keyframes gradientChange { 100% { background: #e91e1e; } }

1
2
3
4
5
6
7
8
9
10
div {
    background: #ffc700;
    animation: gradientChange 3s infinite alternate;
}
 
@keyframes gradientChange  {
    100% {
        background: #e91e1e;
    }
}

开采,单纯的单色值是能够发生渐变的:

See the Pen 单色值渐变动漫 by Chokcoco (@Chokcoco) on CodePen.

– font-family

世家明白CSS准则中定义字体是通过 font-family 那条准绳来落到实处的。稳重翻翻CSS的文书档案,却从未发掘别的能内定某二个特定字体的平整。

心想十年前,你可以到处见到肖似于那般的代码:

JavaScript

<font face="Frankin Gothic Book">Lorem Ipsum</font>

1
&lt;font face=&quot;Frankin Gothic Book&quot;&gt;Lorem Ipsum&lt;/font&gt;

差那么一点不会有人考虑到,Frankin Gothic Book是叁个 Windows only 的书体。在风流倜傥台Mac上向来看不到Frankin Gothic Book字体的职能,系统因为找不到这种字体,就改用Mac的私下认可字体显示了。于是,网页的品格就和原本完全不平等了,根本达不到Frankin Gothic Book的功力。于是W3C提议了font set 的定义——将一五颜六色相像的字体依据优先级依次组成三个列表;浏览器从列表尾部起头相配,知道找到第三个可用的字体,并采纳该字体举办展现。

诸如下边这些例子,大家能够创制那样的一个font set:

JavaScript

<span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsum</span>

1
&lt;span style=&#039;font-family: &quot;Franklin Gothic Book&quot;,&quot;Lucida Grande&quot;&#039;&gt;Lorem Ipsum&lt;/span&gt;

大家来会见浏览器怎么来显现这段文字吗:

  • Windows下:浏览器从列表的第一个字体开始寻觅——系统中存在Frankin Gothic Book,使用弗兰kin Gothic Book字体呈现。
  • Mac 下:浏览器从列表的第叁个字体起头查究——系统中官样文章Frankin Gothic Book,找寻退步。继续寻觅下一个字体——Lucida Grande。系统中留存Lucida Grande字体,终止搜索,并用Lucida Grande字体显示。

那样在Mac上,Mac就会以与Frankin Gothic Book相似的Lucida Grande字体呈现这段文字。

不过大概存在少年老成台计算机,下面既未有Frankin Gothic Book字体,也从不Lucida Grande字体,那么它依然爱莫能助正确显示下边包车型客车这段文字。于是开辟职员不能不在这里个字体列表中不独有加多字体以适应各类系统,导致那几个font set失去原先的“组织相像字体”的功能。于是font set中引进了“通用字体族”,也正是我们平常见到的 serif 和 sans-serif。小编会在今后的小说中详细的介绍那七个,乃至一些此外的通用字体族。在这里边,大家能够归纳的将它们知道为生机勃勃种“在有着钦赐字体都失效的场合下,浏览器钦赐的意气风发种最后的代用字体”。

举例说我们在改善一下地点的这段示例文字:

JavaScript

<span style='font-family: "Franklin Gothic Book","Lucida Grande",sans-serif'>Lorem Ipsum</span>

1
&lt;span style=&#039;font-family: &quot;Franklin Gothic Book&quot;,&quot;Lucida Grande&quot;,sans-serif&#039;&gt;Lorem Ipsum&lt;/span&gt;

作者们再看看浏览器怎么来展现这段改进后的文字吗:

  • Windows下:浏览器从列表的首先个字体早先寻觅——系统中留存Frankin Gothic Book,使用Frankin Gothic Book字体呈现。
  • Mac 下:浏览器从列表的首先个字体初步搜索——系统中不设有Frankin Gothic Book,找寻战败。继续查找下三个字体——Lucida Grande。系统中存在Lucida Grande字体,终止寻找,并用Lucida Grande字体呈现。
  • 某系统:浏览器从列表的率先个字体初叶探究——系统中不设有Frankin Gothic Book,寻找失利。继续查找下一个字体——系统中也荒诞不经Lucida Grande字体。继续搜寻下一个字体——通用字体sans-serif。浏览器接受它的暗中同意sans-serif字体”Arial”来展现这段文字。

请介怀两点。首先,通用字体族具体对应哪个字体,是由浏览器决定的。上面例子中浏览器钦命Arial为sans-serif字体,但一心有望另二个浏览器内定Helvetica 为它的sans-serif字体。具体哪个字体被最后利用,是回天无力预想的。其次,通用字体族只是生龙活虎种在font set中任何字体都对事情未有什么益处时的代用方案。因而——设计者应该尽量的交付齐全的font set,以尽量的隐瞒全部的种类,而不该依附于通用字体族

就好像于以下的二种写法都是不当的:

JavaScript

<span style="font-family:sans-serif">Lorem Ipsum</span> <span style="font-family:sans-serif,Arial">Lorem Ipsum</span>

1
2
&lt;span style=&quot;font-family:sans-serif&quot;&gt;Lorem Ipsum&lt;/span&gt;
&lt;span style=&quot;font-family:sans-serif,Arial&quot;&gt;Lorem Ipsum&lt;/span&gt;

率先种写法的失实在于——它一定于根本未有一点名字体,依然是交由浏览器选取字体。写了一定于没写。

第三种写法的不当在于顺序。因为通用字体族应该在八个font set中任何具备字体都失效时才起效果。因而,将钦点字体放在通用字体之后,会以致制定字体尚未相配时就接纳了通用字体。所以,你应有必得使通用字体处在font set中的最终壹个人。

别的,这里要验证两件业务。

率先,浏览器选择font set中哪些字体的规规矩矩纵然看上去很简单,但事实上特别trickish。作者会在之后的篇章中做出切实的证实。

附带,纵然字体的CSS法规名字为font-family, 但它的面目是二个font set,而分化是印制意义上的font family。印制上的font family 是指意气风发层层同样字样的不等强度组合,举例Lucida Family(包罗Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande等等)和Arial Family(Arial, Arial Black, Arial Rounded MT等等),但鲜明这一个font family 都不合乎直接拿来作为一个font set来利用。

前些天就到此地了哟。下一次我们来精心探讨通用字体族。

1 赞 1 收藏 评论

图片 8

4-3与JS达成比较

1.这几个动漫,小编认为固然质量上css3是比js要好有的。究竟js也是决定css恐怕class来完毕!
2.灵活性的话,那么些就要比js差了,比如div的显得与隐讳,作者不想透过鼠标移入移出的秘技调控,要是小编想通过点击的措施决定div的展现与隐敝呢。对于js的艺术来讲,那几个正是触发的事件就可以了,对于插件来说,恐怕就改四个插件就能够了!对于css3落到实处的话,那些就不但要改css样式了,也要改html布局了!
此处,作者的建议就是,这一个动漫最精良的还是用js和css3结果,结果是最佳的。假诺针对灵活性不高的要求,能够只用css3。

3、层叠顺序(stacking level)与仓库上下文(stacking context)知多少?

z-index 看上去其实比非常的粗略,依据 z-index 的轻重决定层叠的优先级,实则浓厚进去,会发觉内有乾坤。

会见下边那题,定义四个 div A 和 B,被回顾在同三个父 div 标签下。HTML结构如下:

XHTML

<div class="container"> <div class="inline-block">#divA display:inline-block</div> <div class="float"> #divB float:left</div> </div>

1
2
3
4
<div class="container">
    <div class="inline-block">#divA display:inline-block</div>
    <div class="float"> #divB float:left</div>
</div>

它们的 CSS 定义如下:

CSS

.container{ position:relative; background:#ddd; } .container > div{ width:200px; height:200px; } .float{ float:left; background-color:deeppink; } .inline-block{ display:inline-block; background-color:yellowgreen; margin-left:-100px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

大概陈说起来,意思正是独具一头父容器的四个 DIV 重叠在同盟,是 display:inline-block 叠在上头,如故float:left 叠在上面?

只顾这里 DOM 的逐一,是文士成 display:inline-block ,再生成 float:left 。当然也足以把五个的 DOM 顺序调转如下:

XHTML

<div class="container"> <div class="float"> #divB float:left</div> <div class="inline-block">#divA display:inline-block</div> </div>

1
2
3
4
<div class="container">
    <div class="float"> #divB float:left</div>
    <div class="inline-block">#divA display:inline-block</div>
</div>

会意识,无论顺序如何,始终是 display:inline-block 的 div 叠在上边。

Demo戳我。

 

此间其实是事关了所谓的层叠水平(stacking level卡塔尔(قطر‎,有一张图能够很好的注释:

图片 9

选拔上海教室的逻辑,上边的主题素材就解决,inline-blcok 的 stacking level 比之 float 要高,所以随便DOM 的前后相继顺序都堆成堆在上头。

而是上边图示的说法有部分不精确,依照 W3官方 的说法,准确的 7 层为:

  1. #### the background and borders of the element forming the stacking context.

  2. #### the child stacking contexts with negative stack levels (most negative first).

  3. #### the in-flow, non-inline-level, non-positioned descendants.

  4. #### the non-positioned floats.

  5. #### the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  6. #### the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

  7. #### the child stacking contexts with positive stack levels (least positive first).

微微翻译一下:

  1. #### 形成聚成堆上下文景况的因素的背景与边框

  2. #### 拥有负 z-index 的子聚积上下文元素 (负的越高越积聚层级越低)

  3. #### 常常流式布局,非 inline-block,无 position 定位(static除此之外)的子成分

  4. #### 无 position 定位(static除此而外)的 float 浮动成分

  5. #### 平常流式布局, inline-block元素,无 position 定位(static除此之外)的子成分(富含 display:table 和 display:inline )

  6. #### 拥有 z-index:0 的子堆成堆上下文成分

  7. #### 拥有正 z-index: 的子堆放上下文元素(正的越低越堆放层级越低)

由此大家的八个 div 的可比是基于下面所列出来的 4 和 5 。5 的 stacking level 越来越高,所以叠得更加高。

不过!但是!但是!入眼来了,请在乎,上边的相比是凭借四个 div 都未曾产生 堆叠上下文 这几个为功底的。上面大家改过一下标题,给三个 div ,扩张二个 opacity:

CSS

.container{ position:relative; background:#ddd; } .container > div{ width:200px; height:200px; opacity:0.9; // 注意这里,增添壹个 opacity } .float{ float:left; background-color:deeppink; } .inline-block{ display:inline-block; background-color:yellowgreen; margin-left:-100px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
    opacity:0.9; // 注意这里,增加一个 opacity
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

Demo戳我。

See the Pen stackingContext by Chokcoco (@Chokcoco) on CodePen.

会看到,inline-block 的 div 不再一定叠在 float 的 div 之上,而是和 HTML 代码中 DOM 的聚积顺序有关,后增加的 div 会 叠在先增多的 div 之上。

此处的关键点在于,增多的 opacity:0.9 那些让七个 div 都生成了 stacking context(堆叠上下文) 的定义。那个时候,要对相互举办层叠排列,就需要z-index ,z-index 越高的层叠层级越高。

聚积上下文是HTML成分的三个维度概念,那个HTML成分在一条假想的周旋于面向(计算机显示屏的)视窗恐怕网页的客商的 z 轴上延伸,HTML 成分依附其本身性质依照事情发生前级依次占用层叠上下文的空中。

那么,怎样触发一个要素产生 堆叠上下文 ?方法如下,摘自 MDN:

  • 根元素 (HTML),
  • z-index 值不为 “auto”的 相对/相对牢固,
  • 一个 z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
  • opacity 属性值小于 1 的要素(参谋 the specification for opacity),
  • transform 属性值不为 “none”的要素,
  • mix-blend-mode 属性值不为 “normal”的因素,
  • filter值不为“none”的元素,
  • perspective值不为“none”的元素,
  • isolation 属性被设置为 “isolate”的因素,
  • position: fixed
  • 在 will-change 中钦定了任意 CSS 属性,即让你未有间接内定那个属性的值
  • -webkit-overflow-scrolling 属性被安装 “touch”的要素

之所以,上边大家给多少个 div 增多 opacity 属性的目标正是为着产生 stacking context。也便是说增加 opacity 替换成上面列出来这个属性都以能够直达同等的据守。

在层叠上下文中,其子成分相仿也根据地点表明的平整进行层叠。 非常值得风流倜傥提的是,其子成分的 z-index 值只在父级层叠上下文中有意义。意思正是父成分的 z-index 低于父成分另叁个同级元素,子成分 z-index再高也没用。

接头地方的 stacking-level 与 stacking-context 是领会 CSS 的层叠顺序的显要。

装不平日汇总在自家的 Github ,发到博客希望赢得越来越多的交换。

到此本文停止,要是还应该有啥疑点依旧提议,能够多多调换,原创小说,文笔有限,德薄能鲜,文中若有不正之处,万望告知。

打赏援救本人写出越来越多好文章,多谢!

打赏我

1. Core UI

图片 10

Core UI 是一个基于 Bootstrap 4 的处理模板,它提供了创办调控面板的冲天自定义解决方案。同期,为了让您快捷的将它与部分流行的框架整合使用(AngularJS,Angular 2,React.js 和 Vue.js.),它还提供了一些独门的楷模版本。

花色地址:【传送门】

因此 background-position 模拟渐变动漫

上面何以 CSS 属性能够动漫的截图中,列出了与 background 相关还会有 background-position ,也就是 background-position 是帮助动漫的,通过转移 background-position 的措施,能够达成渐变动漫:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%); background-size: 200% 100%; background-position: 0 0; animation: bgposition 2s infinite linear alternate; } @keyframes bgposition { 0% { background-position: 0 0; } 100% { background-position: 100% 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: bgposition 2s infinite linear alternate;
}
 
@keyframes bgposition {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

此间我们还合作了 background-size。首先了然下:

background-position:内定图片的开端地方。这么些初阶地点是绝对于以 background-origin 定义的背景地方图层来讲的。> background-size:设置背景图片大小。当取值为百分比时,表示钦点背景图片相对背景区的比重大小。当设置七个参数时,第多个值钦命图片的肥瘦,第一个值钦赐图片的万丈。

通过 background-size: 200% 100% 将图纸的上升的幅度设置为两倍背景区的增进率,再通过改换 background-position 的 x 轴领头地方来运动图片,由于背景图设置的分寸是背景区的两倍,所以 background-position的移动是由 0 0 -> 100% 0 。最后效果如下:

See the Pen background-position 实现渐变动漫 by Chokcoco (@Chokcoco) on CodePen.

3-2兑现进度

1.首先页面包车型地铁布局,这么些相应大家都明白,菜单无非正是二个ul-li列表,下拉列表就是li上面包车型地铁一个ul-li。

reset.css(样式重新设置表和私家常用样式封装)

JavaScript

*{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:#000;text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize16,h4{font-size:16px}.fontsize14,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllil li{float:left}.fllir li{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0;right:0;margin:auto}.positionCenterTop{top:0;bottom:0;margin:auto}.positionCenter{top:0;bottom:0;left:0;right:0;margin:auto}.distable{display:table}.distablecell{display:table-cell;vertical-align:middle}.textels{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.marginCenter{margin:0 auto}.t_l{text-align:left}.t_c{text-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position:fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both;overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lblock{display:inline-block}.clear{clear:both}.pointer{cursor:pointer}img{border:0;vertical-align:middle}

1
*{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:#000;text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize16,h4{font-size:16px}.fontsize14,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllil li{float:left}.fllir li{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0;right:0;margin:auto}.positionCenterTop{top:0;bottom:0;margin:auto}.positionCenter{top:0;bottom:0;left:0;right:0;margin:auto}.distable{display:table}.distablecell{display:table-cell;vertical-align:middle}.textels{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.marginCenter{margin:0 auto}.t_l{text-align:left}.t_c{text-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position:fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both;overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lblock{display:inline-block}.clear{clear:both}.pointer{cursor:pointer}img{border:0;vertical-align:middle}

html代码如下

JavaScript

<div class="demo-nav"> <!--.fllil,.clear是在样式重新恢复生机设置表(reset.css)上写好的样式,.fllil li{fload:left;}.clear{clear:both;}--> <ul class="menu fllil"> <li>HTML5 <ul class="sub-menu"> <li>article</li> <li>section</li> <li>menu</li> <li>nav</li> </ul> </li> <li>CSS3 <ul class="sub-menu"> <li>动漫</li> <li>过渡</li> <li>圆形</li> <li>边框</li> </ul> </li> <li>Javascript <ul class="sub-menu"> <li>字符串</li> <li>数组</li> <li>对象</li> <li>布尔</li> </ul> </li> <li>Jquery <ul class="sub-menu"> <li>动漫</li> <li>特效</li> <li>AJAX</li> </ul> </li> <li>VUE</li> </ul> <div class="clear"></div> </div>

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
<div class="demo-nav">
    <!--.fllil,.clear是在样式重置表(reset.css)上写好的样式,.fllil li{fload:left;}.clear{clear:both;}-->
    <ul class="menu fllil">
        <li>HTML5
            <ul class="sub-menu">
                <li>article</li>
                <li>section</li>
                <li>menu</li>
                <li>nav</li>
            </ul>
        </li>
        <li>CSS3
            <ul class="sub-menu">
                <li>动画</li>
                <li>过渡</li>
                <li>圆形</li>
                <li>边框</li>
            </ul>
        </li>
        <li>Javascript
            <ul class="sub-menu">
                <li>字符串</li>
                <li>数组</li>
                <li>对象</li>
                <li>布尔</li>
            </ul>
        </li>
        <li>Jquery
            <ul class="sub-menu">
                <li>动画</li>
                <li>特效</li>
                <li>AJAX</li>
            </ul>
        </li>
        <li>VUE</li>
    </ul>
    <div class="clear"></div>
</div>

css代码如下

JavaScript

.demo-nav { width: 500px; margin: 0 auto; } .demo-nav li { line-height: 40px; padding: 0 10px; background: #09f; color: #fff; position: relative; } .demo-nav li ul { position: absolute; left: 0; top: 40px; height: 0; overflow: hidden; } .demo-nav li ul li { float: none; /*连通代码*/ transition: all .3s; background: #f90; opacity: 0; } /*奇数项开首往右侧偏移百分百*/ .demo-nav li ul li:nth-of-type(1n) { transform: translate3d(100%, 0, 0); } /*偶数项初步往左侧偏移百分之百*/ .demo-nav li ul li:nth-of-type(2n) { transform: translate3d(-100%, 0, 0); } .demo-nav li:hover ul { overflow: visible; } /*折射率和相互同期举办*/ .demo-nav li:hover ul li { opacity: 1; transform: translate3d(0, 0, 0); }

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
    .demo-nav {
        width: 500px;
        margin: 0 auto;
    }
 
    .demo-nav li {
        line-height: 40px;
        padding: 0 10px;
        background: #09f;
        color: #fff;
        position: relative;
    }
 
    .demo-nav li ul {
        position: absolute;
        left: 0;
        top: 40px;
        height: 0;
        overflow: hidden;
    }
 
    .demo-nav li ul li {
        float: none;
        /*过渡代码*/
        transition: all .3s;
        background: #f90;
        opacity: 0;
    }
    /*奇数项初始往右边偏移100%*/
    .demo-nav li ul li:nth-of-type(1n) {
        transform: translate3d(100%, 0, 0);
    }
    /*偶数项初始往左边偏移100%*/
    .demo-nav li ul li:nth-of-type(2n) {
        transform: translate3d(-100%, 0, 0);
    }
 
    .demo-nav li:hover ul {
        overflow: visible;
    }
    /*透明度和互动同时进行*/
    .demo-nav li:hover ul li {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

注意1:在展现下拉列表的操作上,刚早先隐蔽子菜单ul的样式,不能这么写.demo-nav li ul{display:none;}。要那样写.demo-nav li ul{height: 0;overflow:hidden;},鼠标放上父级li的时候,呈现ul不能够那样写.demo-nav li:hover ul{display:block;},要如此写,.demo-nav li:hover ul{overflow: visible;}因为后生可畏起初假使实菜单ul是逃避的,鼠标放到父级li的时候,子菜单ul就显得出来,那样是来看子菜单ul上面li的卡通的。

图片 11

注意2:子菜单ul要用.demo-nav li ul{height: 0;overflow:hidden;}遮盖,在突显的时候再安装.demo-nav li:hover ul{overflow: visible;}。这一步无法省,不然会出标题。倘诺不加,实际上子菜单ul,甚至子菜单ul下面的li直接在页面上,要是鼠标移上去子菜单ul,以致子菜单ul下面的li。那么实际上也会接触父级lihover

图片 12

图片 13

有趣的CSS标题(3): 层叠顺序与货仓上下文知多少

2016/09/29 · CSS · CSS

正文我: 伯乐在线 - chokcoco 。未经小编许可,幸免转发!
款待参与伯乐在线 专栏编辑者。

开本连串,商量一些有意思的 CSS 标题,抛开实用性来讲,一些难点为了拓展一下缓和难点的思路,其余,涉及一些便于忽视的 CSS 细节。

解题不构思宽容性,标题南征北战,想到怎么着说怎么着,假设解题中有您倍感觉生僻的 CSS 属性,赶紧去补习一下啊。

不断更新,不断更新,不断更新,重要的政工说一次。

商议一些风趣的CSS标题(1): 左侧竖条的落成格局

批评一些风趣的CSS题目(2): 从条纹边框的贯彻谈盒子模型

不无标题汇总在自家的 Github 。

6. Reactive Listener

图片 14

请不要因为它的名字,令你现身成的歪曲,它可不是 React 组件。Reactive listener是由Zurb集团出品的后生可畏款微型库,它能够扶助我们创设高等的事件监听器,用来响应那么些(比轻巧的点击与悬停)更目迷五色的操作。近来它只能够分辨客户曾几何时向元素移动,但前途也许会扩大越来越多的成效。

品种地址:【传送门】

So

小结一下,线性渐变(径向渐变)是不援救 animation 的,单色的 background 是支撑的。

搜寻了下文书档案,在 background 周边区域截图如下:

图片 15

如何 CSS 属性能够动漫?,上面的截图是残缺的援助CSS 动漫的个性,完整的能够戳侧边。

对于 background 相关的,文书档案里写的是帮助 background 可是没有前述不帮忙 background: linear-gradient()/radial-gradient() 。估算原因,或许是由于渐变中步向 animation 的扭转对过度消耗质量。

那么是或不是大家想要的背景观渐变动漫就不恐怕落到实处了吗?上面我们就散落下思想看看有未有其余格局得以直达大家的靶子。

5.总结

有关css3,我的支出小条件便是能用css3减轻的,小编不会写js,可是即使要写js的,作者也不会小气到不写js,只用css3写出退而求之的机能!css3跟js搭配,能做出过多想不到的触动作效果果,那些就得看大家脑洞有多大了!
好了,先天经过三个案例带我们开头认知了css3的连接和动漫。希望能给咱们起叁个热身的效应,大概是贵族看了那八个案例,知道怎么去支付别的的案例,发散思维!不过这一个只是css3交接和动漫的冰山大器晚成角而已,css3固然未有其余的新特色,就说过渡和卡通片,魔力就够用大,我们也得以到英特网搜下css3的案例!就领会css3的魔力了!关于css3的新脾性,现在作者会继续写小说。
末尾依然那句老话,要是感觉本身哪里写得不佳,写错了,接待教导!让大家相互学习,相互援助!

1 赞 8 收藏 9 评论

图片 16

打赏援助小编写出更加多好作品,感谢!

任选生龙活虎种支付方式

图片 17 图片 18

1 赞 3 收藏 评论

8. Planck.js

图片 19

以此项目是游戏开辟人士使用 C ++ 对 Box2D轮廓引擎的 JavaScript 重写。Plank.js 优化了 Web 和平运动动浏览器的蒸内燃机,并提供了三个对 JavaScript 友好的开源代码库和 API。所以,当开垦人士在制作 2D 游戏时,他们能更弹无虚发。

项目地址:【传送门】

由此 transform 模拟渐变动漫

上边二种艺术固然都足以达成,可是总认为到缺乏自由,或许随机性非常不够大。

不唯有如此,上述二种情势,由于采用了 background-positionbackground-size,况兼在耳濡目染中改动这多个属性,以致页面不断地举行多量的重绘(repaint),对页面品质消耗非常的悲惨,所以大家还是能够试试 transfrom 的方法:

使用伪成分协作 transform 举行潜濡默化动漫,通过成分的伪成分 before 或者 after ,在要素内部画出二个大背景,再通过 transform 对伪元素实行调换:

JavaScript

div { position: relative; overflow: hidden; width: 100px; height: 100px; margin: 100px auto; border: 2px solid #000; &::before { content: ""; position: absolute; top: -100%; left: -100%; bottom: -100%; right: -100%; background: linear-gradient(45deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%); background-size: 100% 100%; animation: bgposition 5s infinite linear alternate; z-index: -1; } } @keyframes bgposition { 0% { transform: translate(30%, 30%); } 25% { transform: translate(30%, -30%); } 50% { transform: translate(-30%, -30%); } 75% { transform: translate(-30%, 30%); } 100% { transform: translate(30%, 30%); } }

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
div {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    border: 2px solid #000;
 
    &amp;::before {
        content: "";
        position: absolute;
        top: -100%;
        left: -100%;
        bottom: -100%;
        right: -100%;
        background: linear-gradient(45deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
        background-size: 100% 100%;
        animation: bgposition 5s infinite linear alternate;
        z-index: -1;
    }
}
 
 
@keyframes bgposition {
    0% {
        transform: translate(30%, 30%);
    }
    25% {
        transform: translate(30%, -30%);
    }
    50% {
        transform: translate(-30%, -30%);
    }
    75% {
        transform: translate(-30%, 30%);
    }
    100% {
        transform: translate(30%, 30%);
    }
}
 

达成原理如下图所示:

图片 20

我们得以在任意 animation 动漫进程中再投入 scaleskewroate 等转移,让职能看上去更是有声有色随机。效果如下:

See the Pen 伪成分协作transform达成背景渐变 by Chokcoco (@Chokcoco) on CodePen.

地方列出来的只是部分方法,理论来说,伪成分合营能够发生位移只怕形变的习性都得以达成地点的效果与利益。大家竟然能够行使不相同的缓动函数可能借鉴蝉原则,制作出随机性十三分强的法力。

本来,本文罗列出来的皆以纯 CSS 方法,使用 SVG 大概 Canvas 相像可以制作出来,况兼品质更佳。感兴趣的读者能够自行往下研讨。

图片 21

14. RPG Awesome

图片 22

那是三个有着近 500 个科学幻想大旨的免费矢量Logo网址,它满含了 RPG 游戏中武器、盔甲、法力甚至仓库储存货物等有关的Logo,而采纳方式也与别的网页Logo字体相像。 (``卡塔尔(قطر‎ 以致,你还足以采取 CSS 或 SASS 实行简要的自定义修改。

品种地址:【传送门】

打赏扶助自个儿写出更多好散文,感谢!

任选朝气蓬勃种支付方式

图片 23 图片 24

1 赞 5 收藏 评论

本文由乐百家在线发布于乐百家官方网站,转载请注明出处:个风趣的,层叠顺序与仓库上下文知多少

关键词: