三角形运用,用css3写一个守望先锋的loading动画

CSS 巧用 :before和:after

2016/02/14 · CSS · 1
评论 ·
after,
before

原文出处: 野兽’   

今日的夜晚较完美的去看了下css的一部分文档和资料,大多数的体裁运用都没什么大标题了,只是有多少较陌生,不过也精晓他们的存在和落到实处的是怎么着样式。后日重点想在那篇学习笔记中写的也不多,紧倘诺针对:before和:after写一些内容,还有几个小样式略微带过的牵线下。
怎么样是:before和:after? 该怎样利用他们?
:before是css中的一种伪元素,可用以在某个元素从前插入某些内容。
:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。
三角形运用,用css3写一个守望先锋的loading动画。上边大家先跑个简易的代码测试下效果:

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的冲天设置为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>

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
评论

亚洲必赢官网 1

:before和:after作为伪元素,用于在某个元素此前或之后插入某些内容
举个例证

亚洲必赢官网 2

酷酷的 CSS3 三角形运用

2016/08/04 · CSS · 2
评论 ·
CSS3,
三角形

原文出处: keepfool   

<style>
p:before{
content: “H”
}
p:after{
content: “d”
}
</style>
<p>ello Worl</p>

本身是在前端网看到的职能,点击那里进入,自己看完源码后完成了五遍,以下介绍具体步骤:

概述

在初期的前端Web设计开发年份,落成部分页面元素时,大家亟须求有正规的PS美工叔伯,由PS美工大叔来切图,做一些圆角、阴影、锯齿或者局地小图标。

在CSS3出现后,借助一些具备魔力的CSS3属性,使得那个元素大多都足以由开发人士自己来落成。在开头阅读那篇小说前,大家先喊个口号:不想当美学家的程序员不是好设计师!

本文的Demo和源代码已放置GitHub,如果您觉得本篇内容科学,请点个赞,或在GitHub上加个不难!

Triangle
Demo 
|  Page
Demo 
|  GitHub Source

则输出的展现依旧是”hello world”

一、布局###\

观测效果,能够将其分成多个圆和里面的logo,所以不难分为三部分

<div class="overwatch-container">
    <div class="out-ring-container">
    </div>
    <div class="inner-ring-container">
    </div>
    <div class="inner-img">
    </div>
</div>

图例

我们先来看一副设计图

亚洲必赢官网 3

那幅图复杂的因素不多,布局也较为不难,我们大约分析一下,必要PS美工五伯扶助做的唯有一件事情,就是将上半片段的肉色背景图给抠出来。
除去,出现在那幅设计图的片段例外形状和小图标,都足以经过CSS3来促成。
咱俩将那一个卓殊形状和小图标分为两类:

1. 可以用Icon Font实现的

亚洲必赢官网 4亚洲必赢官网 5

Icon
Font是将一些图标作成字体文件,在CSS中指定font-face和font-family,然后为每个图标指定相应的class。
在网页中使用Icon
Font如同使用普通的文字一样,比如font-size属性可以设定图标的深浅,设定color属性可以设定图标的颜色。
越多内容,请参见阿里巴巴(Alibaba)矢量图标管理网站:。

2. 不能用IconFont实现的

亚洲必赢官网 6

干什么这几个图片不用IconFont达成啊?因为平时Icon
Font提供的都是局地正方形的矢量图标,也就是长约等于宽的图标。
本篇要讲的就是何许通过CSS3来完毕那4个图形。

审核元素得以发现

二、已毕外圆效果###\

观测外面的弧形,肯定是用clip属性来兑现了,明显要用4次,所以里面可以再分为四个部分,再用before和after八个伪元素,注意使用clip必须是用相对定位元素,具体clip里面的值的话可以逐步调了,假诺您是一个游戏迷的话,不仿完结一个和游玩里同样的,多少个月前,当自己的对象圈被那款游戏刷屏的时候,我也想娱乐的,不过当自身打开官网的时候

亚洲必赢官网 7

QQ截图20160816205229.png

亚洲必赢官网 8

本身竟无言以对,尽管自己很援救正版,然则究竟没钱。
把外圆的有关样式丢进来,就足以兑现效益了,这一个重大也就在clip了

<div class="overwatch-container">
    <div class="out-ring-container">
                <div class="out-ring1"></div>
        <div class="out-ring2"></div>
    </div>
    <div class="inner-ring-container">
    </div>
    <div class="inner-img">
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
    background: #282828;
}
.overwatch-container {
    width: 232px;
    margin: 50px auto;
    position: relative;
}
.out-ring1 {
    height: 220px;
    width: 220px;
    position: absolute;
    top: 6px;
    left: 6px;
}
.out-ring1::before, .out-ring1::after {
    content: "";
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
}
.out-ring1::before {
    clip: rect(60px, 232px, 172px, 100px);
    transform: rotate(230deg);
}
.out-ring1::after {
    clip: rect(80px, 232px, 152px, 100px);
    transform: rotate(120deg);
}
.out-ring2 {
    position: absolute;
    top: 6px;
    left: 6px;
}
.out-ring2::before, .out-ring2::after {
    content: "";
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
}
.out-ring2::before {
    clip: rect(105px, 232px, 127px, 100px);
}
.out-ring2::after {
    clip: rect(112px, 232px, 120px, 100px);
}

三角形

不知大家留意到了从未,那4个图形都饱含了一个非同经常的要素——三角形。
那4个图形,都是由三角形、长方形,或者是一个被啃掉了一口的长方形组成的。

CSS3是什么样完毕三角形的啊?——答案是通过边框,也就是border属性。

<p>
::before
“ello Worl”
::after
</p>

三、logo的实现###\

因为其中的圆的侧重于动画效果,故先写logo,观看logo,可以知晓,那里看到那里肯定要用到transform:rotate那个特性,logo中必然是一个大圆,其他部分可以通过方块完毕,而最中间的有些可以用三角来兑现,css画三角形使用border就足以,具体的rotate必要具体调

<div class="overwatch-container">
    <div class="out-ring-container">
                <div class="out-ring1"></div>
        <div class="out-ring2"></div>
    </div>
    <div class="inner-ring-container">
    </div>
    <div class="inner-img">
              <div class="inner-img-shelter"></div>
          <div class="inner-img-triangle"></div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
    background: #282828;
}
.overwatch-container {
    width: 232px;
    margin: 50px auto;
    position: relative;
}
.out-ring1 {
    height: 220px;
    width: 220px;
    position: absolute;
    top: 6px;
    left: 6px;
}
.out-ring1::before, .out-ring1::after {
    content: "";
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
}
.out-ring1::before {
    clip: rect(60px, 232px, 172px, 100px);
    transform: rotate(230deg);
}
.out-ring1::after {
    clip: rect(80px, 232px, 152px, 100px);
    transform: rotate(120deg);
}
.out-ring2 {
    position: absolute;
    top: 6px;
    left: 6px;
}
.out-ring2::before, .out-ring2::after {
    content: "";
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
}
.out-ring2::before {
    clip: rect(105px, 232px, 127px, 100px);
}
.out-ring2::after {
    clip: rect(112px, 232px, 120px, 100px);
}
.inner-img {
    width: 120px;
    height: 120px;
    border: 20px solid #B6B8C0;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 36px;
}
.inner-img::before {
    content: "";
    height: 20px;
    width: 66px;
    position: absolute;
    background: #B6B8C0;
    bottom: 0;
    left: 0;
    transform: rotate(-45deg);
    transform-origin: left;
}
.inner-img::after {
    content: "";
    height: 20px;
    width: 66px;
    position: absolute;
    background: #B6B8C0;
    bottom: 0;
    right: 0;
    transform: rotate(45deg);
    transform-origin: right;
}
.inner-img-shelter::before, .inner-img-shelter::after {
    content: "";
    height: 4px;
    width: 21px;
    background: #282828;
    position: absolute;
    top: 15px;
}
.inner-img-shelter::before {
    left: -4px;
    transform: rotate(45deg);
    transform-origin: bottom right;
}
.inner-img-shelter::after {
    right: -4px;
    transform: rotate(-45deg);
    transform-origin: bottom left;
}
.inner-img-triangle::before {
    content: "";
    width: 0px;
    height: 0px;
    border-width: 0px 0px 50px 20px;
    border-left-color: transparent;
    border-bottom-color: #B6B8C0;
    border-style: solid;
    position: absolute;
    top: 20px;
    left: 34px;
}
.inner-img-triangle::after {
    content: "";
    width: 0px;
    height: 0px;
    border-width: 0px 20px 50px 00px;
    border-right-color: transparent;
    border-bottom-color: #B6B8C0;
    border-style: solid;
    position: absolute;
    top: 20px;
    right: 34px;
}

长方形边框

HTML的块级元素都是长方形的,比如大家设定了以下样式:

JavaScript

<style> .simple-retangle { margin: 50px auto; width: 200px;
height: 200px; border: 40px solid salmon; } </style> <div
class=”simple-retangle”></div>

1
2
3
4
5
6
7
8
9
<style>
    .simple-retangle {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border: 40px solid salmon;
    }
</style>
<div class="simple-retangle"></div>

如我们所体会的,那只是一个大概的长方形,那些长方形在画面中是如此显式的:

亚洲必赢官网 9

其一长方形太干燥了,再给它点颜色看看,我们来个彩色边框吧。

JavaScript

<style> .colored-border-retangle { margin: 50px auto; width:
200px; height: 200px; border-top: 40px solid coral; border-right: 40px
solid lightblue; border-bottom: 40px solid lightgreen; border-left: 40px
solid mediumpurple; } </style> <div
class=”colored-border-retangle”></div>

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    .colored-border-retangle {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-retangle"></div>

在画面中,每个边框都变成一个梯形了。

亚洲必赢官网 10

干什么它会化为梯形呢?

亚洲必赢官网 11

请留意长方形的4个角,以左上角为例,它究竟是属于左侧框依然上边框呢?
左上角,既属于左边框,又属于上边框,角落的归属成了一个标题,浏览器为了不让边框打架,就让二位各分一半呢。
于是左上角就被一分为二,变成了七个三角,三角形靠近哪个边框,就显得这一个边框的颜色。

1.重组border写个对话框的样式

怎样用border画三角形

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

那儿会显示一个正方形,中间含有七个三角
有道是要开展改动

亚洲必赢官网 12

2017-03-05 18-11-02屏幕截图.png

.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 //这里设置左边边框色为藏蓝色
/
}

作用:上部的体裁覆盖了晶莹剔透,其他三部仍为透明

亚洲必赢官网 13

2017-03-05 18-26-23屏幕截图.png

然后加上before:

.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(0,245,245,1);
}

效果:三角形图标没有边框

亚洲必赢官网 14

对话框0.png

使用了after之后:

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

实质上是应用了前后五遍的一个位移差,使得只呈现出一个边线

亚洲必赢官网 15

对话框.png

三、落成里圆效果###\

里圆的功用侧重于动画了,里面的效能都是因此持续调整完结的,我也是看的源代码,里面的职能到底依旧基本的圆形loading加载动画,一般圆形的过程条我们可以动用方面提到的clip完结

亚洲必赢官网 16

23333

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> loading</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        width:220px;
        margin:20px auto;
    }
    .loading-container{
        position:relative;
    }
    .loading{
        width:200px;
        height:200px;
        border-radius: 50%;
        border:10px solid yellow;
        animation: loading 2s linear infinite;
        position:absolute;
    }
    .loading2{
        width:200px;
        height:200px;
        border-radius:50%;
        border:10px solid yellow;
        position:absolute;
        transform: rotate(180deg);
        clip:rect(0px,0px,0px,0px);
        animation:loading2 2s  linear infinite;
    }
    @keyframes loading{
        0%{
            clip:rect(0px, 220px,0px,110px);
        }
        50%{
            clip:rect(0px,220px,220px,110px);
        }
        100%{
            clip:rect(0px,220px,220px,110px);
        }
    }
    @keyframes loading2{
        0%{
            clip:rect(0px, 220px,0px,110px);
        }
        50%{
            clip:rect(0px, 220px,0px,110px);
        }
        100%{
            clip:rect(0px, 220px,220px,110px);
        }
    }
</style>
</head>
<body>
    <div class="loading-container">
        <div class="loading"></div>
        <div class="loading2"></div>
    </div>
</body>
</html>

一旦通过js添加一些数字就更是形象了

亚洲必赢官网 17

2334.gif

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title> loading</title>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<link href=”” rel=”stylesheet”>
<style>
*{
margin:0;
padding:0;
}
body{
width:220px;
margin:20px auto;
}
.loading-container{
position:relative;
}
.loading{
width:200px;
height:200px;
border-radius: 50%;
border:10px solid yellow;
animation: loading 2s linear infinite;
position:absolute;
}
.loading2{
width:200px;
height:200px;
border-radius:50%;
border:10px solid yellow;
position:absolute;
transform: rotate(180deg);
clip:rect(0px,0px,0px,0px);
animation:loading2 2s linear infinite;
}
@keyframes loading{
0%{
clip:rect(0px, 220px,0px,110px);
}
50%{
clip:rect(0px,220px,220px,110px);
}
100%{
clip:rect(0px,220px,220px,110px);
}
}
@keyframes loading2{
0%{
clip:rect(0px, 220px,0px,110px);
}
50%{
clip:rect(0px, 220px,0px,110px);
}
100%{
clip:rect(0px, 220px,220px,110px);
}
}
</style>
</head>
<body>
<div class=”loading-container”>
<div class=”loading”></div>
<div class=”loading2″></div>
</div>
<script>
var number=document.getElementById(“number”);
function changeNumber(){
var text=number.innerText;
var newText=Number(text.replace(/%/, ”));
if(newText<100){
newText++;
}
else{
clearTimeout(timer);
}
number.innerText=newText+”%”;
var timer=setTimeout(changeNumber,20);
}
changeNumber();
</script>
</body>
</html>

使用clip的一个特点是过程中会出现棱角,这个可能不是我们想要的,我们可以使用border来代替,从而消除棱角

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title> loading2</title>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<link href=”” rel=”stylesheet”>
<style>
*{
margin:0;
padding:0;
}
body{
width:220px;
margin:20px auto;
}
.loading-container{
position:relative;
}
.loading{
width:110px;
height:220px;
position:absolute;
overflow: hidden;
}
.loading-content{
width:200px;
height:200px;
border:10px solid yellow;
border-radius: 50%;
border-bottom-color:transparent;
border-right-color:transparent;
transform:rotate(-225deg);
animation: loading 2s infinite linear;
}
.loading2{
width:110px;
height:220px;
position:absolute;
overflow: hidden;
right:0;
top:0;
transform:rotate(180deg);
}
.loading2-content{
width:200px;
height:200px;
border:10px solid yellow;
border-radius: 50%;
border-bottom-color:transparent;
border-right-color:transparent;
transform:rotate(-225deg);
animation: loading2 2s infinite linear;
}
.number{
width:220px;
height:40px;
position:absolute;
top:90px;
text-align: center;
font-size: 30px;
font-weight:bold;
}
@keyframes loading{
0%{
transform: rotate(-225deg);
}
50%{
transform: rotate(-225deg);
}
100%{
transform: rotate(-45deg);
}
}
@keyframes loading2{
0%{
transform: rotate(-225deg);
}
50%{
transform: rotate(-45deg);
}
100%{
transform: rotate(-45deg);
}
}
</style>
</head>
<body>
<div class=”loading-container”>
<div class=”loading”>
<div class=”loading-content”></div>
</div>
<div class=”loading2″>
<div class=”loading2-content”></div>
</div>
<div class=”number” id=”number”>0%</div>
</div>
<script>
var number=document.getElementById(“number”);
function changeNumber(){
var text=number.innerText;
var newText=Number(text.replace(/%/, ”));
if(newText<100){
newText++;
}
else{
clearTimeout(timer);
}
number.innerText=newText+”%”;
var timer=setTimeout(changeNumber,20);
}
changeNumber();
</script>
</body>
</html>

而守望先锋的效果也正是这个的延伸的微调,具体可以看源码
####四、添加动画效果####
这里的动画效果没有什么技巧,只是不断的rotate微调而已,具体情况可以参照源码

<div class=”overwatch-container”>
<div class=”out-ring-container”>
<div class=”out-ring1″></div>
<div class=”out-ring2″></div>
</div>
<div class=”inner-ring-container”>
<div class=”inner-ring1″></div>
<div class=”inner-ring2″>
<div class=”inner-ring2-container”>
<div class=”inner-ring2-content”></div>
</div>
</div>
<div class=”inner-ring3″>
<div class=”inner-ring3-container1″>
<div class=”inner-ring3-container1-content”>
<div class=”inner-ring3-content1″></div>
</div>
</div>
<div class=”inner-ring3-container2″>
<div class=”inner-ring3-container2-content”>
<div class=”inner-ring3-content2″></div>
</div>
</div>
</div>
</div>
<div class=”inner-img”>
<div class=”inner-img-shelter”></div>
<div class=”inner-img-triangle”></div>
</div>
</div>

  • {
    margin: 0;
    padding: 0;
    }
    html {
    height: 100%;
    background: #282828;
    }
    .overwatch-container {
    width: 232px;
    margin: 50px auto;
    position: relative;
    }
    .out-ring1 {
    height: 220px;
    width: 220px;
    position: absolute;
    top: 6px;
    left: 6px;
    }
    .out-ring1::before, .out-ring1::after {
    content: “”;
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
    }
    .out-ring1::before {
    clip: rect(60px, 232px, 172px, 100px);
    transform: rotate(230deg);
    animation: out-ring1-before 3s cubic-bezier(0.34, 0.07, 0.68, 0.93)
    infinite
    }
    .out-ring1::after {
    clip: rect(80px, 232px, 152px, 100px);
    transform: rotate(120deg);
    animation: out-ring1-after 3s linear infinite
    }
    @keyframes out-ring1-before {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }
    @keyframes out-ring1-after {
    from {
    transform: rotate(120deg);
    }
    to {
    transform: rotate(480deg);
    }
    }
    .out-ring2 {
    position: absolute;
    top: 6px;
    left: 6px;
    }
    .out-ring2::before, .out-ring2::after {
    content: “”;
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
    }
    .out-ring2::before {
    clip: rect(105px, 232px, 127px, 100px);
    animation: out-ring2-before 3s cubic-bezier(0.34, 0.07, 0.68, 0.93)
    infinite;
    }
    .out-ring2::after {
    clip: rect(112px, 232px, 120px, 100px);
    animation: out-ring2-before 3s linear infinite reverse;
    }
    @keyframes out-ring2-before {
    from {
    transform: rotate(270deg);
    }
    to {
    transform: rotate(-90deg);
    }
    }
    @keyframes out-ring2-after {
    from {
    transform: rotate(120deg);
    }
    to {
    transform: rotate(480deg);
    }
    }
    .inner-img {
    width: 120px;
    height: 120px;
    border: 20px solid #B6B8C0;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 36px;
    }
    .inner-img::before {
    content: “”;
    height: 20px;
    width: 66px;
    position: absolute;
    background: #B6B8C0;
    bottom: 0;
    left: 0;
    transform: rotate(-45deg);
    transform-origin: left;
    }
    .inner-img::after {
    content: “”;
    height: 20px;
    width: 66px;
    position: absolute;
    background: #B6B8C0;
    bottom: 0;
    right: 0;
    transform: rotate(45deg);
    transform-origin: right;
    }
    .inner-img-shelter::before, .inner-img-shelter::after {
    content: “”;
    height: 4px;
    width: 21px;
    background: #282828;
    position: absolute;
    top: 15px;
    }
    .inner-img-shelter::before {
    left: -4px;
    transform: rotate(45deg);
    transform-origin: bottom right;
    }
    .inner-img-shelter::after {
    right: -4px;
    transform: rotate(-45deg);
    transform-origin: bottom left;
    }
    .inner-img-triangle::before {
    content: “”;
    width: 0px;
    height: 0px;
    border-width: 0px 0px 50px 20px;
    border-left-color: transparent;
    border-bottom-color: #B6B8C0;
    border-style: solid;
    position: absolute;
    top: 20px;
    left: 34px;
    }
    .inner-img-triangle::after {
    content: “”;
    width: 0px;
    height: 0px;
    border-width: 0px 20px 50px 00px;
    border-right-color: transparent;
    border-bottom-color: #B6B8C0;
    border-style: solid;
    position: absolute;
    top: 20px;
    right: 34px;
    }
    .inner-ring-container {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 16px;
    left: 16px;
    background: transform;
    }
    .inner-ring1 {
    width: 180px;
    height: 180px;
    border: 10px solid #F9D64A;
    border-radius: 50%;
    position: absolute;
    clip: rect(90px, 200px, 110px, 110px);
    animation: inner-ring1 3s infinite linear;
    z-index: 2;
    }
    @keyframes inner-ring1 {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(-360deg);
    }
    }
    .inner-ring3 {
    width: 200px;
    height: 200px;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    animation: inner-ring3 infinite 2s linear;
    }
    .inner-ring3-container1 {
    width: 100px;
    height: 200px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    }
    .inner-ring3-container1-content {
    width: 200px;
    height: 200px;
    position: absolute;
    animation: inner-ring3-container1-content 2s cubic-bezier(0, 0.5,
    0.5, 1) infinite;
    }
    .inner-ring3-content1 {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 10px solid #4D4C2D;
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: rotate(-45deg);
    animation: inner-ring3-content1 2s linear infinite;
    }
    @keyframes inner-ring3 {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }
    亚洲必赢官网 ,@keyframes inner-ring3-content1 {
    from {
    transform: rotate(-45deg);
    }
    35.5% {
    transform: rotate(-45deg);
    }
    50% {
    transform: rotate(135deg);
    }
    to {
    transform: rotate(135deg);
    }
    }
    @keyframes inner-ring3-container1-content {
    0% {
    transform: rotate(0deg);
    }
    64.5% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(180deg);
    }
    }
    .inner-ring3-container2 {
    width: 100px;
    height: 200px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    }
    .inner-ring3-container2-content {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: -100px;
    animation: inner-ring3-container2-content linear 2s infinite;
    }
    .inner-ring3-content2 {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 10px solid #4D4C2D;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
    animation: inner-ring3-content2 2s cubic-bezier(0.5, 0, 1, 0.5)
    infinite;
    }
    @keyframes inner-ring3-content2 {
    from {
    transform: rotate(45deg);
    }
    35.5% {
    transform: rotate(225deg);
    }
    to {
    transform: rotate(225deg);
    }
    }
    @keyframes inner-ring3-container2-content {
    0% {
    transform: rotate(0deg);
    }
    50% {
    transform: rotate(0deg);
    }
    64.5% {
    transform: rotate(180deg);
    }
    100% {
    transform: rotate(180deg);
    }
    }
    .inner-ring2 {
    width: 200px;
    height: 200px;
    z-index: 2;
    position: absolute;
    animation: inner-ring2 infinite 2s linear;
    }
    .inner-ring2-container {
    width: 100px;
    height: 200px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    }
    .inner-ring2-content {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 10px solid #F9D64A;
    border-bottom-color: transparent;
    border-right-color: transparent;
    z-index: 2;
    animation: inner-ring2-content infinite linear 2s;
    }
    @keyframes inner-ring2 {
    0% {
    transform: rotate(0deg);
    }
    50% {
    transform: rotate(90deg);
    }
    100% {
    transform: rotate(360deg);
    }
    }
    @keyframes inner-ring2-content {
    0% {
    transform: rotate(-205deg);
    }
    50% {
    transform: rotate(-135deg);
    }
    100% {
    transform: rotate(-205deg);
    }
    }

三角形的兑现

再看看小说先导的4个美术,你是否又发现了这么一个法则?每个三角形都是“小家碧玉”的,它们没有内容
既然,大家把上边这么些多姿多彩边框的矩形内容拿掉,看看会生出怎么样。

JavaScript

<style> .colored-border-empty-retangle { margin: 50px auto;
border-top: 40px solid coral; border-right: 40px solid lightblue;
border-bottom: 40px solid lightgreen; border-left: 40px solid
mediumpurple; } </style> <div
class=”colored-border-empty-retangle”></div>

1
2
3
4
5
6
7
8
9
10
<style>
    .colored-border-empty-retangle {
        margin: 50px auto;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-empty-retangle"></div>

呜,cool!右边和右手都是三角形了 耶!

亚洲必赢官网 18

为啥下面和上边仍旧梯形呢?那是因为块级元素默许会在页面上品位平铺。 清楚那点,让上面和下边也成为三角形就概括了,将元素的width属性设为0:

JavaScript

<style> .colored-border-empty-retangle { margin: 50px auto; width:
0; height: 0; border-top: 40px solid coral; border-right: 40px solid
lightblue; border-bottom: 40px solid lightgreen; border-left: 40px solid
mediumpurple; } </style> <div
class=”colored-border-empty-retangle”></div>

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    .colored-border-empty-retangle {
        margin: 50px auto;
        width: 0;
        height: 0;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-empty-retangle"></div>

现行光景左右4个边框都是三角形了。

亚洲必赢官网 19

万一大家决不4个三角形,也并非让它们凑一块,大家就只要1个三角,该如何做吗?
将别的3个边框的颜料设为透明色:

JavaScript

<style> .triangle-top, .triangle-right, .triangle-bottom,
.triangle-left { margin: 20px auto; width: 0; height: 0; border: 100px
solid transparent; } .triangle-top { border-top-color: coral; }
.triangle-right { border-right-color: lightblue; } .triangle-bottom {
border-bottom-color: lightgreen; } .triangle-left { border-left-color:
mediumpurple; } </style> <div
class=”triangle-top”></div> <div
class=”triangle-right”></div> <div
class=”triangle-bottom”></div> <div
class=”triangle-left”></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
<style>
    .triangle-top,
    .triangle-right,
    .triangle-bottom,
    .triangle-left {
        margin: 20px auto;
        width: 0;
        height: 0;
        border: 100px solid transparent;
    }
    
    .triangle-top {
        border-top-color: coral;
    }
    
    .triangle-right {
        border-right-color: lightblue;
    }
    
    .triangle-bottom {
        border-bottom-color: lightgreen;
    }
    
    .triangle-left {
        border-left-color: mediumpurple;
    }
</style>
<div class="triangle-top"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>

亚洲必赢官网 20

2.作为内容的半透明背景层

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

亚洲必赢官网 21

透明.png

绘画已毕

明亮了三角形的落到实处格局,那么下边4个美术完结起来就小Case了。

亚洲必赢官网 22

那4个美术分别是:旗帜,向右的双急迫箭头,气泡和丝带。

View
Demo

为了便于那二种图案的言传身教,大家先设定以下基础共通的体裁

CSS

* { font-family: simhei, sans-serif; box-sizing: border-box; } html {
font-size: 62.5%; } body { background-color: lightblue; } div { margin:
20px auto; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
* {
    font-family: simhei, sans-serif;
    box-sizing: border-box;
}
 
html {
    font-size: 62.5%;
}
 
body {
    background-color: lightblue;
}
 
div {
    margin: 20px auto;
}

兑现规范

规范图案是下半局部被啃掉了一口的长方形,这一口是个三角形。

亚洲必赢官网 23
基于以上文化,大家很自然地就能体悟落成方式,将border-bottom的颜色设置为透明的。

CSS

.flag { width: 0; height: 0; border: 2rem solid #FF6600;
border-top-width: 4rem; border-bottom-color: transparent;
border-bottom-width: 2rem; }

1
2
3
4
5
6
7
8
.flag {
    width: 0;
    height: 0;
    border: 2rem solid #FF6600;
    border-top-width: 4rem;
    border-bottom-color: transparent;
    border-bottom-width: 2rem;
}

兑现双真心箭头

双热切箭头则是由七个三角组成的

亚洲必赢官网 24

为了减小页面的HTML元素,大家可以只提供一个因素落成第1个三角,然后借助CSS3的伪类完毕第2个三角形。
第1个三角使用了针锋相对稳定,第2个三角使用了相对定位,使得第2个三角形可以紧挨着第1个三角。

CSS

.rds-arrow-wrapper { position: relative; width: 20em; text-align:
center; } .rds-arrow, .rds-arrow:after { display: inline-block;
position: relative; width: 0; height: 0; border-top: 1rem solid
transparent; border-left: 2rem solid #fff; border-bottom: 1rem solid
transparent; border-right: 2rem solid transparent; } .rds-arrow {
margin-left: 1rem; } .rds-arrow:after { content: “”; position: absolute;
left: 100%; top: -1rem; bottom: 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
.rds-arrow-wrapper {
    position: relative;
    width: 20em;
    text-align: center;
}
 
.rds-arrow,
.rds-arrow:after {
    display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border-top: 1rem solid transparent;
    border-left: 2rem solid #fff;
    border-bottom: 1rem solid transparent;
    border-right: 2rem solid transparent;
}
 
.rds-arrow {
    margin-left: 1rem;
}
 
.rds-arrow:after {
    content: "";
    position: absolute;
    left: 100%;
    top: -1rem;
    bottom: 0;
}

必要小心的是,箭头方向是向右的,但在CSS里面是由此border-left的颜色来决定的。

心想事成气泡

气泡是我们广大的一种图案,它是由一个三角和一个长方形组成的。

亚洲必赢官网 25

是因为三角形是坐落长方形前边的,所以我们运用:before伪类,并设置相对定位。

CSS

.bubble { position: relative; background-color: #33AAEE; width: 10rem;
height: 3rem; font-size: 2rem; line-height: 3rem; color: #FFF;
text-align: center; } .bubble:before { position: absolute; content: “”;
right: 100%; top: 1rem; width: 0; height: 0; border-top: 0.6rem solid
transparent; border-right: 0.6rem solid #33AAEE; border-bottom: 0.6rem
solid transparent; border-left: 0.6rem solid transparent; } .bubble
.text { display: inline-block; }

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
.bubble {
    position: relative;
    background-color: #33AAEE;
    width: 10rem;
    height: 3rem;
    font-size: 2rem;
    line-height: 3rem;
    color: #FFF;
    text-align: center;
}
 
.bubble:before {
    position: absolute;
    content: "";
    right: 100%;
    top: 1rem;
    width: 0;
    height: 0;
    border-top: 0.6rem solid transparent;
    border-right: 0.6rem solid #33AAEE;
    border-bottom: 0.6rem solid transparent;
    border-left: 0.6rem solid transparent;
}
 
.bubble .text {
    display: inline-block;
}

心想事成丝带

丝带的兑现则有些复杂一些,可是大家可以将它拆分成3个部分:

  1. 一个出示文字的长方形
  2. 反正两侧的耳朵(被啃了一口的长方形)
  3. 在江湖用于彰显阴影的七个小三角形

亚洲必赢官网 26

第1步:达成丝带主体长方形

CSS

.ribbon { position: relative; width: 10rem; height: 3rem; padding:
0.7rem 0; font-size: 1.6rem !important; color: #fff; text-align:
center; background: #ff0066; }

1
2
3
4
5
6
7
8
9
10
.ribbon {
    position: relative;
    width: 10rem;
    height: 3rem;
    padding: 0.7rem 0;
    font-size: 1.6rem !important;
    color: #fff;
    text-align: center;
    background: #ff0066;
}

亚洲必赢官网 27

第2步:达成丝带左右两侧的耳根

:before伪类落成左耳朵,:after伪类达成右耳朵

CSS

.ribbon:before, .ribbon:after { content: “”; position: absolute;
display: block; bottom: -0.6rem; border: 1.5rem solid #ff0066; z-index:
-1; } .ribbon:before { left: -2.4rem; border-right-width: 1.5rem;
border-left-color: transparent; box-shadow: 1px 1px 0 rgba(176, 102,
166, 0.8); } .ribbon:after { right: -2.4rem; border-left-width: 1.5rem;
border-right-color: transparent; box-shadow: 0 1px 0 rgba(176, 102, 166,
0.8); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.ribbon:before,
.ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -0.6rem;
    border: 1.5rem solid #ff0066;
    z-index: -1;
}
 
.ribbon:before {
    left: -2.4rem;
    border-right-width: 1.5rem;
    border-left-color: transparent;
    box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8);
}
 
.ribbon:after {
    right: -2.4rem;
    border-left-width: 1.5rem;
    border-right-color: transparent;
    box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8);
}

亚洲必赢官网 28

第3步:完毕阴影

CSS

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { content:
“”; position: absolute; display: block; border-style: solid;
border-color: #bf004c transparent transparent transparent; bottom:
-0.6rem; } .ribbon .ribbon-content:before { left: 0; border-width:
0.6rem 0 0 0.6rem; } .ribbon .ribbon-content:after { right: 0;
border-width: 0.6rem 0.6rem 0 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #bf004c transparent transparent transparent;
    bottom: -0.6rem;
}
 
.ribbon .ribbon-content:before {
    left: 0;
    border-width: 0.6rem 0 0 0.6rem;
}
 
.ribbon .ribbon-content:after {
    right: 0;
    border-width: 0.6rem 0.6rem 0 0;
}

HTML代码:

XHTML

<div class=”ribbon”> <span
class=”ribbon-content”>金卡会员</span> </div>

1
2
3
<div class="ribbon">
    <span class="ribbon-content">金卡会员</span>
</div>

最后效果:

亚洲必赢官网 29

页面达成

有上述的学识基础,已毕本文起头的宏图图就较为不难了。
鉴于代码较长,我就不贴出来了,请各位直接到GitHub上查看那么些demo吧。

View
Demo

总结

读完以上内容,是不是认为已毕那些图案变得很简短了?是还是不是深感很酷?现在你能够叫自己为大爷了。
三角形的选拔情形极度之多,你尽可以表达您的设想去贯彻它们!

2 赞 20 收藏 2
评论

亚洲必赢官网 30

网站地图xml地图