菜单

CSS3新特征,绘制常见图形

2019年8月24日 - CSS/CSS3

CSS3新特色,绘制常见图形,css3新特征绘制

序言:近些日子备选做一个要好的网页,设计稿中程导弹航作者希图安排成矩形,也许有hover样式显示的矩形,个中有个别头像等等。在此以前除了画圆,好像真没认真画过任何图形,明天就画画我们常看到的多少个图形。

在此以前大家有不能缺少了然下哪些是伪成分(和它差异的,还也可能有贰个概念叫伪类,两个轻巧混淆),未有它画不成图形的。

a)伪成分:用来在剧情成分的左右插入额外的因素,之所以叫伪成分,就是它们根本就不在文书档案中生成,只好在外界可知,比如:你F12时,在右侧代码框中是否能够见到?

此间运用的两个伪成分  ①成分在此之前:before  ②成分之后:after

1)圆,没须要了,我们看看三角形

/* CSS */
.sanjiao {
        width: 0px;
        height: 0px;
        margin: 30px auto;
        position: relative;
        border: 100px solid transparent;
        border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/
        /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */
        border-right: 100px solid #5E5E5E;
        border-top: 100px solid #3C98D1;*/
    }


/* HTML */
<div class="sanjiao"></div>

2)圆柱

/* CSS */
.yuanzhu {
       position: relative;
       height: 200px;
       width: 50px;
       background: #5E5E5E;
       margin: 30px auto;
       z-index: 999 /* 这个层叠顺序要设置下 不然看到的圆柱顶部不美观 看着就不想圆柱了 */
    }

.yuanzhu:before {
    position: absolute;
    top: -10px;
    content: “”;
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: #A8A8A8;
    z-index: 99
  }

.yuanzhu:after {
    position: absolute;
    bottom: -10px;
    content: “”;
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: #5E5E5E;
    z-index: 9
  }

/* HTML */
<div class="yuanzhu"></div>

3)五角星

画五角星,大家要先明了浏览器多少个民用前缀后跟的体裁中”deg”表示的是旋转角度,例如“45deg”表示的正是顺时针旋转45度,负的就代表逆时针。

rotate了是transform的中间三个天性,表示2D筋斗,也正是二维旋转,它也是有三个维度旋转,transform再有另外多少个特点,能够去拜谒http://www.w3school.com.cn/cssref/pr\_transform.asp 它的几天性状,用的好,做出来的特效
逼格依旧挺高的

/* CSS */
.wujiaox {
         width: 0px;
         height: 0px;
         position: relative;
         margin: 30px auto;
         border: 100px solid transparent;
         border-bottom: 70px solid #5E5E5E;
         -webkit-transform: rotate(35deg);/* Safari和Chrome */
         -moz-transform: rotate(35deg);/* Firefox */
     -ms-transform: rotate(35deg);/* IE 9 */
     -o-transform: rotate(35deg); /* Opera */
  }

  .wujiaox:after {
      content: “”;
      width: 0px;
      height: 0px;
      display: block;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #5E5E5E;
      border-left: 100px solid transparent;
      position: absolute;
      top: 3px;
      left: -105px;
      -webkit-transform: rotate(-70deg);
      -moz-transform: rotate(-70deg);
      -ms-transform: rotate(-70deg);
      -o-transform: rotate(-70deg);
   }

  .wujiaox:before {
      content: “”;
      width: 0;
      height: 0;
      border-bottom: 80px solid #5E5E5E;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      top: -45px;
      left: -65px;
      -webkit-transform: rotate(-35deg);
      -moz-transform: rotate(-35deg);/* 逆时针旋转35度 */
      -ms-transform: rotate(-35deg);
      -o-transform: rotate(-35deg);
    }

/* HTML */
<div class="wujiaox"></div>

画五角星时,要注意,应当要安装二个content:””;
不然你是看不到伪类成分所显现出的样式的;多个伪类成分都要安装为相对定位,父成分设置相对.

4)聊天框

/* CSS */
      .chatBox {
                width: 200px;
                height: 50px;
                margin: 30px auto;
                background: #5E5E5E;
                border-radius: 5px;
                position: relative;
            }

            .chatBox:before {
                content: "";
                position: absolute;
                width: 0px;
                height: 0px;
                right: 100%;
                top: 15px;
                border-top: 8px solid transparent;
                border-right: 10px solid #5E5E5E;
                border-bottom: 8px solid transparent;
            }

/* HTML */
<div class="chatBox"></div> 

5)八卦图,其实正是一个大半圆+多个小圆构成的

/* CSS */
      .bagua {
                width: 96px;
                height: 48px;
                background: #eee;
                margin: 30px auto;
                border-color: #000000;
                border-style: solid;
                border-radius: 100%;
                border-width: 0.5px 0.5px 50px 0.5px;
                position: relative;
            }

            .bagua:before {
                content: "";
                border-radius: 100%;
                background: #FFFFFF;
                position: absolute;
                top: 50%;
                left: 0px;
                border: 18px solid #000000;
                width: 12px;
                height: 12px;
            }

            .bagua:after {
                content: "";
                border-radius: 100%;
                background: #000000;
                position: absolute;
                top: 50%;
                left: 50%;
                border: 18px solid #eee;
                width: 12px;
                height: 12px;
            }


/* HTML */
<div class="bagua"></div>

6)“砖石”图形

率先画三个直角梯形,再经过伪类成分在其下方画二个三角形

/* CSS */
      .zhuanshi {
                width: 50px;
                height: 0;
                border-style: solid;
                margin: 30px auto;
                border-width: 0 25px 25px 25px;
                position: relative;
                border-color: transparent transparent #5E5E5E transparent;
            }

            .zhuanshi:after {
                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 70px 50px 0 50px;
                border-color: #5E5E5E transparent transparent transparent;
                position: absolute;
                top: 25px;
                left: -25px;
            }

/* HTML */
<div class="zhuanshi"></div>

 

 

CSS3里还恐怕有相当的多话图形的秘籍措施,必要你逐级去研究,纵然非常少用到,但无聊时,拿来作画,依然挺风趣的.

 

http://www.bkjia.com/Javascript/1173005.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1173005.htmlTechArticleCSS3新特性,绘制常见图形,css3新特性绘制
前言:这段日子希图做多个投机的网页,设计稿中程导弹航小编希图设计成矩形,也许有hover样式浮现的矩形,…

/* CSS */
      .chatBox {
                width: 200px;
                height: 50px;
                margin: 30px auto;
                background: #5E5E5E;
                border-radius: 5px;
                position: relative;
            }

            .chatBox:before {
                content: "";
                position: absolute;
                width: 0px;
                height: 0px;
                right: 100%;
                top: 15px;
                border-top: 8px solid transparent;
                border-right: 10px solid #5E5E5E;
                border-bottom: 8px solid transparent;
            }

/* HTML */
<div class="chatBox"></div> 

交流群 : 192713488

/* CSS */
      .bagua {
                width: 96px;
                height: 48px;
                background: #eee;
                margin: 30px auto;
                border-color: #000000;
                border-style: solid;
                border-radius: 100%;
                border-width: 0.5px 0.5px 50px 0.5px;
                position: relative;
            }

            .bagua:before {
                content: "";
                border-radius: 100%;
                background: #FFFFFF;
                position: absolute;
                top: 50%;
                left: 0px;
                border: 18px solid #000000;
                width: 12px;
                height: 12px;
            }

            .bagua:after {
                content: "";
                border-radius: 100%;
                background: #000000;
                position: absolute;
                top: 50%;
                left: 50%;
                border: 18px solid #eee;
                width: 12px;
                height: 12px;
            }


/* HTML */
<div class="bagua"></div>
/* CSS */
.sanjiao {
        width: 0px;
        height: 0px;
        margin: 30px auto;
        position: relative;
        border: 100px solid transparent;
        border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/
        /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */
        border-right: 100px solid #5E5E5E;
        border-top: 100px solid #3C98D1;*/
    }


/* HTML */
<div class="sanjiao"></div>

CSS3里还也有非常多话图形的章程措施,必要你日渐去研讨,固然相当少用到,但无聊时,拿来作画,依旧挺有意思的.

序言:前段时间准备做叁个要好的网页,设计稿中程导弹航小编妄想安排成矩形,也可能有hover样式展现的矩形,个中有些头像等等。从前除了画圆,好像真没认真画过任何图形,今日就画画我们常看到的多少个图形。

.yuanzhu:after {
    position: absolute;
    bottom: -10px;
    content: “”;
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: #5E5E5E;
    z-index: 9
  }

5)八卦图,其实正是八个大半圆+三个小圆构成的

先是画贰个直角梯形,再通过伪类成分在其下方画叁个三角

a)伪成分:用来在剧情成分的上下插入额外的要素,之所以叫伪元素,就是它们根本就不在文书档案中生成,只好在外界可见,举例:你F12时,在右侧代码框中是还是不是能够见到?

rotate了是transform的当中叁个性质,表示2D转悠,相当于二维旋转,它也可能有三个维度旋转,transform再有其余几脾性格,能够去探视http://www.w3school.com.cn/cssref/pr_transform.asp 它的多少个特征,用的好,做出来的特效
逼格照旧挺高的

/* HTML */
<div class="yuanzhu"></div>

  .wujiaox:before {
      content: “”;
      width: 0;
      height: 0;
      border-bottom: 80px solid #5E5E5E;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      top: -45px;
      left: -65px;
      -webkit-transform: rotate(-35deg);
      -moz-transform: rotate(-35deg);/* 逆时针旋转35度 */
      -ms-transform: rotate(-35deg);
      -o-transform: rotate(-35deg);
    }

/* CSS */
.yuanzhu {
       position: relative;
       height: 200px;
       width: 50px;
       background: #5E5E5E;
       margin: 30px auto;
       z-index: 999 /* 这个层叠顺序要设置下 不然看到的圆柱顶部不美观 看着就不想圆柱了 */
    }

  .wujiaox:after {
      content: “”;
      width: 0px;
      height: 0px;
      display: block;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #5E5E5E;
      border-left: 100px solid transparent;
      position: absolute;
      top: 3px;
      left: -105px;
      -webkit-transform: rotate(-70deg);
      -moz-transform: rotate(-70deg);
      -ms-transform: rotate(-70deg);
      -o-transform: rotate(-70deg);
   }

2)圆柱

 

6)“砖石”图形

4)聊天框

这里运用的两个伪成分  ①成分从前:before  ②元素之后:after

 

1)圆,没供给了,大家看看三角形

/* CSS */
      .zhuanshi {
                width: 50px;
                height: 0;
                border-style: solid;
                margin: 30px auto;
                border-width: 0 25px 25px 25px;
                position: relative;
                border-color: transparent transparent #5E5E5E transparent;
            }

            .zhuanshi:after {
                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 70px 50px 0 50px;
                border-color: #5E5E5E transparent transparent transparent;
                position: absolute;
                top: 25px;
                left: -25px;
            }

/* HTML */
<div class="zhuanshi"></div>
/* CSS */
.wujiaox {
         width: 0px;
         height: 0px;
         position: relative;
         margin: 30px auto;
         border: 100px solid transparent;
         border-bottom: 70px solid #5E5E5E;
         -webkit-transform: rotate(35deg);/* Safari和Chrome */
         -moz-transform: rotate(35deg);/* Firefox */
     -ms-transform: rotate(35deg);/* IE 9 */
     -o-transform: rotate(35deg); /* Opera */
  }

画五角星时,要留心,应当要安装一个content:””;
不然你是看不到伪类成分所表现出的体制的;七个伪类成分都要设置为相对定位,父成分设置相对.

/* HTML */
<div class="wujiaox"></div>

画五角星,大家要先明了浏览器几个个人前缀后跟的体制中”deg”表示的是旋转角度,举例“45deg”表示的就是顺时针旋转45度,负的就代表逆时针。

.yuanzhu:before {
    position: absolute;
    top: -10px;
    content: “”;
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: #A8A8A8;
    z-index: 99
  }

3)五角星

 

在此从前我们有须求精通下何以是伪成分(和它差异的,还应该有四个概念叫伪类,两个轻巧模糊),未有它画不成图形的。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图