CSS3兑现柱状图的3D立体动漫效果,HTML5语法底蕴学

2020-01-26 作者:网站首页   |   浏览(131)

时间: 2019-06-02阅读: 262标签: 效果

1.行间样式
给单独的标签添加样式.
<div style="width:100px; height:100px; background-color:red;"></div>
优点:比较方便可以即时的添加属性。
缺点:修改属性非常麻烦、需要一个个去修改。

这篇文章所实现的动画效果起源于一个小小的想法,这个想法来自于另一个网站的一篇文章,它介绍了如何在网页中使用CSS、图片和JavaScript创建立体的柱状图。在阅读了那篇文章之后,我想挑战一下,尝试使用纯CSS来实现相同的效果。一开始的难点在于创建一个六面半透明的立方体,而后面的难点在于如何创建一个完整的带有动画效果的3D柱状图。下面,我们就一起来看一下如何解决这些难点。

2.内联样式表
<style>
div{ <!--选择器跟{}符号 属性写在里面-->
}
</style>
优点:针对当前HTML文件有效。
缺点:多页面修改时繁琐困难。

让我们先列举一些要实现的要求,我们所实现的柱状图应该是:

3.外联样式表
<head>
<link rel="stylesheet" href="xx.css"/>
</head>

背景独立(即柱状图与背景互不影响)自适应的(柱子数量的多少不会影响布局)可缩放(如矢量图一样)易于定制(颜色、尺寸和比例)

边框:
<style>
div{
width:400px;
height:400px;
border:1px solid red;
}
</style>
<!--
边框组成:
1、边框的粗细 1px;
2、边框的样式 solid(实线); dashed(虚线);
3、边框的颜色 red;
边框的方向:
top right bottom left
上右下左 可以单独设置边框方向和属性
改变某一个方向边框的做法:
border-top-color:red;
border-top-style:
border-top-width:
边框的形状:非矩形
边框画三角形实例:
首先设置边框宽度,背景色跟背景一致(假如背景为白色)。
border:20px solid white
然后设置边框某一方向样式(设置TOP为向下三角形)颜色,为三角形颜色。
border-top-color:red;
以上为红色三角形。
设置某一方向样式颜色会生成方向相反的三角形。
-->
<body>
<div></div>
</body>

计划是任何项目中最重要的一个部分。所以我们要先制定一个计划。

边框练习的步骤及需求.

在实际编码之前,我通常会列出项目中我会遇到的潜在挑战和解决这些挑战的方案,然后重复这个过程,直到我得到一个看起来可以执行的策略的东西。下面是我为这个项目提出的挑战列表和解决方案:

1.先分析设计图的结构.
2.根据所分析的结构,进行结构编码.
3.根据所书写的结构,进行CSS编码.
4.利用PS工具,对设计图上的模块进行测量以及颜色的拾取.
5.样式添加.

挑战1 - 带有可伸缩内核的柱子

background 背景
background-color 背景颜色
颜色英文关键字
RGB
十六进制
background-image 背景图
背景图默认铺满整个容器大小
background-repeat
背景是否重复
no-repeat
不重复
repeat-x;
X轴方向横向平铺
repeat-y;
Y轴方向纵向平铺
repeat;
XY都重复
background-position:X Y;
背景图位置
具体数值:
X轴:left right center
Y轴:top bottom center
当第二个Y轴属性值没有填写,默认居中。
background-attachment: fixed;
背景图是否滚蛋
fixed 固定在浏览器可视区域
scroll 跟随滚动条滚动
background
不分属性书写顺序的
颜色相关 图片相关

我们知道:

<!--内容:
<img src="url">这样的图片链接样式会撑开容器宽高
背景不会占用容器宽高 -->

一个柱状图是由6个面组成的立体图形这个柱状图的内核是可以垂直伸缩的,并且有一个选项可以隐藏它

切图:
1、头部区域(第一个块)切一张完整的图片
2、内容区域里的每一个小块需要有ICO并且还有背景颜色

所以,我们需要:

文字样式:
font-weight 文字加粗
bold 加粗
normal 正常

一个div,生成柱状图的三个面(背部、底部、左侧)一个div,生成柱状图的另三个面(正面、顶部、右侧)一个div,生成内核柱体的三个面,与上面的第二个div类似,但是它的z-index值要小一个div,作为容器,用于定位以上的三个组件,并且在右下角实现一个实色的背景一个div,带有overflow: hidden的容器,用于内核柱体的高度为0时,隐藏它。

font-style 文字倾斜
italic斜体

总共有五个div。

font-size 文字大小

你可能想知道为什么我们需要两个容器?嗯,这是一个不好解释的问题,但我会尝试着说明清楚。

font-family 字体

每个柱体我们需要至少一个容器(以保证前三个div的位置),由于我们的柱体内核是可伸缩的,所以我们使用百分比来操纵内核的高度,这就要求容器的高度等于条形图Y轴的高度。

line-height 行高 文字在一行里面所占用的位置

这看起来很好,但是,有另外一个问题,应该有一个选项可以隐藏移动中的内核,这意味着它应该“低于柱体”并且隐藏。你可能会说有一个解决方法

height:400px;
line-height:400px;
当行高的值与容器高度一致时 文字会垂直居中显示

  • overflow: hidden,是的,但是它不适用于这里的容器,因为它的高度要比实际的柱体高度短,这就是我们为什么要添加另一个容器的原因。

多行文字测量行高的方法:
1、确认文字大小
2、确认两行文字之间的空隙大小
3、空隙大小除以2,得出来的值就是每行文字的上下的空隙大小。
3.1当行高为奇数时,那么文字的上方要比下方少一个像素。
3.2当行高为偶数时,文字上下的空隙一致。
4.通过辅助线测量多行文字的行高。

希望我说清楚了,下面我们继续。

文字的复合样式:
font:bold italic 26px/30px "微软雅黑";
font复合样式需要注意书写顺序
font: font-style | font-weight | font-size/line-height | font-family

挑战2 - 坐标轴

文本设置:
color
文字颜色
text-align
文本对齐(显示)方式
left(默认值)
right(右边)
center(中间)
text-indent
首行缩进
em 是根据字体大小来计算的 不管文字怎么变
1em = 等于始终缩进当前文字的大小
text-decoration 文本修饰
underline 下划线
letter-spacing 10PX 文本间距10个像素
word-spacing 单词的间距(以空格判断文字是否为单词)
white-spacing 强制不换行
nowrap 不换行
normal 正常
测量文字大小时、最好是使用从上到下的方式去测量。(左右会有缝隙)
一个空格有多大?
宋体字体下文字大小的一半
1.模块的文字、单词间距、文字行高要与设计图统一
2.思考题:每一行的前方粉色带三角的区域如何实现

坐标轴应该:

padding内距填充
边距样式
padding 内边距
padding-top 上边内边距
padding-right 右边内边距
padding-bottom 下边内边距
padding-left 右边内边距

是一个三维立体坐标轴,它包含3个面(背景面,X轴面,Y轴面)背景独立自适应柱体的数量和属性(width,height等)外侧有X轴与Y轴的文字标签

padding 内填充
注意:设置padding后回撑大容器的大小
padding填充可以上右下左分别设置(按照顺时针方向)
四个方向顺序 top right bottom left

所以,我们需要:

padding复合写法:
只有一个属性值时:4个方向都是一个值
设置两个属性值时: 第一个属性值设置的是上下两个方向
第二个属性值设置的是左右两个方向。
设置三个属性值时: 第一个属性值设置的是上边一个方向。
第二个属性值设置是左右两个方向。
第三个属性值设置的是下边一个方向。
margin 外边距
标签与标签之间的间隔(距离)
margin复合写法:
只有一个属性值时:4个方向都是一个值
设置两个属性值时: 第一个属性值设置的上下两个方向
第二个属性值设置的左右两个方向
设置三个属性值时: 第一个属性值设置的是上边一个方向
第二个属性值设置的是左右两个方向
第三个属性值设置的是下边一个方向
margin遗留的问题:
1.margin-top传递的问题
2.margin上下叠压
1.还使用margin,可以将某一个元素方向设置成预想的值。取最大margin值。

一个无序列表X轴标签的每个列表项内有一个span元素每个列表项中有一个柱体Y轴标签内包含一个无序列表

盒模型
盒子大小=border padding width/height
盒子宽度=左border 左padding 右padding 右border
盒子高度=上border 上padding 下padding 下border 盒模型的大小:
border(左右) padding(左右) width/height
margin不占盒子里大小
CSS常用标签
a 超链接
伪类 给元素添加特殊的效果
:link 未访问过的链接初始颜色
:visited 访问过后的链接颜色
:hover 鼠标移入(悬停)
:active 鼠标按下时链接的颜色
设置顺序 L、V、H、A

实现

span标签区分样式
<header>(页眉)
主要用于页面头部的信息介绍,可用于板块头部
</header>
<nav>
导航 包含链接的一个列表
<nav><a href="#">链接</a><a href="#">链接</a></nav>
</nav>
<footer>
页脚 页面的底部和模块的底部
<footer>
<section>
页面的板块 用于划分页面上的不同区域或者划分文章里不同的节
<section>
<article>
用来在页面中表示一套结构完整且独立的内容部分
</article>
<aside>
元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组。以及
</aside>
<time>
用来表现时间或日期
</time>

现在我们有了一个总体的计划,让我们把它转换成代码。

常用标签
<h1>Logo</h1> 最大 权重最高
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>标题</h6> 一层层走下来

请注意,文章中的代码没有写浏览器前缀。在实际的项目中请不要省略。

<p>段落</p>
<strong>强调加粗</strong>
<em>强调斜体</em>

挑战1 - 带有可伸缩内核的柱子

<ul>·无序列表</ul>
<ol>1.有序列表</ol>
<ul>
<li>ul的子集下一级标签只能是li</li>
</ul>

div  div  div /div div 50/div div /div /div/div

<ol>
<li>ol的子集下一级标签只能是li</li>
</ol>

让我们再次回顾每个元素的用途:

<dl>自定义列表</dl>
<dl>
<dt>自定义列表title</dt>(DL标签对只允许有一个)
<dd>自定义列表的列表项(信息)</dd>(可以有多个)
</dl>

bar-wrapper – 当.bar-inner滑动到柱体的下方时隐藏它bar-container – 作为.bar-foreground, .bar-inner, .bar-foreground定位的参考元素,并设置底角的背景颜色bar-background – 生成柱状图的三个面(背部、底部、左侧)bar-inner – 最重要的部分 – 柱子内核bar-foreground – 生成柱状图的另三个面(正面、顶部、右侧)

<mark>标记</mark>

首先,让我们设置容器的样式。

特殊的单标签img
img 图片
img src="xx/xx.jpg"路径

/* Bar wrapper容器 - 当内核低于柱体高度时隐藏内核,必需的 */.bar-wrapper { overflow: hidden;}/* Bar container容器 - 这家伙是柱形图里真正的家长——子元素都是相对于它定位的。 */.bar-container { position: relative; margin-top: 2.5em; width: 12.5em;}/* 右下角的小块 - 确保内核向下滑动时右下角被“切割” */.bar-container:before { content: ""; position: absolute; z-index: 3; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 2.5em 2.5em; border-color: transparent transparent rgba(183,183,183,1);}

标签样式初始化
css reset 原则
但凡是浏览器默认的样式,都不要使用
因为每个浏览器下标签的默认样式可能会不一致的情况(兼容性)。
人为的将所有样式全部统一(清楚),再根据实际情况(设计稿)进行设置
那些样式是需要重置的???
与盒模型相关的样式
border
margin
padding
标签特有的样式
ul>li
ol>li
h1,h2,h3,h4,h5,p,ul{
style...
}
群组选择器

请注意,我们将.bar-container的宽度设置为12.5em。这个数字是柱体的正面和右侧宽度的总和-在我们的示例中,它是10 2.5=12.5。

书写原则:
用到什么标签就清楚所用标签的默认样式。
建议不要直接将所有标签全部加上。
不要将所有标签全部统一设置一致的reset,需根据标签默认样式特征来分类设置。

我们还使用border属性来创建三角形,并将其放置在 .bar-container的右下角,以确保内核的侧边在垂直移动时能被“切割”。我们使用:before伪类来生成这个元素。

id选择器: 当前页面唯一使用的标识、类似身份证,不要写多个。
<div id="box"></div>
<style>
#box{}
</style>

下面我们来设置.bar-background:

类选择器:.id名称 可以是分段class姓名加在同一个
<div class="box bgc"></div>
<style>
.(box)class name{}
.bgc{}
</style>

/* 背面 */.bar-background { width: 10em; height: 100%; position: absolute; top: -2.5em; left: 2.5em; z-index: 1;}.bar-background:before,.bar-background:after { content: ""; position: absolute;}/* 底面 */.bar-background:before { bottom: -2.5em; right: 1.25em; width: 10em; height: 2.5em; transform: skew(-45deg);}/* 左后面 */.bar-background:after { top: 1.25em; right: 10em; width: 2.5em; height: 100%; /* 仅倾斜Y轴 */ transform: skew(0deg, -45deg);}

yzc216亚洲城,标签选择器:当前页面上所有标签名为XXX的元素
div{}

如你所见,我们将.bar-background向上和向右移动2.5em。当然,我们把左后面和底面倾斜45度。请注意,:after伪元素中将第一个倾斜值设置为0deg,第二个设置为-45度,这样只倾斜元素的Y轴。

群组选择器:用逗号分隔,被逗号分隔的元素(选择器)全部套用统一的样
式。
p,h1,div{}

接着来设置.bar-foreground:

包含选择器:我想找到box子级的div 目标父级元素 目标元素 空格-代表下一级(语法)
<style>
.box div{}
</style>
<div class="box">div1
<div>div2</div>
</div>

/* 前面 */.bar-foreground { z-index: 3; /* 在 .bar-background 和.bar-inner 之上 */}.bar-foreground,.bar-inner { position: absolute; width: 10em; height: 100%; top: 0; left: 0;}.bar-foreground:before,.bar-foreground:after,.bar-inner:before,.bar-inner:after { content: ""; position: absolute;}/* 右前面 */.bar-foreground:before,.bar-inner:before { top: -1.25em; right: -2.5em; width: 2.5em; height: 100%; background-color: rgba(160, 160, 160, .27); transform: skew(0deg, -45deg);}/* 前面 */.bar-foreground:after,.bar-inner:after { top: -2.5em; right: -1.25em; width: 100%; height: 2.5em; background-color: rgba(160, 160, 160, .2); transform: skew(-45deg);}

*通配符: 找到页面上符合规则的所有元素
body *{}
!!!不建议使用通配符

这里没什么新鲜的,一切都和.bar-background的样式一样,只是方向不同。

优先级 代码执行生效的顺序
选择器优先级:
style>id>class>类型选择>*
行间样式>id选择器>类选择器>标签选择器

其中,部分的样式同时应用在了.bar-foreground和.bar-inner元素上,因为它们的样子是完全相同的。

行间样式 ¥1000
id选择器 ¥100
类选择器 ¥10
标签选择器 ¥1
价格越高权重越高

好了,下面我们继续设置内核的样式。

块元素:
1、默认独占一行
2、没有宽度时、默认撑满一行
3、支持所有CSS命令。

.bar-inner { z-index: 2; /* 在.bar-background的上面 */ top: auto; /* 重置 top属性 */ background-color: rgba(5, 62, 123, .6); height: 0; bottom: -2.5em; color: transparent; /* 隐藏文字 */ transition: height 1s linear, bottom 1s linear;}/* 右面 */.bar-inner:before { background-color: rgba(5, 62, 123, .6);}/* 上面 */.bar-inner:after { background-color: rgba(47, 83, 122, .7);}

内嵌(内联、行内)元素的特征:
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析

好了,柱体的样式就设置好了,接下来我们来看坐标轴。

块元素和内联元素转换
display:inline 显示为内联
使行块属性标签具备内联元素的特性
display:block 显示为块
使内联元素具备块属性标签的特性
display只是将标签转换为页面中显示的类型
display不会改变标签的本质(伪娘本体还是男性、只是暂时具备女性特征同理)

挑战2 - 坐标轴

选择器的集体声明:
一次性选择多个标签,不同的标签之间用“,”分开。
比如
h1,h2,h3,h4,p,div{}
无论什么样的选择器:标签选择器,ID选择器,类选择器.只要是选择器,有公共的CSS代码就可以使用选择器的集体声明.
精简案例:
#header{font-size:14px; background:#ccc}
div{font-size:14px; width:960px;}
.blue{font-size:14px; color:#009;}
.h1{font-size:14px; font-weight:normal;}
可以精简font属性部分,写成以下:
#header,div,.blue,.h1{font-size:14px;}
#header{background:#ccc;}
div{width:960px;}
.blue{color:#009;}
.h1{font-weight:normal;}
【选择器的嵌套】
#div1 p a{color:#900;}/*意思是在ID为DIV1内的P标签的链接a标签的文字颜色是#900*/
这样好处不需要再单独为ID为DIV1内的P标签下面的a标签单独定义class或者id类,简化CSS代码。

ul  li span2011/span -- 此处显示柱状图图的HTML标记 -- /li li span2012/span -- 此处显示柱状图图的HTML标记 -- /li li ul  lispan25%/span/li lispan50%/span/li lispan75%/span/li lispan100%/span/li /ul /li/ul

如您所见,我们在项目中使用无序列表和span元素来定位X轴和Y轴标签。

/** 坐标轴容器 **/.graph-container { position: relative; display: inline-block; padding: 0; list-style: none; /* 去除列表元素自带的小黑点 */ /* 背景 */ background-image: linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%); background-repeat: no-repeat; background-position: 0 -2.5em;}

这里有一个小点,我们使用线性渐变填充容器背景并将其提升2.5em,为什么?因为坐标轴的底端(我们将在下一个样式中设置)高度是2.5em。而且坐标轴倾斜了45度,所以右下角有一个空白区域。

坐标轴的X轴样式:

/* X轴 */.graph-container:before { position: absolute; content: ""; bottom: 0; left: -1.25em; /* 倾斜会将它向左推,所以我们将它向相反的方向移动一点。 */ width: 100%; /* 确保它和整个组件一样宽 */ height: 2.5em; background-color: rgba(183, 183, 183, 1); transform: skew(-45deg);}

我们把它倾斜45度,然后向左移动一点,以确保它的位置正确。

坐标轴的Y轴样式:

/* Y轴 */.graph-container:after { position: absolute; content: ""; top: 1.25em; /* 倾斜会将其向上推,因此我们将其向下移动一点。 */ left: 0em; width: 2.5em; background-color: rgba(28, 29, 30, .4); transform: skew(0deg, -45deg);}

这里没什么特别的。一样将元素倾斜45度,然后向下推一点,以便正确定位。

坐标轴的基本设置就是这些,接下来我们继续设置列表项里面的样式:

.graph-container  li { float: left; /* 水平排列 */ position: relative; }.graph-container  li:nth-last-child(2) { margin-right: 2.5em;}/* X轴的文字标签 */.graph-container  li  span { position: absolute; left: 0; bottom: -2em; width: 80%; text-align: center; font-size: 1.5em; color: rgba(200, 200, 200, .4);}

这里有两个要注意的点。首先,我们使用浮动将柱体水平排列。通常情况下都应该非常小心地使用浮动,它会带来高度塌陷等布局问题。所以,在这里你可以尝试变为设置display:inline-block来实现。

第二,我们在最后一个柱体上添加了一些右边距。这样我们就可以确保给坐标轴底部留出足够的空间,试着去掉它,你就会明白我的意思。

OK,我们就快完成了。最后要做的是添加Y轴的文字标记。

/* 文字标记的容器 */.graph-container  li:last-child { width: 100%; position: absolute; left: 0; bottom: 0;}/* Y轴文字标记列表 */.graph-marker-container  li { position: absolute; left: -2.5em; bottom: 0; width: 100%; margin-bottom: 2.5em; list-style: none;}/* Y轴线条常规样式 */.graph-marker-container  li:before,.graph-marker-container  li:after { content: ""; position: absolute; border-style: none none dotted; border-color: rgba(100, 100, 100, .15); border-width: 0 0 .15em; background: rgba(133, 133, 133, .15);}/* Y轴侧线 */.graph-marker-container  li:before { width: 3.55em; height: 0; bottom: -1.22em; left: -.55em; z-index: 2; transform: rotate(-45deg);}/* Y轴背景线 */.graph-marker-container li:after { width: 100%; bottom: 0; left: 2.5em;}/* Y轴文本标签 */.graph-marker-container span { color: rgba(200, 200, 200, .4); position: absolute; top: 1em; left: -3.5em; width: 3.5em; font-size: 1.5em;}

如您所见,我们将文字标记容器的宽度设置为100%,使得背景线能够覆盖整个坐标轴,使用虚线边框设置Y轴线条的样式并定位span元素,使文字标签位于坐标轴的外侧。使用:before和:after伪元素,可以减少HTML的代码量,让页面保持干净。

到这里,我们已经完成了柱状图的所有样式设置,但是我们缺少一些重要的变量——大小、颜色和条形填充值!上面说过我们的图表是可定制的,所以,我决定不把变量和其他代码混合在一起,这样你就可以更方便的自定义它们了。

/**************** * 尺寸 * ****************/ /* 图表的整体大小 */.graph-container,.bar-container { font-size: 8px;}/* 柱体的高度 */.bar-container,.graph-container:after,.graph-container  li:last-child { height: 40em;}/**************** * 间距 * ****************//* 柱体的间距 */.graph-container  li .bar-container { margin-right: 1.5em;}/* 第一个柱体的左边距 */.graph-container  li:first-child { margin-left: 1.5em;}/* 最后一个柱体的右边距 */.graph-container  li:nth-last-child(2) .bar-container { margin-right: 1.5em;}/**************** * 颜色 * ****************//* 柱体的背面颜色 */.bar-background { background-color: rgba(160, 160, 160, .1);}/* 柱体的底面颜色 */.bar-background:before { background-color: rgba(160, 160, 160, .2);}/* 柱体的左后面颜色 */.bar-background:after { background-color: rgba(160, 160, 160, .05);}/* 柱体的正面颜色 */.bar-foreground { background-color: rgba(160, 160, 160, .1);}/* 内核的颜色 */.bar-inner,.bar-inner:before { background-color: rgba(5, 62, 123, .6); }.bar-inner:after { background-color: rgba(47, 83, 122, .7); }/************************************* * 内核的高度 * *************************************/.graph-container  li:nth-child(1) .bar-inner { height: 25%; bottom: 0; }.graph-container  li:nth-child(2) .bar-inner { height: 50%; bottom: 0; }.graph-container  li:nth-child(3) .bar-inner { height: 75%; bottom: 0; }

在下载的源码中,您将无法找到这一部分代码,因为我在那里做了一些更有趣的事情——我使用了单选按钮让您在不修改代码的情况下使用变量。但是,如果您只需要定制一个静态图形,那么就从上面获取代码片段,并根据您的喜好对其进行定制。

总结让我们回顾一下文章中介绍的一些CSS规范/技术。

transform:skew()和transform:rotate()用于倾斜和旋转元素,它们组合起来使元素模拟产生三维立体的效果。:before和:after伪元素可以保持HTML标记相对干净:nth-last-child()和:not是针对特定列表项的伪类,可以避免向HTML中添加额外的类/id。linear-gradient和background-position一起使用可以实现背景的部分填充rgba()可以实现具有透明度的颜色border属性可以创建三角形形状原文来自:-3d-bar-chart-with-css3/翻译来自:

本文由yzc216亚洲城发布于网站首页,转载请注明出处:CSS3兑现柱状图的3D立体动漫效果,HTML5语法底蕴学

关键词: yzc216亚洲城