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.圆 根据 ...
随机推荐
- 【转】【教程】实现Virtualbox中的XP虚拟机和主机Win7之间的共享文件夹
原文网址:http://www.crifan.com/add_share_folder_for_virtualbox_guest_xp_and_host_win7/ 已经实现了在主机Win7下,在Vi ...
- HDU 2682
思路:由于题目对能相连的点有限制,必须将这些点处理,能相连的点合并到一个集合中,最后查看是否所有点都在一个集合里,若都在说明是一个连通图,存在最小生成树,否则图不连通,不存在最小花费. #includ ...
- java基础全套
这是我自己早前听课时整理的java基础全套知识 使用于初学者 也可以适用于中级的程序员 我做成了chm文档的类型 你们可以下载 笔记是比较系统全面,可以抵得上市场上90%的学习资料.讨厌那些随便 ...
- 【HTML】Intermediate6：Text: Addresses, Definitions, Bi-directional, and Editorial
1.</address> It should be used specifically for the contact details relating either to the ent ...
- HW2.16
import java.util.Scanner; public class Solution { public static void main(String[] args) { final int ...
- Codeforces335B - Palindrome(区间DP)
题目大意 给定一个长度不超过5*10^4的只包含小写字母的字符串,要求你求它的回文子序列,如果存在长度为100的回文子序列,那么只要输出长度为一百的回文子序列即可,否则输出它的最长回文子序列 题解 这 ...
- ssh-copy-id password
- mac下firefox复制粘贴失效解决办法
现象:复制粘贴只能在firefox上操作,也就是其他应用内的内容无法复制到firefox,firefox的内容也无法复制其他应用,但是firefox自己的内容可以复制本身(比如各个tab页之间复制) ...
- 【python自动化第八篇：网络编程】
一.拾遗 动态导入模块 目的是为了在导入模块的过程中将模块以字符的格式导入. #!/usr/bin/env python # -*- coding:utf-8 -*- #Author:wanghui ...
- 微信开发第7章 通过accesstoken获取用户黑名单列表
获取黑名单列表可以查看文档 http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1471422259_pJMWA&token=& ...