css3画太极图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>太极图</title>
    <style type="text/css">
        .main {
            width: 150px;
            height: 300px;
            margin: 100px auto;
            border-radius: 150px;
            border:1px solid gray;
            border-left: 150px solid black;
        }
        .circle {
            width: 0px;
            height: px;
            padding: 25px;
            border-radius: 75px;
            margin-left: -75px;
        }
        .black {
            border:50px solid black;
            background: white;
        }
        .white {
            border:50px solid white;
            background: black;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="circle black"></div>
        <div class="circle white"></div>
    </div>
</body>
</html>

时间： 2024-12-16 22:37:07

css3画太极图的相关文章

css3画三角形的原理

以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次写的详细一点,把各个部位都拆出来分析. 第一步:头部轮廓 <header></header> .ultraman header

如何使用CSS3画出一个叮当猫

刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的 人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下: PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年轻了好多,哈哈!热烈的笑脸 首先,先把H

用css3画3d动画的思路

最近试了下CSS3动画,现在通过一个例子简单讲一讲我用css3画3d视图的思路. 任何时候敲代码前都要想清楚我要干什么,我要敲一个简单的3d旋转画册. 一. 1.首先用一个总容器包含所有的图片,设定属性perspective: 1000px,表示他距离我们屏幕1000px的距离,从二维变成了三维 2.要使用3d旋转,必先要有一个参考系使所有图片围绕他旋转,在总容器里面加一个div,添加属性transform-style: preserve-3d就可以变成参考系. 3.然后在这个div里设置动画效

【推荐】纯CSS3画出小黄人并实现动画效果

前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大小不同,嘴巴,头发也

css3画三角形

以下是用css3画3角形,效果如下图 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> span{ display:inline-block; margin-right:10px} .triangle_top{height:0;width:0; border:10px solid; bord

使用CSS3画出一个叮当猫

原文出处: 郭锦荣 欢迎分享原创到伯乐头条 刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下: PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年

纯CSS3画出小黄人并实现动画效果

原文出处: 郭锦荣 前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大

画太极图

画太极图 { CGFloat _degree;//表示当前的角度 CGFloat _r;//表示半径 CGFloat _R;//view的宽度/2 CGFloat _eye;//孔 } - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.backgroundColor = [UIColor clearColor]; _degree = 30; _r = frame.siz