CSS3新特性,绘制常见图形
2018-06-27 09:08:35来源:未知 阅读 ()
前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有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里还有很多话图形的方法方式,需要你慢慢去研究,虽然很少用到,但无聊时,拿来画画,还是挺有趣的.
交流群 : 192713488
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 2.CSS3选择器 2020-05-17
- 1.CSS3简介 2020-05-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash