CSS3算命罗盘

2020-01-27 14:17:27

字体：大中小

来源：转载

供稿：网友

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

<!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="http://www.aspku.com/jscss/demoimg/201209/p1.png"></a></li>	<li><a href="index.html"><img src="http://www.aspku.com/jscss/demoimg/201209/p2.png"></a></li>	<li><a href="index.html"><img src="http://www.aspku.com/jscss/demoimg/201209/p3.png"></a></li>	<li><a href="index.html"><img src="http://www.aspku.com/jscss/demoimg/201209/p4.png"></a></li>	<li><a href="index.html"><img src="http://www.aspku.com/jscss/demoimg/201209/p5.png"></a></li>	<li><a href="index.html"><img src="http://www.aspku.com/jscss/demoimg/201209/p6.png"></a></li>	<li><a href="index.html"><img src="http://www.aspku.com/jscss/demoimg/201209/p7.png"></a></li>	<li><a href="index.html"><img src="http://www.aspku.com/jscss/demoimg/201209/p8.png"></a></li>	<li><img src="http://www.aspku.com/jscss/demoimg/201209/p9.png" alt="">#1#2#3#4#5#6#7#8#9</li></ul></body></html>

上一篇：CSS3制作W3cplus的关注面板

下一篇：CSS3分享按钮