使用css3绘制任意角度扇形
使用css3绘制任意角度扇形 效果： 代码： 注： 如果扇形中包含内容 则会变形， 此时应该还原变形 skewy(54deg) ...
原文：使用 CSS3 绘制 Hello Kitty
偶然间看到了 SegmentFault 上的一篇文章，感觉这个 Hello Kitty 画的还不错，心血来潮也用 CSS 画了个 Hello Kitty，现在在这里记录一下详细的绘制过程。想要源码 素材 在线演示的同学可以直接拉到最下面。 我们先看下原图： 结构分解 从上图可以看出，Hello Kitty 由脸蛋 耳朵 红色蝴蝶结 眼睛 鼻子和六根胡须构成，所以 DOM 结构也相对简单： 开始绘制 ...
2016-08-03 13:50 10 2048 推荐指数：
相关推荐
css3之图形绘制
由于近期的项目中出现了不规则的边框和图形， 所以重新温习一下CSS3的图形绘制。。。样式绘制的图形比图片的性能要好，体验更佳，关键一点是更加有趣！ 以下几个例子主要是运用了css3中border、bordr-radius、transform、伪元素等属性来完成的，我们先了解下它们的基本原理 ...
CSS3 绘制的BMW logo
火热的移动互联网让我看到了HTML5，CSS3的伟大前景。 虽然web端对CSS3的支持还有很多兼容性问题，但是我很愿意相信web端越来越富了，越来越生动了。 这是我对他们的学习越来越有兴趣了。 下面是我用CSS3绘制的一个BMW的标志。 浏览器支持：chrome， safari ...
CSS3绘制不规则图形（一）
由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。 废话不多说，我们直接看效果： 1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角） 主要 ...
CSS3绘制六边形
因为很简单，所以先总结一下：使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素，并利用css3的边框样式，将这两个元素变成三角形放置在源元素的两端即可。 （因为之前在生物公司工作过，觉得六边形更贴近生物分子、基因等概念，包括我们在网上搜索关于生物分子 ...
CSS3绘制弹球动画效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin ...
CSS3绘制旋转的太极图案（一）
实现步骤： 基础HTML： 步骤一： 画一个宽高为400px的圆，加上阴影。 ...
用css3绘制你需要的几何图形
1、圆形 示例: 思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下： html: css: 2、自适应椭圆 思路：border-radius 这个属性还有另外一个鲜为人知的真相 ...