Web前端面试指导(十七)：三个满屏 品 字布局 如何
四方动画
说起底，我们一起来安装方块的动画
大家最大的挑战是心余力绌连接
keyframes。因为，大家最后想要的卡通片中每一个小方块皆有肯定的顺序，
为此， 大家作如下更改
0 to 25%：上面框和侧边框显现25 to 50%：上边框和左边框显现50 to 65%：粉末蓝小方块显现65 to 80%：宝石红小方块显现75 to 90%：赫色小方块显现
甲子革命小方框 keyframe 如下
@keyframes red { 0%, 50% { width: 0; opacity: 0; } 50.01% { opacity: 1; } 65%, 100% { width: 27%; opacity: 1; } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@keyframes red {
0%,
50% {
width: 0;
opacity: 0;
}
50.01% {
opacity: 1;
}
65%,
100% {
width: 27%;
opacity: 1;
}
}
|
重复上边的代码，就可成功大家一切动画， 是否很周密
CSS 巧用 :before和:after
2016/02/14 · CSS · 1 评论 · after, before
原来的文章出处： 野兽'
前几日的晚上较完善的去看了下css的有的文书档案和素材，当先四分之二的体制运用都没事儿大主题材料了，只是有多少较不熟悉，可是也理解他们的存在和兑现的是什么样式。前几日关键想在这里篇学习笔记中写的也很少，首若是针对性:before和:after写一些剧情，还恐怕有多少个小样式略微带过的介绍下。
怎么着是:before和:after？ 该如何选用他们？
:before是css中的一种伪成分，可用来在某些成分在此以前插入有些内容。
:after是css中的一种伪成分，可用以在有个别成分之后插入有些内容。
下边大家先跑个轻松的代码测量试验下效果：
XHTML
<style> p:before{ content: "H" /*:before和:after必带技能，重要性为满5颗星*/ } p:after{ content: "d" /*:before和:after必带才具，主要性为满5颗星*/ } </style> <p>ello Worl</p>
1
2
3
4
5
6
7
8
9
|
<style>
p:before{
content: "H" /*:before和:after必带技能，重要性为满5颗星*/
}
p:after{
content: "d" /*:before和:after必带技能，重要性为满5颗星*/
}
</style>
<p>ello Worl</p>
|
以上的代码将会在页面中显现的是”Hello World”。大家透过浏览器的”调查成分”见到的开始和结果是：
XHTML
<p> ::before "ello Worl" ::after </p>
1
2
3
4
5
|
<p>
::before
"ello Worl"
::after
</p>
|
p标签内部的剧情的最近会被插入贰个:before伪成分，该伪成分内含有的原委是”H”；而在p标签内的内容后边会被插入贰个:after伪成分，该因素富含的剧情是”d”。作为二头合格的程序猴子，捍卫”Hello
World”的总体存在是必不可缺的。
既是笔记重要针对是:before和:after，那么势必不会只是独自有上述的回顾介绍就瓜熟蒂落。上边大家看看平时该怎么采纳他们。
1.结合border写个对话框的体制。
本兽将上边那句话拆成2部分：结合border，写个对话框的体裁。
既然是整合border，那么大家先转个小话题，简单由表及里的牵线下怎么用border画三角形样式(这么些三角在写对话框样式的时候须要)：
XHTML
<style> .triangle{ width: 0; height: 0; border-left:50px solid red; border-bottom:50px solid blue; border-top:50px solid black; border-right:50px solid purple } </style> <div class="triangle"></div>
1
2
3
4
5
6
7
8
9
10
11
|
<style>
.triangle{
width: 0;
height: 0;
border-left:50px solid red;
border-bottom:50px solid blue;
border-top:50px solid black;
border-right:50px solid purple
}
</style>
<div class="triangle"></div>
|
上述代码将会在页面上出示二个正方形，左侧是个革命的三角形，左边是金红的三角，上边是天青的三角，下边是浅青的三角形。那么有人就能问，大家要的不是三角形么？野兽你画个正方形逗小编呢？
笔者们对地方的样式做些修改：
CSS
.triangle{ width: 0; height: 0; border:50px transparent solid; /*此间大家将成分的边框宽度设置为50px，transparent表示边框颜色是晶莹剔透的，solid表示边框是实线的*/ border-top-color: black; /*此间大家仅将下面框的颜色设置为黄褐，无人不晓，css前面包车型客车体制代码会覆盖从前的一致的体制代码，至于其余三边的照旧透明色*/ /*border-bottom-color: black; /*此处设置尾部边框色为浅黄*/ border-left-color: black; /*这边设置左侧边框色为深黄*/ border-right-color:black*/ /*此间设置侧面边框色为深玉石白*/ }
1
2
3
4
5
6
7
8
9
|
.triangle{
width: 0;
height: 0;
border:50px transparent solid; /*这里我们将元素的边框宽度设置为50px，transparent表示边框颜色是透明的，solid表示边框是实线的*/
border-top-color: black; /*这里我们仅将上边框的颜色设置为黑色，众所周知，css后面的样式代码会覆盖之前的相同的样式代码，至于其他三边的还是透明色*/
/*border-bottom-color: black; /*这里设置底部边框色为黑色*/
border-left-color: black; /*这里设置左边边框色为黑色*/
border-right-color:black*/ /*这里设置右边边框色为黑色*/
}
|
接下来那时我们就能见到三个在最上端的方向向下的三角形。解释已详细的写在css样式的申明里。
接下去大家增多:before：
CSS
<style> .test-div{ position: relative; /*习感到常相对固化*/ width:150px; height:36px; border-radius:5px; border:black 1px solid; background: rgba(245,245,245,1) } .test-div:before{ content: ""; /*:before和:after必带手艺，重要性为满5颗星*/ display: block; position: absolute; /*平时来讲绝对定位*/ top:8px; width: 0; height: 0; border:6px transparent solid; left:-12px; border-right-color: rgba(245,245,245,1); } </style> <div class="test-div"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<style>
.test-div{
position: relative; /*日常相对定位*/
width:150px;
height:36px;
border-radius:5px;
border:black 1px solid;
background: rgba(245,245,245,1)
}
.test-div:before{
content: ""; /*:before和:after必带技能，重要性为满5颗星*/
display: block;
position: absolute; /*日常绝对定位*/
top:8px;
width: 0;
height: 0;
border:6px transparent solid;
left:-12px;
border-right-color: rgba(245,245,245,1);
}
</style>
<div class="test-div"></div>
|
由此上述代码，大家将会映重视帘三个看似微信/QQ的对话框样式,不过美中相差的是，在对话框的周围的边框不是完整的，而是在对话框的优良三角形上是木有边框的T_T瞬间冷场有木有，该如何做呢？让召唤:after穿着棉大衣来救场吧~
完全代码：
CSS
<style> .test-div{ position: relative; /*日常说来相对牢固*/ width:150px; height: 36px; border:black 1px solid; border-radius:5px; background: rgba(245,245,245,1) } .test-div:before,.test-div:after{ content: ""; /*:before和:after必带技巧，重要性为满5颗星*/ display: block; position: absolute; /*平日相对定位*/ top:8px; width: 0; height: 0; border:6px transparent solid; } .test-div:before{ left:-11px; border-right-color: rgba(245,245,245,1); z-index:1 } .test-div:after{ left:-12px; border-right-color: rgba(0,0,0,1); z-index: 0 } </style> <div class="test-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
|
<style>
.test-div{
position: relative; /*日常相对定位*/
width:150px;
height: 36px;
border:black 1px solid;
border-radius:5px;
background: rgba(245,245,245,1)
}
.test-div:before,.test-div:after{
content: ""; /*:before和:after必带技能，重要性为满5颗星*/
display: block;
position: absolute; /*日常绝对定位*/
top:8px;
width: 0;
height: 0;
border:6px transparent solid;
}
.test-div:before{
left:-11px;
border-right-color: rgba(245,245,245,1);
z-index:1
}
.test-div:after{
left:-12px;
border-right-color: rgba(0,0,0,1);
z-index: 0
}
</style>
<div class="test-div"></div>
|
好了，完整的叁个对话框样式呈以后头里了，至于对话框的小三角形的来头，相信大家看了上上段对于border介绍的代码也都晓得该怎么做了吧，没错，便是改下position的职分，改下border展现颜色的方位~
(本兽抵触贴图片，体谅下额，须要的能够拷贝代码直接运维看功效，造轮子不独有是造轮子，也能令人加深圳影业公司像，更加好的知道)
2.用作内容的半透明背景层。
举例大家的需要是做二个半晶莹剔透的登陆框吧(这里也是在代码中通过注释来申明)：
CSS
<style> body{ background: url(img/1.jpg) no-repeat left top /*此间本兽加了个图片背景，用以区分背景的半透明及内容的一心不透明*/ } .test-div{ position: relative; /*经常相对固定(首要，上边内容也会介绍)*/ width:300px; height: 120px; padding: 20px 10px; font-weight: bold; } .test-div:before{ position: absolute; /*常备相对定位(首要，上面内容也会略带介绍)*/ content: ""; /*:before和:after必带本事，主要性为满5颗星*/ top:0; left: 0; width: 100%; /*和内容一律的上涨的幅度*/ height: 100%; /*和剧情千篇一律的万丈*/ background: rgba(255,255,255,.5); /*给定背景象牙黄，反射率50%*/ z-index:-1 /*常常成分聚积顺序(首要，上边内容也会略带介绍)*/ } </style> <!--这里容兽偷个懒，布局轻巧写写--> <div class="test-div"> <table> <tr> <td>Name</td> <td><input placeholder="your name" /></td> </tr> <tr> <td>Password</td> <td><input placeholder="your password" /></td> </tr> <tr> <td></td> <td><input type="button" value="login" /></td> </tr> </table> </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
39
|
<style>
body{
background: url(img/1.jpg) no-repeat left top /*这里本兽加了个图片背景，用以区分背景的半透明及内容的完全不透明*/
}
.test-div{
position: relative; /*日常相对定位(重要，下面内容也会介绍)*/
width:300px;
height: 120px;
padding: 20px 10px;
font-weight: bold;
}
.test-div:before{
position: absolute; /*日常绝对定位(重要，下面内容也会略带介绍)*/
content: ""; /*:before和:after必带技能，重要性为满5颗星*/
top:0;
left: 0;
width: 100%; /*和内容一样的宽度*/
height: 100%; /*和内容一样的高度*/
background: rgba(255,255,255,.5); /*给定背景白色，透明度50%*/
z-index:-1 /*日常元素堆叠顺序(重要，下面内容也会略带介绍)*/
}
</style>
<!--这里容兽偷个懒，布局简单写写-->
<div class="test-div">
<table>
<tr>
<td>Name</td>
<td><input placeholder="your name" /></td>
</tr>
<tr>
<td>Password</td>
<td><input placeholder="your password" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="login" /></td>
</tr>
</table>
</div>
|
下边包车型客车代码拷贝过去，加上张图纸可测量检验效果。
理之当然，:bofore和:after也还应该有任何越来越多的神妙用法，这里也不一一列出来了，这里放上二个用那七个伪成分加上css3动画完毕部分比较为难及实用的动态效果的链接：HoverEffectIdeas
讲完了:before和:after，我们有个别扯扯一些任何的css样式及布局注意点(或然大家有个别在乎，进而导致有个别搭架子和体裁出难题)。
position 定位的主题素材
position属性规定了成分的向来类型，默感觉static。
该属性还足以有下值：
absolute：生成相对定位的成分，相对于 static
定位以外的首先个父成分实行固化。
fixed：生成相对定位的因素，相对于浏览器窗口实行一定。
relative：生成相对稳定的要素，相对于其健康地方张开定位。
inherit：规定应当从父成分承袭 position 属性的值。
代码：
CSS
<!--position:absolute--> <style> body{ height: 2000px /*此处将body的冲天设置为三千px是为了差异absolute和fixed的歧异*/ } .test-div{ position:absolute; left:50px; top:50px } </style> <div class="test-div">Hello World</div> <!--position:fixed--> <style> body{ height: 2000px /*此间将body的惊人设置为两千px是为了分歧absolute和fixed的差异*/ } .test-div{ position:fixed; left:50px; top:50px } </style> <div class="test-div">Hello World</div> <!--position:relative position:absolute--> <style> .out-div{ width: 300px; height: 300px; background: purple; /*那边定义个背景，让我们知道那几个div在哪*/ margin:50px 0px 0px 50px; position: relative } .in-div{ position:absolute; left:50px; top:50px } </style> <div class="out-div"> <div class="in-div">Hello World</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
39
40
41
42
|
<!--position:absolute-->
<style>
body{
height: 2000px /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/
}
.test-div{
position:absolute;
left:50px;
top:50px
}
</style>
<div class="test-div">Hello World</div>
<!--position:fixed-->
<style>
body{
height: 2000px /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/
}
.test-div{
position:fixed;
left:50px;
top:50px
}
</style>
<div class="test-div">Hello World</div>
<!--position:relative position:absolute-->
<style>
.out-div{
width: 300px;
height: 300px;
background: purple; /*这里定义个背景，让我们知道这个div在哪*/
margin:50px 0px 0px 50px;
position: relative
}
.in-div{
position:absolute;
left:50px;
top:50px
}
</style>
<div class="out-div">
<div class="in-div">Hello World</div>
</div>
|
z-index 成分堆放排序
z-index用于安装或索求对象的堆积顺序，对应的剧本性子为zIndex。
z-index的数值越大，该因素的聚积层级越高。
代码：
CSS
<style> .first-div{ width: 300px; height: 300px; background: purple; /*此间定义个背景，让大家清楚那个div在哪*/ position: absolute; left:50px; top:50px; z-index: 1 } .second-div{ position:absolute; left:80px; top:80px; width:50px; height: 50px; background: white; z-index: 2 } </style> <div class="first-div"></div> <div class="second-div"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<style>
.first-div{
width: 300px;
height: 300px;
background: purple; /*这里定义个背景，让我们知道这个div在哪*/
position: absolute;
left:50px;
top:50px;
z-index: 1
}
.second-div{
position:absolute;
left:80px;
top:80px;
width:50px;
height: 50px;
background: white;
z-index: 2
}
</style>
<div class="first-div"></div>
<div class="second-div"></div>
|
此处我们将首先个div和第叁个div位寄放置一同，方便看z-index的成效。以上代码的体制是栗色的纺锤形里面有个反革命的小星型。因为小圆柱形的z-index大于大圆柱形的z-index，所以能显示出，当大家把.first-div的z-index设置为3，那时候就看不到浅玉米黄的小星型了，它被浅石磨蓝的大长方形严酷的挡掉了…
zoom 成分缩放比例
zoom适用于全体因素，用于安装或索求对象的缩放比例，对应的脚天个性为zoom，原比例的值是1。
代码：
CSS
<style> div{ width: 100px; height: 100px; float: left } .first-div{ background: purple; zoom:1.5 } .second-div{ background: black; zoom:1 } .third-div{ background: red; zoom:.5 } </style> <div class="first-div"></div> <div class="second-div"></div> <div class="third-div"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<style>
div{
width: 100px;
height: 100px;
float: left
}
.first-div{
background: purple;
zoom:1.5
}
.second-div{
background: black;
zoom:1
}
.third-div{
background: red;
zoom:.5
}
</style>
<div class="first-div"></div>
<div class="second-div"></div>
<div class="third-div"></div>
|
以上代码将会来得的相继是黑色-深暗灰-深红的div，大小分别是100px的1.5倍，1倍，0.5倍。
em 和 rem 是什么
1em非常当前的书体尺寸，数值的更换意味着字体大小的调解。em
有继续那个特点，相当于说，外界父成分定义了字体的em大小，内部子成分会持续这一质量的样式。
rem = root em
。看名称就能够想到其意义，root即根部的，最上端的。也正是根部的em，这些根部指的是HTML根成分。所以rem的轻重是针对HTML根成分的轻重做字体的相对大小的调动。
代码：
CSS
<style> body{ font-size: 12px; } /*html{ font-size: 12px; }*/ div{ width: 200px; height: 100px; float:left } .first-div{ font-size: 1em } .second-div{ font-size: 2em } .third-div{ font-size: 1rem } .fourth-div{ font-size: 2rem } </style> <div class="first-div">Hello World</div> <div class="second-div">Hello World</div> <div class="third-div">Hello World</div> <div class="fourth-div">Hello World</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
|
<style>
body{
font-size: 12px;
}
/*html{
font-size: 12px;
}*/
div{
width: 200px;
height: 100px;
float:left
}
.first-div{
font-size: 1em
}
.second-div{
font-size: 2em
}
.third-div{
font-size: 1rem
}
.fourth-div{
font-size: 2rem
}
</style>
<div class="first-div">Hello World</div>
<div class="second-div">Hello World</div>
<div class="third-div">Hello World</div>
<div class="fourth-div">Hello World</div>
|
如上代码分别显示了差异尺寸的字体，em和rem的差别能够经过单独注释body字体样式和html字体样式来探视他们之间的区别。
1 赞 8 收藏 1 评论
主题材料点评
那道难点有望是笔试题，有希望面谈的时候进行描述，就算是笔试题供给对css样式代码特别自如，假若是面谈陈诉，就要求你的表明技能非常强，要吸引要点，把供给选择的技巧点讲了解就能够了。
何以要做加载
只想说, 本文最重大的是对 CSS, 伪元素, keyframe的享用,
以致读者对那一个事物的真正掌握,
我并不是怂恿世家在每叁个页面包车型大巴日前都去加三个绚烂的加载
急需用到手艺
1. 成分水平居中对齐
1) 使用margin对齐(推荐)
2) 使用left：50%
3) 使用text-align
2. 成分对绝对窗口定位
1) 使用filxed（推荐）
2) 使用absolute定位
style="font-size: 14px">3) 使用html和body的width和height填?那些窗口
3. 成分左右稳住
1) 使用float左右变型
style="font-size: 14px">2) 使用相对化定位举办左右原则性（推荐）
总结
多谢您的读书，最终附上
享有的源码，但个体提出，不要直接阅读源码，根据上边的唤起在
codepen 中友好来三回才是精品实施
1 赞 6 收藏 2 评论
实际落实的代码
html代码
[html] view plain copy
- <div class="main">
- <div class="wrapper-up">
- <div class="div-square-up"></div>
- </div>
- <div class="wrapper-down">
- <div class="div-square-left"></div>
- <div class="div-square-right"></div>
- </div>
- </div>
CSS样式
[css] view plain copy
- body{
- height: 1200px;
- }
- .main {
- position: fixed;
- left: 0;
- top: 0;
- height: 100%;
- width: 100%;
- }
- .wrapper-up {
- height: 50%;
- }
- .wrapper-down {
- height: 50%;
- position: relative;
- }
- .div-square-up {
- width: 50%;
- margin: 0 auto;
- border: 2px solid red;
- height: 96%;
- box-sizing: border-box;
- }
- .div-square-left {
- position: absolute;
- left: 0;
- width: 48%;
- height: 100%;
- box-sizing: border-box;
- border: 2px solid red;
- }
- .div-square-right {
- position: absolute;
- right: 0;
- width: 48%;
- height: 100%;
- border: 2px solid red;
- box-sizing: border-box;
- }
开班入门
在开端联合具名创设它前, 我们先看看它最后的效果
正如你所观察的, 大家将经历 4 个步骤
- 边框三个接贰个地
出现 - 红/橙/银色方块向里
滑入 - 四方向外
划出 - 边框
消失
小编们只要求 animation-direction: alternate 来达成步骤 1 和 2, 步骤 3 和
步骤 4 大家能够利用 reverse, 别的, 大家能够行使
animation-iteration-count: infinite 重复动画
首先, 我们先书写好中央的 HTML 结构
JavaScript
<!doctype html> <html> <head> <!-- <link rel="preload"> for CSS, JS, and font files --> <style type="text/css"> /* * All the CSS for the loader * Minified and vendor prefixed */ </style> </head> <body> <div class="loader"> <!-- HTML for the loader --> </div> <header /> <main /> <footer /> <!-- Tags for CSS and JS files --> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!doctype html>
<html>
<head>
<!-- <link rel="preload"> for CSS, JS, and font files -->
<style type="text/css">
/*
* All the CSS for the loader
* Minified and vendor prefixed
*/
</style>
</head>
<body>
<div class="loader">
<!-- HTML for the loader -->
</div>
<header />
<main />
<footer />
<!-- Tags for CSS and JS files -->
</body>
</html>
|
构建 logo 本身
一伊始大家先达成 logo 本人, 并非终极版本的法力
父级成分 logo, 差异颜色的四方都以它的子成分
JavaScript
<div class="logo"> <div class="white"></div> <div class="orange"></div> <div class="red"></div> </div>
1
2
3
4
5
|
<div class="logo">
<div class="white"></div>
<div class="orange"></div>
<div class="red"></div>
</div>
|
我们用 less 来实现
JavaScript
.logo { position: relative; width: 100px; height: 100px; border: 4px solid black; box-sizing: border-box; background-color: white; & > div { position: absolute; } .red { top: 0; bottom: 0; left: 0; width: 27%; border-right: 4px solid black; background-color: #EA5664; } /* Similar code for div.orange and div.white */ }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.logo {
position: relative;
width: 100px;
height: 100px;
border: 4px solid black;
box-sizing: border-box;
background-color: white;
& > div {
position: absolute;
}
.red {
top: 0;
bottom: 0;
left: 0;
width: 27%;
border-right: 4px solid black;
background-color: #EA5664;
}
/* Similar code for div.orange and div.white */
}
|
logo 的职能图如下
哪些只用 CSS 达成能够的加载
2017/08/15 · CSS · 2 评论 · 加载
原稿出处： Julien Benchetrit 译文出处：枫上雾棋
自个儿是怎么着做的
昨今分化的页面, 对加载的设计也就只怕区别. 本文设计的加载相符大非常多页面.
与此同不经常候, 本文要是读者已经不行熟习伪元素, CSS 动画属性和keyframe,
假使读者想重温, 下边两篇小说可做参考
- 学会使用 CSS 中的 :after 和 :before
- keyframe 动画直通车
边框动画
接下去, 大家将踏入棘手(有趣)的部分
CSS 不允许大家直接对 div.logo 的边框实行设置到达大家想要的功能,
所以大家无法不去除土生土养的边框, 选择另外的法子来促成
咱俩要把四个边框分开开来, 然后让它们有序地面世, 所以,
我们得以采用覆盖全部 div 的多个透明的伪元素
废话少说, 就让大家开头吧, 大家先做出它最开始的样子. 我们让
div.logo :: before 相对位于 div.logo
的左上角，代表方块的上面框和右侧框
, 让 div.logo::after 相对定位 div.logo 的右下角,
代表方块的底下框和左边框
现行, less 代码形成了这么
JavaScript
.logo { position: relative; width: 100px; height: 100px; box-sizing: border-box; background-color: white; &::before, &::after { content: ''; position: absolute; width: 100%; height: 100%; box-sizing: border-box; border: 4px solid transparent; } &::before { top: 0; left: 0; border-top-color: black; border-right-color: black; } &::after { bottom: 0; right: 0; border-bottom-color: red; // Red for demo purposes only border-left-color: red; } }
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
|
.logo {
position: relative;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: white;
&::before,
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 4px solid transparent;
}
&::before {
top: 0;
left: 0;
border-top-color: black;
border-right-color: black;
}
&::after {
bottom: 0;
right: 0;
border-bottom-color: red; // Red for demo purposes only
border-left-color: red;
}
}
|
现在效果长这样
接下去, 大家就用 keyframe 做 div.logo::before 的第七个卡通
我们将 width 和 height 起首都为 0, 然后用 keyframe 将 width
和
height 调整到 100%
乘机大家在对应的时间把边框从透明变为黑色,
我们想要的最起首的效果与利益就出来了
该代码显示了伪成分的初始动画
div.logo { &::before, &::after { /* ... */ animation-timing-function: linear; } &::before { /* ... */ animation: border-before 1.5s infinite; animation-direction: alternate; } } @keyframes border-before { 0% { width: 0; height: 0; border-right-color: transparent; } 24.99% { border-right-color: transparent; } 25% { height: 0; width: 100%; border-right-color: black; } 50%, 100% { width: 100%; height: 100%; } }
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
|
div.logo {
&::before,
&::after {
/* ... */
animation-timing-function: linear;
}
&::before {
/* ... */
animation: border-before 1.5s infinite;
animation-direction: alternate;
}
}
@keyframes border-before {
0% {
width: 0;
height: 0;
border-right-color: transparent;
}
24.99% {
border-right-color: transparent;
}
25% {
height: 0;
width: 100%;
border-right-color: black;
}
50%,
100% {
width: 100%;
height: 100%;
}
}
|
我们对 div.logo::after 重复同样的操作, 不要忘了调度时间和反转 width
和 height. 未来, 大家就有了最外层边框的万事动画.
本文由时时app平台注册网站发布于web前端,转载请注明出处：Web前端面试指导(十七)：三个满屏 品 字布局 如何
关键词：