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

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的万丈设置为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>

此刻会浮现一个正方形,中间含有三个三角形
用css3写一个守望先锋的loading动画,三角形运用。相应要举办修改

美高梅开户网址 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地图