2017年09月_小圣贤君

11月 10月 09月 07月 06月

原创 css实现饼状图

有一些网页中,有时候会碰到饼状图的需求，比如统计图表，进度指示器，定时器等，实现方式也是各种各样，现在也有不少现成的js库，可以直接拿来使用，方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。<div class="pie"></div>.pie { width: 100px; height: 100px; border-radius: 50%; back

2017-09-08 17:12:12 12359

原创 css实现梯形标签页

在web设计中，梯形标签页是很常见的一种形式，但是梯形又是一种很难实现的样式，很多开发者会直接用梯形背景图片来生成效果，但是采用背景图片的方式产生了额外的http请求，并不是一种非常理想的方式，这里笔者为大家带来一种直接用css来实现梯形效果的方法。以一个简单的div为例：<div class="div">这是一个梯形</div>.div{ position: relative;

2017-09-07 11:26:21 6527 2

原创 css实现平角切角和弧形切角效果

在web设计中，有时候会碰到一些切角的样式需求，实现方法有很多种，用图片也好，结点叠加覆盖也好，都可以实现切角的样式，这里笔者直接用css来实现切角的样式。切单一角： background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);采用如上所示css就可以实现样式，修改角度就可以实现任一角度的切角效

2017-09-06 19:10:08 16617 6

原创通过css裁切图片为菱形图片

在web设计中，把图片裁切成菱形图片展示是一种常见的需求，通过photoshop直接将一张图片裁剪成菱形是一种解决方案，但不是最佳解决方案，这里笔者直接通过css设计了两种方案，来实现让图片菱形展示。以以下图片为例：我们想要这张图片以菱形的效果展示，这里是不能让图片直接通过rotate来旋转实现的，直接让图片旋转，那图片的内容也就倾斜了。我们想要的效果图是这样的：这里介绍两种方法

2017-09-05 19:07:39 3433

原创 “蚂蚁行军”和彩色边框设计

这里展示两种边框效果，一种是“蚂蚁行军”的动态边框效果，当然，截图中是看不出来动效的，读者需要自己动手运行才能看到效果；另一种是类似老式信封边框一样的彩色边框效果，这个效果在实际开发用到的可能性相对“蚂蚁行军”来说要高一些，有些开发者会采用图片背景的方式来实现这种效果，这里笔者直接用css来实现。<div class="div1"> 蚂蚁行军边框效果</div><div class="d

2017-09-05 14:01:21 895