纯CSS+HTML制作三角形和圆|实心+空心

2019
11/05
点此
留言

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。

本文是流行的三角形和圆的绘制方法。

<style type="text/css">
    .clearfix{zoom:1;} /* clearfix for IE */
    .clearfix:after{content:"";display:block;clear:both;visibility:hidden;}
    .triangle-solid>div,.triangle-hollow>div{float: left;margin-right: 50px;}
    .top{
        position: relative;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid #000;
    }
    .bottom{
        position: relative;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid #000;
    }
    .left{
        position: relative;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-right: 25px solid #000;
        border-bottom: 25px solid transparent;
    }
    .right{
        position: relative;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 25px solid #000;
    }
    .triangle-hollow>.top:after{
        content: '';
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid #fff;
        left: -50px;
        top: 5px;
    }
    .triangle-hollow>.bottom:after{
        content: '';
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid #fff;
        left: -50px;
        top: -55px;
    }
    .triangle-hollow>.left:after{
        content: '';
        position: absolute;
        border-top: 25px solid transparent;
        border-right: 25px solid #fff;
        border-bottom: 25px solid transparent;
        left: 5px;
        top: -25px;
    }
    .triangle-hollow>.right:after{
        content: '';
        position: absolute;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 25px solid #fff;
        left: -30px;
        top: -25px;
    }
    .round{
        width: 50px;
        height: 50px;
        background: #000;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
    }
    .round-hollow{
        position: relative;
    }
    .round-hollow:after{
        position: absolute;
        content: '';
        width: 46px;
        height: 46px;
        background: #fff;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        top:2px;
        left:2px;
    }
</style>
<body>
    <h2>实心三角</h2>
    <div class="triangle-solid clearfix">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <h2>空心三角</h2>
    <div class="triangle-hollow clearfix">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <h2>实心圆</h2>
    <div class="round"></div>
    <h2>空心圆</h2>
    <div class="round round-hollow"></div>
</body>

本文由 洃少 发表在: 前端 | Tags: ,

纯CSS+HTML制作饼图和条形图

2019
11/05
点此
留言

使用html+css制作的图案或图形化内容响应速度最快，如下贴出我在开发过程中使用CSS+HTML制作的饼图和条形图，有需要的可以拿去。

CSS制作饼图

<div class="pie" style="animation-delay: -0.05s;"><span>5%</span></div>
<style type="text/css">
    @keyframes spin{
        to{transform: rotate(.5turn);}
    }
    @keyframes bg{
        50% {background: blue;}
    }
    .pie{
        position: relative;
        width: 200px; 
        height: 200px; 
        border-radius: 50%; 
        background: red;
        background-image:linear-gradient(to right, transparent 50%, blue 0);
    }
    .pie>span{
        position: absolute;
        line-height: 200px;
        width: 100%;
        color:#fff;
        text-align: center;
        font-size: 25px;
    }
    .pie::before{
        position: absolute;
        content: '';
        display: block;
        height: 100%;
        width: 50%;
        left: 50%;
        top: 0;
        border-radius: 0 100% 100% 0/50%;
        background-color: inherit;
        transform-origin: left;
        animation: spin .5s linear infinite,bg 1s step-end infinite;
        animation-play-state: paused;
        animation-delay: inherit;
    }
</style>

CSS制作条形图

<div class="barChart">
    <div class="x">
        <span>张三</span>
        <span>李四</span>
    </div>
    <div class="y">
        <div><span>0</span></div>
        <div><span>10</span></div>
        <div><span>20</span></div>
        <div><span>30</span></div>
        <div><span>40</span></div>
        <div><span>50</span></div>
    </div>
    <div class="bars">
        <div class="bar" style="height:150px;"><span>50</span></div>
        <div class="bar" style="height:90px;"><span>30</span></div>
    </div>
</div>
<style type="text/css">
    .barChart{
        position: relative;
        width: 80%;
        height: 400px;
    }
    .barChart>.x{
        bottom: 0;
        position: absolute;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-around;
    }
    .barChart>.x>span{
        transform-origin:left top; 
        transform: rotate(45deg);
        width: 0;
        white-space: nowrap;
    }
    .barChart>.y{
        position: absolute;
        bottom: 30px;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .barChart>.y>div{
        border-bottom: 1px solid #00af16;
        width: 100%;
        height: 29px;
    }
    .barChart>.y>div>span{
        display: inline-block;
        transform: translateY(20px);
        margin-left: -40px;
        width: 30px;
        background: white;
        text-align: right;
    }
    .bars{
        position: absolute;
        bottom: 31px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-around;
    }
    .bars>.bar{
        width: 5%;
        background-image: linear-gradient(to right, #b8f123 0%, #b8f123 47%, #79a602 50%, #79a602 100%);
        display: inline-block;
    }
    .bars>.bar>span{
        display: block;
        text-align: center;
        margin-top: -22px;
    }
</style>
本文由 洃少 发表在: 前端 | Tags: , ,

常用技术网站/论坛汇总

2019
09/05
点此
留言

一、GitHub

URL：https://github.com

来这个网站，你想要什么“轮子”，上面搜就行，汇集了全世界人类智慧的代码。全世界人类智慧“代码库”，这个说是开发者最最重要的网站也不为过了。

二、Stack Overflow

URL：https://stackoverflow.com

一个解决bug的社区！这个网站简称S.O. 是一个程序员的问答网站，如果你在开发过程中遇到什么bug，来这个网上搜一下，99%的问题都可以搜到。

三、SegmentFault——思否

URL：segmentfault.com

同样的程序员问答网站，帮助你解决bug。如果Stack Overflow全英文网站不太适合自己，那么可以试试这个中文版的S.O.。

四、v2ex

URL：https://www.v2ex.com

有点类似知乎，这里有各个大公司的程序员，汇集着各类奇妙好玩的话题，各种新鲜有趣的想法，是技术宅与极客们茶余饭后吐槽人生、释放压力、交流讨论、寻找灵感的好地方。

它的一大特点就是，发帖后300秒无法修改与删除，希望每个人都能够在说出每一句话之前经过足够认真的思考。

五、掘金——帮助开发者成长的技术社区

URL：juejin.cn

相比CSDN等其他论坛，它的内容更专业，含金量更，在上面搜索一些技术相关的问题，还是能找到不少干货的。

六、CSDN

URL：csdn.net

这个论坛的话大家应该都很熟悉。内容全，资源多。但内容比较基础，一些新手容易遇到的问题在上面都能搜到，对初学者比较友好。

七、博客园

URL：cnblogs.com

但是它是一个老牌的网站，文章相对来说会比较全，但是它的页面比较旧，会比较偏向之前的信息技术，很多早期高质量的内容都在博客园。新技术的话，这些写博客的人会相对少一些。

八、MDN

URL：https://developer.mozilla.org/zh-CN/

Web平台技术文档，包括CSS、HTML、JavaScript和Web API。

九、开源中国

URL：https://www.oschina.net/

这里是一些开源项目的分享。

本文由 洃少 发表在: 杂志 | Tags:
Newer Entries »