当前位置：编程学习 > JS >>

CSS3算命罗盘

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

上一个：很炫的网页背景调色器
下一个：鼠标移过滑出一个JS+CSS颜色渐变的DIV层

更多图片编程知识:
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js把图片转换成 base64代码
js把base代码转换成图片
JS 将 base64编码的图片转化为图片文件
js中的定时器
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
微信小程序
thinkphp
如果你遇到编程学习难题：
访问www.zzzyk.com 试试
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，