细说css3的动画（3）统计条形图demo

最新推荐文章于 2021-11-23 11:33:54 发布
最新推荐文章于 2021-11-23 11:33:54 发布
阅读量258 收藏
点赞数
原文链接：http://www.cnblogs.com/wujianbufengsao/articles/6835898.html
版权

 

纯css3手工绘制动画形式的统计条形图demo，代码我已经做成动态的了，如下：

 

<html>  
<head>  
<title>example</title>  
<style>
/*外层模型*/
.example .border {
    margin:30px auto;
    padding-left:30px;
    padding-top:30px;
    padding-bottom:30px;
    width:300px;
    height:200px;
    border: 1px solid black;
}
/*纵坐标箭头*/
.arrow_lmk {
    transform:translate(-6px,-380px);
    width:1px;
    border-style: solid;
    border-top-width: 0;
    border-right-width: 6px;
    border-bottom-width: 10px;
    border-left-width: 6px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #000000;
    border-left-color: transparent;
}
/*横坐标箭头*/
.arrow_bmk {
    transform:translate(260px,-34px);
    width:1px;
    border-style: solid;
    border-top-width: 6px;
    border-right-width: 0;
    border-bottom-width: 6px;
    border-left-width: 10px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #000000;
}
/*x轴标尺文字最外层盒子*/
.example .border .cartogram_bmk {
    text-align:center;
    width:265px;
}
/*x轴标尺单个盒子*/
.example .border .cartogram_bmk .cartogram_bmk_sub {
    cursor:pointer;
    margin-top:4px;
    padding-top:4px;
    display:inline-block;
    width:26px;
    height:20px;
    font-size:10px;
    border-radius: 1em;
    
}
/*y轴标尺文字最外层盒子*/
.example .border .cartogram_lmk {
    text-align:center;
    transform:translate(-26px,-195px);
    width:26px;
    height:150px;
}
/*y轴标尺单个盒子*/
.example .border .cartogram_lmk .cartogram_lmk_sub {
    width:100%;
    height:25%;
    font-size:10px;
    color:#000000;
    border-bottom:1px solid #000000;
}
.example .border .cartogram_lmk .cartogram_lmk_sub:first-of-type {
    border-top:1px solid #000000;
}
/*最外层坐标线盒子*/
.example .border .cartogram {
    text-align:center;
    /*横纵坐标线长度*/
    width:260px;
    height:180px;
    border-bottom:1px solid #000000;
    border-left:1px solid #000000;
}
/*每个统计条形图的盒子*/
.example .border .cartogram .cartogram_sub {
    /*每个条形大小*/
    width:26px;
    height:150px;
    /*条形图上下移动*/
    transform:translateY(30px);
    /*横向排列显示*/
    display:inline-block;
    text-align:center;
}
.example .border .cartogram .cartogram_sub:not(:last-of-type),.example .border .cartogram_bmk .cartogram_bmk_sub:not(:last-of-type) {
    /*每个统计条间隔*/
    margin-right:4px;
}
/*animation自动画*/
.example .border .cartogram .cartogram_sub_animation {
    width:100%;
    height:100%;
    position: relative;
    overflow: hidden;
}
.example .border .cartogram .cartogram_sub_animation:before {
    content:"";
    position: absolute;
    right: 0;
    bottom: 0;
    top:50%;
    background: #2098D1;
    width: 80%;
    border-radius: .8em .8em 0 0;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
    cursor:pointer;
}
/* 下标阴影动画 */
.example .border .cartogram_bmk .cartogram_bmk_sub {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.example .border .cartogram_bmk .cartogram_bmk_sub:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.example .border .cartogram_bmk .cartogram_bmk_sub:hover, .example .border .cartogram_bmk .cartogram_bmk_sub:focus, .example .border .cartogram_bmk .cartogram_bmk_sub:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.example .border .cartogram_bmk .cartogram_bmk_sub:hover:before, .example .border .cartogram_bmk .cartogram_bmk_sub:focus:before, .example .border .cartogram_bmk .cartogram_bmk_sub:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
/* 统计条加宽动画 */
.example .border .cartogram .cartogram_sub_animation:before {
    border-width:2px;
    border-style:solid;
    border-color: #FFFFFF #FFFFFF transparent #FFFFFF;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: border;
    transition-property: border;
}
.example .border .cartogram .cartogram_sub_animation:hover:before {
    border-color: #FFFFFF #FFFFFF transparent #FFFFFF;
}
</style>
</head>  
<body>
<div class="text"></div>
<style>

</style>
<div class="example">
    <div class="border">
        <div class="cartogram"></div>
        <div class="cartogram_bmk"></div>
        <div class="arrow_bmk"></div>
        <div class="cartogram_lmk"></div>
        <div class="arrow_lmk"></div>
    </div>
</div>
<script>
    //创建图标dom
    var example = function() {};
    example.prototype = {
        createDiv : function(cnt_x,cnt_y,cls) {
            for(i=0;i<cnt_x;i++){
                //创建统计条dom
                var n = document.createElement('div');
                n.setAttribute('class',cls+'_sub '+cls+'_sub_'+(i+1));
                document.getElementsByClassName(cls)[0].appendChild(n);
                var n1 = document.createElement('div');
                n1.setAttribute('class',cls+'_sub_animation '+cls+'_sub_animation_'+(i+1));
                n.appendChild(n1);
                //创建x轴标尺dom
                var m = document.createElement('div');
                m.setAttribute('class',cls+'_bmk_sub '+cls+'_bmk_sub_'+(i+1));
                document.getElementsByClassName(cls+"_bmk")[0].appendChild(m);
            }
            for(i=0;i<cnt_y;i++){
                //创建y轴标尺dom
                var m = document.createElement('div');
                m.setAttribute('class',cls+'_lmk_sub '+cls+'_lmk_sub_'+(i+1));
                document.getElementsByClassName(cls+"_lmk")[0].appendChild(m);
            }
        },
        //创建伪类样式
        setCssVal : function(t) {
            s=document.createElement('style');
            s.innerText=t;
            document.body.appendChild(s);
        },
        //添加伪类样式key-to-value
        addCssVal : function(styleid,selector,key,value) {
            s=document.getElementById(styleid);
            if(!s){
                s=document.createElement('style');
                s.setAttribute('id',styleid);
            }
            s.innerText+=selector+"{"+key+":"+value+";}";
            document.body.appendChild(s);
        },
        //添加伪类样式string
        addCssValText : function(styleid,text) {
            s=document.getElementById(styleid);
            if(!s){
                s=document.createElement('style');
                s.setAttribute('id',styleid);
            }
            s.innerText+=text;
            document.body.appendChild(s);
        }
    }
    var aaa = new example();
    aaa.createDiv(8,4,'cartogram');
    var data = {"anim1":0.2,"anim2":0.4,"anim3":0.7,"anim4":0.3,"anim5":0.8,"anim6":0.53,"anim7":0.66,"anim8":0.45};
    var color = {"anim1":"#FF9797","anim2":"#DCB5FF","anim3":"#ACD6FF","anim4":"#BBFFBB","anim5":"#FFFFAA","anim6":"#FFBB77","anim7":"#CF9E9E","anim8":"#CDCD9A"};
    var word = {"anim1":"a","anim2":"b","anim3":"c","anim4":"d","anim5":"e","anim6":"f","anim7":"g","anim8":"h"};
    var style = "";
    for(i=1;i<=8;i++){
        style += ".example .border .cartogram .cartogram_sub_animation_"+i+":before {";
/*图形添加数字*/
        style += "content:'"+(100-data["anim"+i]*100)+"';"
        style += "font-size:10px;"
/*animation自动画 */
        style += "animation-name: _cartogram_"+i+";"
        style += "}";
        style += "@keyframes _cartogram_"+i+"{from{top:50%;}to{top:"+data["anim"+i]*100+"%}}";
/*x轴标尺背景颜色 */
        style += ".example .border .cartogram_bmk .cartogram_bmk_sub_"+i+" {";
        style += "background-color:"+color["anim"+i]+";}";
/*x轴标尺添加文字 */
        document.getElementsByClassName('cartogram_bmk_sub')[i-1].innerText = word['anim'+i];
/*y轴标尺添加文字 */
        if(i<=4){
            document.getElementsByClassName('cartogram_lmk_sub')[i-1].innerText = (100-25*(i-1))+"%";
        }
/*hover动画*/
        style += ".example .border .cartogram .cartogram_sub_animation_"+i+":hover:before {";
        style += "border-color: "+color["anim"+i]+" "+color["anim"+i]+" transparent "+color["anim"+i]+";}";
    }
    aaa.addCssValText("anmi-color-top",style);

</script>
</body>  
</html>  

 

 

补充一句，关于动态修改伪类的样式，我一直查不到有什么更方便的办法，所以只能另创建一个<style>的dom节点，然后通过id找到它，并用innerText往这个节点写入或重写样式，不过还挺好用的，如果有什么新的方法希望兄弟们不吝赐教哈~~

转载于:https://www.cnblogs.com/wujianbufengsao/articles/6835898.html

weixin_30687051
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3实现伸缩条形图.zip
07-03
css3伸缩条形图是一款纯css3实现的3D伸缩条形图效果。 css3实现伸缩条形图演示：                                                                 点击查看演示
html怎么做条形统计图,CSS 简单实现条形统计图
weixin_39668282的博客
06-04 1153
客户要求显示各类别条形统计图，使用框架或报表统计图工具过于复杂。下面是同事乐小琴同学实现的使用CSS 简单实现条形统计图。无标题文档.datetable{ width:500px;}.datetable label{ display:inline-block; width:150px; text-align:right; float:left;}.datetable ul,.datetable l...
css3数字统计,一款纯css3实现的数字统计游戏
weixin_34853926的博客
08-04 226
今天给大家分享一款纯css3实现的数字统计游戏。这款游戏的规则的是将所有的数字相加等于72。这款游戏的数字按钮做得很美观，需要的时候可以借用下。一起看下效果图：实现的代码。html代码:CSS Counter GamePick the numbers that add up to 72:6416-321284-8css3代码：body{counter-reset: sum;}#a:checked{...
44种动态/静态统计图（折线图）大集合基于html5 CSS3
12-03
44种统计图，什么网站统计，数据统计，动态折线图，静态图，饼状图，柱状图应有尽有，没有你想不到，只有你没看过的，基于html5，CSS3等技术，下载一次，受用一辈子！
html5+css3 统计图 条形 折线
07-17
使用 html5 和 css3 实现的数据统计图，包含条形图和折线图
细说CSS(CSS+CSS3)
06-14
**CSS（层叠样式表）**是Web开发中不可或缺的一部分，它用于定义HTML或XML（包括SVG、XHTML等）文档的呈现。...课程"细说CSS(CSS+CSS3)"将引导你全面掌握这些知识，为成为Web全栈开发者打下坚实基础。
细说CSS3中的选择符
12-11
**CSS3选择符详解** CSS3作为CSS的第三个主要版本，引入了一系列强大的选择符，极大地扩展了CSS2.1中的选择能力，使开发者能够更加精确地控制网页元素的样式。以下将详细介绍这些新选择符的功能和用法。 1. **子串...
11个html5+css3全屏遮罩导航菜单
06-05
这是一款使用html5 svg和css3制作的全屏遮罩导航菜单，这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕，可以说大小是以你的浏览器为准。默认是绿色背景，你完全可以换成其它颜色，这个不用我细说了吧。分别是：...
html5+css3 弹出遮罩层
09-22
这是一款使用html5 svg和css3制作的全屏遮罩导航菜单，这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕，可以说大小是以你的浏览器为准。默认是绿色背景，你完全可以换成其它颜色，这个不用我细说了吧。 请在现代...
css 统计,纯Css 3d统计图
weixin_39546312的博客
08-04 286
cssbody {overflow: hidden;margin: 0;height: 100vh;perspective: 65em;perspective-origin: 50% calc(50% - 24em);background: #000;}div {position: absolute;top: 50%;left: 50%;transform-style: preserve-3d;}...
CSS3实现漂亮的柱形图表
11-24
CSS3实现漂亮的柱形图表
HTML5/CSS3动态折线图表 图表数据切换动画
08-23
前面我们刚刚分享过一款很不错的HTML5/SVG折线图表，这次我们依然要来分享一款带超酷动画的HTML5/CSS3动态折线图表，图表数据会定时切换，图表数据在切换的时候有很酷的切换动画，感觉数据模拟非常真实。另外，更多的HTML5图表应用可以到HTML5图表栏目下查看。
IOS条形图、柱状图demo
02-19
一个非常不错IOS条形图、柱状图实例demo，封装的很好，使用很简单，可以直接使用
CSS3每月销售统计图表特效
06-24
CSS3每月销售统计图表特效是一款商家每月月份销售数据统计图表特效。
条形图的demo与详细解析（Python实现）
10-08
前些日子学习Python可视化分析的时候，参考的是网上的文档和代码，不少细节文档都没明说，对新手不是很友好，我学习之后对不少代码以个人理解做了详细的注解，希望对大家有所帮助！
可视化生成css_使用CSS统计信息可视化任何CSS样式表
cune1359的博客
07-01 564
有没有想过样式表中有多少CSS规则？ 还是您曾经想看到一个CSS文件中使用的所有颜色的可视化表示形式 ？ 使用CSS Stats ，您可以插入任何网站并提取大量CSS原始数据，以满足您的好奇心。 而且，此Web应用程序比仅显示样式表的所有颜色要深入得多。 您可以可视化所有z-index值 ， 所有字体大小 ， 所有媒体查询 ，甚至可以看到直观的图形 。 推荐读物： Web设计人员的十种...
CSS实现基本条状图表效果
xcLeigh
11-23 996
DIV .graph { width:100%; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background-image: linear-gradient(80deg, #20B2AA, #1C86EE);/**颜色渐变**/ text-align: left; col
动画统计图
weixin_30274627的博客
03-15 181
帮朋友做了个小功能，顺便分享下。 这是一个统计图，页面加载的时候带有动画效果。 效果图： html: <div class="transaction-amount"> <div class="transaction-amount-con typePage"> <div class="columnar" id="inve...
CSS3动画特效详解
liuyingv8的博客
12-14 4733
大家都知道网页的3大组成部分，分别是结构，表现和行为。就像我们要盖一座房子，要地基要打的扎实，房子的架构要稳固，而我们网页当中的地基和架构就是Html，当我们盖好了房子，最终的美观度还是看我们的装修风格，是欧美风，还是田园风，这样我们的房子看起来才是舒服的，而我们大家平常看到的网页装修风格或者是说网页的呈现样式主要是由CSS层叠样式表来设置的，书写CSS层叠样式表可以随意改变网页的布局结构和内容样
前端每日实战：15# 视频演示如何用纯 CSS 创作条形图，不用任何图表库
weixin_33853827的博客
05-08 138
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/zhang-ou/pen/XqzGLp 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值