CSS3算命罗盘 - 手册网

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>算命罗盘</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
.circle {padding:0; margin:50px auto; list-style:none; width:300px; height:300px; position:relative; border-radius:300px; overflow:hidden;}
.circle li {position:absolute; left:250px; top:108px; width:50px; height:84px;
-webkit-transform-origin:-100px 42px;
-moz-transform-origin:-100px 42px;
-ms-transform-origin:-100px 42px;
-o-transform-origin:-100px 42px;
transform-origin:-100px 42px;
}
.circle li:last-child {width:220px; height:220px; position:absolute; left:40px; top:40px; background:#555; border-radius:200px;
background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: -o-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
-webkit-transform-origin:110px 110px;
-moz-transform-origin:110px 110px;
-ms-transform-origin:110px 110px;
-o-transform-origin:110px 110px;
transform-origin:110px 110px;
-webkit-transition: -webkit-transform 0.75s;
-moz-transition: 0.75s;
-ms-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.circle li:last-child img {position:absolute; left:98px; top:5px; border:0;}
.circle li:last-child b {display:none; width:20px; height:20px; border:1px solid #fff; border-radius:20px; font:normal 14px/20px arial, sans-serif; color:#fff; background:#888; text-align:center; position:absolute; left:99px; top:99px;}
.circle li a {display:block; width:50px; height:84px; background:#555; position:relative; z-index:100; 
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-ms-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.circle li a img {border:0; display:block; position:absolute; left: 20px; top:30px;}
.circle li a:before {display:block; width:50px; height:64px; content:""; position:absolute; left:0; top:0; background:#555; z-index:-1; border:1px solid #666; border-width:1px 0 0 0;
-webkit-transform-origin:0% 0%;
-moz-transform-origin:0% 0%;
-ms-transform-origin:0% 0%;
-o-transform-origin:0% 0%;
transform-origin:0% 0%;
-webkit-transform: rotate(-22.5deg);
-moz-transform: rotate(-22.5deg);
-ms-transform: rotate(-22.5deg);
-o-transform: rotate(-22.5deg);
transform: rotate(-22.5deg);
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-ms-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.circle li a:after {display:block; width:50px; height:66px; content:""; position:absolute; left:0; bottom:0; background:#555; z-index:-1; border:1px solid #666; border-width:0 0 1px 0;
-webkit-transform-origin:0% 100%;
-moz-transform-origin:0% 100%;
-ms-transform-origin:0% 100%;
-o-transform-origin:0% 100%;
transform-origin:0% 100%;
-webkit-transform: rotate(22.5deg);
-moz-transform: rotate(22.5deg);
-ms-transform: rotate(22.5deg);
-o-transform: rotate(22.5deg);
transform: rotate(22.5deg);
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-ms-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}

.circle li:nth-child(1) {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle li:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.circle li:nth-child(3) {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle li:nth-child(4) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle li:nth-child(5) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(6) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.circle li:nth-child(7) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(8) {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}

.circle li:nth-child(1) img {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(2) img {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle li:nth-child(3) img {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle li:nth-child(4) img {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.circle li:nth-child(5) img {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle li:nth-child(6) img {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.circle li:nth-child(7) img {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.circle li:nth-child(8) img {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
-o-transform: rotate(-225deg);
transform: rotate(-225deg);
}

.circle li:nth-child(1) a:hover,
.circle li:nth-child(1) a:hover:before,
.circle li:nth-child(1) a:hover:after {background:#646;}
.circle li:nth-child(2) a:hover,
.circle li:nth-child(2) a:hover:before,
.circle li:nth-child(2) a:hover:after {background:#456;}
.circle li:nth-child(3) a:hover,
.circle li:nth-child(3) a:hover:before,
.circle li:nth-child(3) a:hover:after {background:#564;}
.circle li:nth-child(4) a:hover,
.circle li:nth-child(4) a:hover:before,
.circle li:nth-child(4) a:hover:after {background:#645;}
.circle li:nth-child(5) a:hover,
.circle li:nth-child(5) a:hover:before,
.circle li:nth-child(5) a:hover:after {background:#654;}
.circle li:nth-child(6) a:hover,
.circle li:nth-child(6) a:hover:before,
.circle li:nth-child(6) a:hover:after {background:#546;}
.circle li:nth-child(7) a:hover,
.circle li:nth-child(7) a:hover:before,
.circle li:nth-child(7) a:hover:after {background:#465;}
.circle li:nth-child(8) a:hover,
.circle li:nth-child(8) a:hover:before,
.circle li:nth-child(8) a:hover:after {background:#446;}
.circle li:nth-child(9) a:hover,
.circle li:hover:nth-child(1) ~ li:last-child {background-color:#646;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle li:hover:nth-child(2) ~ li:last-child {background-color:#456;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle li:hover:nth-child(3) ~ li:last-child {background-color:#564;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:hover:nth-child(4) ~ li:last-child {background-color:#645;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.circle li:hover:nth-child(5) ~ li:last-child {background-color:#654;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:hover:nth-child(6) ~ li:last-child {background-color:#546;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
.circle li:hover:nth-child(7) ~ li:last-child {background-color:#465;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.circle li:hover:nth-child(8) ~ li:last-child {background-color:#446;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
.circle li:hover:nth-child(1) ~ li:last-child .b1 {display:block;}
.circle li:hover:nth-child(2) ~ li:last-child .b2 {display:block;}
.circle li:hover:nth-child(3) ~ li:last-child .b3 {display:block;}
.circle li:hover:nth-child(4) ~ li:last-child .b4 {display:block;}
.circle li:hover:nth-child(5) ~ li:last-child .b5 {display:block;}
.circle li:hover:nth-child(6) ~ li:last-child .b6 {display:block;}
.circle li:hover:nth-child(7) ~ li:last-child .b7 {display:block;}
.circle li:hover:nth-child(8) ~ li:last-child .b8 {display:block;}
</style>
</head>
<body>
<section class="tips">
看到这个罗盘，我唯一想的就是，给自己算一卦吧！怎么最近我找的工作都不顺心呢？乞求来个好卦啊！支持浏览器:chrome,很抱歉的和大家说，safari没有做！ 
qq群:197326136 
</section>
<ul class="circle">
	<li><a href="index.html"><img src="//ku.shouce.ren/files/images/201601/56a325eab21e0.png"></a></li>
	<li><a href="index.html"><img src="//ku.shouce.ren/files/images/201601/56a325ebb9e35.png"></a></li>
	<li><a href="index.html"><img src="//ku.shouce.ren/files/images/201601/56a325eccb3bd.png"></a></li>
	<li><a href="index.html"><img src="//ku.shouce.ren/files/images/201601/56a325eda4b11.png"></a></li>
	<li><a href="index.html"><img src="//ku.shouce.ren/files/images/201601/56a325ee84c79.png"></a></li>
	<li><a href="index.html"><img src="//ku.shouce.ren/files/images/201601/56a325f0704d8.png"></a></li>
	<li><a href="index.html"><img src="//ku.shouce.ren/files/images/201601/56a325f19e84c.png"></a></li>
	<li><a href="index.html"><img src="//ku.shouce.ren/files/images/201601/56a325f36ca66.png"></a></li>
	<li><img src="//ku.shouce.ren/files/images/201601/56a325f5b6400.png" alt="">#1#2#3#4#5#6#7#8#9</li>
</ul>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3算命罗盘

分类

CSS3

描述

CSS3算命罗盘，看到这个罗盘，我唯一想的就是，给自己算一卦吧！怎么最近我找的工作都不顺心呢？乞求来个好卦啊！支持浏览器:chrome,很抱歉的和大家说，safari没有做！ 　　qq群:197326136