css3绘制中国结
<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<style type="text/css">
:root,body{
height: 100%;
width: 100%;
}
.z{
width:200px;
height: 400px;
left: 400px;
position: absolute;
}
.z div{
position: absolute; }
.z .red{
background-color: red;
box-shadow: 0px 0px 1px 0 #666;
}
.f1{
width: 18px;
height: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top:0;
border-radius: 2px;
}
.l1,.l2,.l3,.l4{
width:2px;
height: 10px;
}
.c1{
width:14px;
height: 14px;
border-radius: 7px;
box-shadow: 0px 0px 1px 0 #666;
z-index: 10;
}
.c1-1 {
position: relative;
width: 40px;
height: 12px;
}
.c1-1:before,
.c1-1:after {
box-shadow: 0px 0px 1px 0 #666;
content: "";
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 14px;
border: 2px solid red;
border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
} .c1-1:after {
left: auto;
right: 0;
border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.r{
width:80px;
height: 80px;
z-index: 10;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.r .ro{
position: relative;
display: table;
border-collapse:separate;
border-spacing: 1px;
}
.r .b{
width:15px;
height: 14px;
position: relative;
display: table-cell;
border-radius: 2px;
}
.c2{
width:10px;
height: 10px;
border-radius: 5px;
}
.c3{
width:10px;
height: 10px;
border-radius: 5px 5px 0 0;
}
.c4{
width:14px;
height: 14px;
border-radius: 8px;
z-index: 10;
}
.k{
width: 10px;
height: 12px;
}
.k1{
width: 14px;
height: 6px;
}
.s{
height: 150px;
display: table;
border-collapse:separate;
border-spacing: 1px;
}
.ss{
width: 1px;
height: 100%;
position: relative !important;
display: table-cell;
}
.i1 {
position: relative;
width: 162px;
height: 46px;
} .i1:before,
.i1:after {
box-shadow: 0px 0px 1px 0 #666;
content: "";
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 40px;
border: 3px solid red;
border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
} .i1:after,.i2:after {
left: auto;
right: 0;
border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.i2 {
position: relative;
width: 136px;
height: 24px;
}
.i2:before,
.i2:after {
box-shadow: 0px 0px 1px 0 #666;
content: "";
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 20px;
border: 2px solid red;
border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
} .i2:after {
left: auto;
right: 0;
border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.e1 {
position: relative;
width: 12px;
height: 24px;
}
.e1:before,
.e1:after {
box-shadow: 0px 0px 1px 0 #666;
content: "";
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 20px;
border: 2px solid red;
border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.m{
width:80px;
height: 80px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.n{
width:80px;
height: 80px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.m .rx,.n .rx{
position: relative;
display: table;
border-collapse:separate;
border-spacing: 1px;
}
.m .rb , .m .rb-space,.n .rb , .n .rb-space{
position: relative;
width: 120px;
height: 14px;
display: table-cell;
} .m .rb:before,
.m .rb:after,.n .rb:before,
.n .rb:after {
box-shadow: 0px 0px 1px 0 #666;
content: "";
position: absolute;
top: 0;
left: -8px;
width: 6px;
height: 10px;
border: 2px solid red;
border-radius:50% 50% 50% 50% / 40% 40% 60% 60%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
} .m .rb:after,.n .rb:after{
left: auto;
right: -8px;
border-radius:50% 50% 50% 50% / 60% 60% 60% 60%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
</style>
<script type="text/javascript" src='../bower_components/jquery/dist/jquery.js'></script>
<script type="text/javascript">
$(document).ready(function(){
var $z = $('.z'), $f1 = $('.f1') , $l1 = $('.l1') , $c1 = $('.c1') , $l2 = $('.l2') , $r = $('.r') , $l3 = $('.l3') , $c2 = $('.c2') , $l4 = $('.l4') , $c3 = $('.c3') , $c4 = $('.c4'),
$k = $('.k') , $k1 = $('.k1') , $s = $('.s') , $i1 = $('.i1') , $i2 = $('.i2'),
$e1 = $('.e1') , $c1_1 = $('.c1-1'),
$m = $('.m') , $n = $('.n');
$f1.css({
left : ($z.width() - $f1.width()) / 2 ,
top : Math.sqrt(2 * Math.pow($f1.height() / 2 , 2)) - $f1.height() / 2
});
$l1.css({
left : ($z.width() - $l1.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2))
});
$c1.css({
left : ($z.width() - $c1.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height()
});
$l2.css({
left : ($z.width() - $l2.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height()
});
$r.css({
left : ($z.width() - $r.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() / 2 , 2)) - $r.height() / 2
});
$l3.css({
left : ($z.width() - $l3.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2))
});
$c2.css({
left : ($z.width() - $c2.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height()
});
$l4.css({
left : ($z.width() - $l4.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height()
});
$c3.css({
left : ($z.width() - $c3.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height()
});
$c4.css({
left : ($z.width() - $c4.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4
});
$k.css({
left : ($z.width() - $k.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4 + $c4.height() - 4
});
$k1.css({
left : ($z.width() - $k1.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4 + $c4.height() - 4 + $k.height()
});
$s.css({
left : ($z.width() - $k1.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4 + $c4.height() - 4 + $k.height() + $k1.height()
}); $i1.css({
left : ($z.width() - $i1.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) / 2 - $i1.height() / 2
});
$i2.css({
left : ($z.width() - $i2.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) / 2 - $i2.height() / 2
});
$c1_1.css({
left : ($z.width() - $c1_1.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + ($c1_1.height() - $c1.height()) / 2
});
$m.css({
left : ($z.width() - $m.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($m.height() / 2 , 2)) - $m.height() / 2
});
$n.css({
left : ($z.width() - $n.width()) / 2,
top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($n.height() / 2 , 2)) - $n.height() / 2
});
});
</script>
</head>
<body>
<div class='z'>
<div class='f1 red'></div>
<div class='l1 red'></div>
<div class='c1 red'></div>
<div class='c1-1'></div>
<div class='l2 red'></div>
<div class='r'>
<div class='ro'>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
</div>
<div class='ro'>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
</div>
<div class='ro'>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
</div>
<div class='ro'>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
</div>
<div class='ro'>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
<div class='b red'></div>
</div>
</div>
<div class='l3 red'></div>
<div class='c2 red'></div>
<div class='l4 red'></div>
<div class='c3 red'></div>
<div class='c4 red'></div>
<div class='k red'></div>
<div class='k1 red'></div>
<div class='s'>
<div class='ss red'></div>
<div class='ss red'></div>
<div class='ss red'></div>
<div class='ss red'></div>
<div class='ss red'></div>
<div class='ss red'></div>
<div class='ss red'></div>
</div>
<div class='i1'></div>
<div class='i2'></div>
<div class='m'>
<div class='rx'>
<div class='rb-space'></div>
</div>
<div class='rx'>
<div class='rb'></div>
</div>
<div class='rx'>
<div class='rb'></div>
</div>
<div class='rx'>
<div class='rb'></div>
</div>
<div class='rx'>
<div class='rb-space'></div>
</div>
</div>
<div class='n'>
<div class='rx'>
<div class='rb-space'></div>
</div>
<div class='rx'>
<div class='rb'></div>
</div>
<div class='rx'>
<div class='rb'></div>
</div>
<div class='rx'>
<div class='rb'></div>
</div>
<div class='rx'>
<div class='rb-space'></div>
</div>
</div>
</div>
</body>
</html>
css3绘制中国结的更多相关文章
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- CSS3绘制旋转的太极图案（一）
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
- css3绘制几何图形
用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...
- 用纯CSS3绘制萌系漫画人物动态头像
大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...
- css3绘制腾讯logo
CSS3绘制的腾讯LOGO,下边是对比图. 演示地址
- 【项目1-1】使用HTML5+CSS3绘制HTML5的logo
作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...
- CSS3绘制砖墙-没实用不论什么图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用 CSS3 绘制 Hello Kitty
偶然间看到了 SegmentFault 上的一篇文章,感觉这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,现在在这里记录一下详细的绘制过程.想要源码. ...
- 详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧
1.矩形 绘制矩形应该是最简单的了,直接设置div的宽和高,填充颜色,效果就出来了. 2.圆角矩形 绘制圆角矩形也很简单,在1的基础上,在使用css3的border-radius,即可. 3.圆 根据 ...
随机推荐
- 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽
本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有 ...
- Android Paint和Color类
要绘图,首先得调整画笔,待画笔调整好之后,再将图像绘制到画布上,这样才可以显示在手机屏幕上.Android 中的画笔是 Paint类,Paint 中包含了很多方法对其属性进行设置,主要方法如下: se ...
- Ubuntu 安装Chrome步骤
一.添加PPA 从Google Linux Repository(http://www.google.com/linuxrepositories/)下载安装Key,或把下面的代码复制进终端,回车,需要 ...
- 关于SQL\SQL Server的三值逻辑简析
在SQL刚入门的时候,我们筛选为某列值为NULL的行,一般会采用如下的方式: SELECT * FROM Table AS T WHERE T.Col=NULL www.2cto.com 而实际 ...
- 关于mysql的error-based injection payload
今天用sqlmap扫一个网站,想得到一个表的所有列名,注意到sqlmap用到的一个error-based payload的: 1 AND (SELECT 3174 FROM(SELECT COUNT( ...
- Amabri安装前的准备工作
Ambari这个东东对操作系统的要求还是很高的,首先限制了要使用CentOS,RHEL,并且还是64bit 的,让我的Ubuntu泪奔啊---手头正好有RHEL6.x的盘,于是就用红帽吧.但是红帽是收 ...
- POJ1163 The Triangle: 倒三角形问题
经典的DP问题,DP思想也很直接: 直接贴代码: #include<iostream> #include<cstdio> #include<algorithm> # ...
- POJ2689 - Prime Distance(素数筛选)
题目大意 给定两个数L和U,要求你求出在区间[L, U] 内所有素数中,相邻两个素数差值最小的两个素数C1和C2以及相邻两个素数差值最大的两个素数D1和D2,并且L-U<1,000,000 题解 ...
- A Tour of Go Type conversions
The expression T(v) converts the value v to the type T. Some numeric conversions: var i int = 42 var ...
- 数值类对象：NSNumber,NSValue，NSNull
基本,集合,复杂,对象 可用对象封装基本数值,然后将对象放入NSArray或NSDictionary 中. 用对象封装基本数值后,即可给其发送消息. 数值类型包括:NSNumber,NSValue,N ...