用Html标签和css来写一个花式流程图,先看这张已经完工的流程图,一个白色圆形,中心是文字,围绕它周围的是8个彩色的花瓣,花瓣中间有文字。另外圆环周围缺角的三角形部分分别对应的是花瓣的颜色。
难点分析:
1、如何div布局。要Html代码简洁,又要css好写,后期好修改。可以分为两部分,花瓣一部分,中心圆环一部分。
2、花瓣的形状以及定位。花瓣可以用圆角border-radius来实现圆角,position: absolute绝对定位以及transform: rotate旋转来给每个花瓣设定位置。
3、小三角形的画法。三角形的实现可以将元素的高宽设置为0,然后给其中的一边,比如border-left-color设置颜色,其他颜色为透明色。具体后面会讲解到。
分析完了以后好像也没有什么难点,那接下来就一步步完成:
一、整体居中
这是一个流程图,所以我就用拼音liucheng给他起个类名。
<div class="liucheng"> </div>
CSS样式表中将元素设置为绝对定位,高宽设置为600px,距离左边,顶部的距离为50%,再减去一半的距离值,这样就居中了。
.liucheng { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; margin-top: -300px; margin-left: -300px; }
二、画花瓣
花瓣的形状可以用圆形,也可以用椭圆形画。圆形基本上没有什么难点,设置一个高宽170px的正方形,再定义border-radius圆角属性为100%就可以画一个圆。那如果是画我们常见的花瓣形呢?用border-radius也能实现,略微调整一下各个方向的值。
width: 170px; height: 170px; border-radius: 0px 60% 50% 60%;
还可以再做一下微调,比如设置为border-radius: 0px 57% 21% 66%
接下来其他花瓣也用类似的方法画,但因CSS会用到transform属性的旋转值,花瓣上的文字也会跟着旋转,而且文字还会模糊不清晰。所以可用伪元素:after来画花瓣形状,这样就避免了文字也跟着旋转还不清晰的问题。
<ul class="circle"> <li class="a"></li> <li class="b"></li> <li class="c"></li> <li class="d"></li> <li class="e"></li> <li class="f"></li> <li class="g"></li> <li class="h"></li> </ul>
先把li默认的样式去掉,然后把花瓣高宽设置为170像素,绝对定位。接下来再分别把8个花瓣的top,right,bottom,left其中两个方向写出来。
.circle { list-style-type: none } .circle li { width: 170px; height: 170px; position: absolute; } .circle li.a { top: 4px; left: 128px; } .circle li.b { top: 3px; right: 129px; } .circle li.c { top: 119px; right: 5px; } .circle li.d { top: 288px; left: 425px; } .circle li.e { bottom: 25px; left: 301px; } .circle li.f { bottom: 24px; left: 128px; } .circle li.g { top: 288px; left: 4px; } .circle li.h { top: 121px; left: 5px; }
每个花瓣都是用绝对定位position: absolute 并且分别对元素设置颜色,再进行角度旋转。
.circle li:after { position: absolute; content: ""; width: 170px; height: 170px; border-radius: 0px 60% 50% 60%; } .circle li.a:after { background: #adca35; transform: rotate(202deg); } .circle li.b:after { background: #48b0c7; transform: rotate(247deg); } .circle li.c:after { background: #1e57a5; transform: rotate(294deg); } .circle li.d:after { background: #523f9b; transform: rotate(341deg); } .circle li.e:after { background: #da59a8; transform: rotate(21deg); } .circle li.f:after { background: #d92e5d; transform: rotate(68deg); } .circle li.g:after { background: #f67632; transform: rotate(112deg); } .circle li.h:after { background: #fdd23c; transform: rotate(158deg); }
最后再把花瓣上的文字加上,Html文档中我用到了section标签,注意标签section一定要有h标签,这是很多前端设计新手容易犯的错,其实我以前也这样,后面用W3C css验证才发现这个问题。
<ul class="circle"> <li class="a"><section><i>1</i><h3>客服沟通</h3></section></li> <li class="b"><section><i>2</i><h3>确定需求</h3></section></li> <li class="c"><section><i>3</i><h3>资料整理</h3></section></li> <li class="d"><section><i>4</i><h3>签订合同</h3></section></li> <li class="e"><section><i>5</i><h3>方案设计</h3></section></li> <li class="f"><section><i>6</i><h3>设计定稿</h3></section></li> <li class="g"><section><i>7</i><h3>程序部署</h3></section></li> <li class="h"><section><i>8</i><h3>网站运营</h3></section></li> </ul>
给section标签设置绝对定位,层叠顺序为数字9,目前在最上层。距离父元素顶部30%,距离左边30%。标签i会默认定义文字为斜体,所以这里也要将字体定义为normal标准字体。
.circle li section { position: absolute; z-index: 9; top: 30%; left: 30%; color: #fff; } .circle li section i { font-style: normal; /* 定义为normal标准字体*/ font-size: 20px; display: block; margin-bottom: 10px; text-align: center; } .circle li section h3 { font-size: 18px }
三、画圆
中心这个圆看起来有三层,但只要画一个中心圆就可以,其他可以用伪元素:before,:after。
<div class="big"></div>
首先画一个宽400px,高380px的圆,这个圆有一个半透明的效果,CSS3支持背景半透明的写法语法格式是:background: rgba(0,0,0,.5)。.5其实就是0.5,css里面通常简写就省略了0
.big { width: 400px; height: 380px; background: rgba(0,0,0,.1); border-radius: 100%; position: absolute; left: 100px; top: 100px; }
:before画一个宽270px,高260px的圆,定义边框为1px的灰色实线;:after为宽340px,高330px的圆形。
.big:before { content: ""; width: 270px; height: 260px; border: #e5e5e5 1px solid; position: absolute; left: 63px; top: 58px; border-radius: 100%; z-index: 1; background: #fff; } .big:after { content: ""; width: 340px; height: 330px; background: #fff; position: absolute; left: 30px; top: 24px; border-radius: 100%; }
四、画三角形
三角形实现方法:
1、高宽设置为0。
2、定义边框宽度,比如10px的实线,颜色透明。
3、定义一条边的颜色。
举例:
width: 0; height: 0; border: 10px solid transparent; border-left-color: #48b0c7;
可能有些人还不是很理解,接下来我设置一下其他边的颜色:
通过观察上图,当元素定义高宽为0时,设置其各边的属性值以及颜色,就可以轻松实现一个三角形了。接下来就把其他的三角形都一起画出来吧。
五、加上文字
这部分是最简单的,主要是定位,然后设置文字的字体大小,颜色,文字的上下边框。
<div class="text"> <h3>合作流程</h3> <p>COOPERATION <span>PROCESS</span></p> </div>
.text { position: absolute; z-index: 9; top: 37%; left: 27%; text-align: center; } .text h3 { font-size: 28px; margin-bottom: 20px; color: #a8aaba } .text p { color: #a8aaba; border-top: #d2d2da 1px solid; border-bottom: #d2d2da 1px solid; padding: 5px 0; }
最后实现的效果图如下:
开头部分说可以是花瓣形状的,那调整下花瓣,看看什么效果呢?
最后附上源码下载地址→https://www.tjcblog.com/hslct.html