CSS3算命罗盘-白红宇

CSS3算命罗盘

阅读量：5936 次

发布时间：2019-06-19

本文共 10980 字，大约阅读时间需要 36 分钟。

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

<!DOCTYPE HTML>

<head>

<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-p_w_picpath: -webkit-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);

background-p_w_picpath: -moz-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);

background-p_w_picpath: -ms-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);

background-p_w_picpath: -o-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);

background-p_w_picpath: 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>

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

qq群:197326136

</section>

</ul>

</body>

</html>

转载于:https://blog.51cto.com/chunzhisu/1436968

你可能感兴趣的文章

如何通过Flow制作简单的工作流 - 请假审批2

在Exchange 2010邮箱迁移时有用的命令行

查看>>

smarty学习

查看>>

11.python并发入门（part11 进程同步锁，以及进程池，以及callback的概念）

查看>>

GitHub简单仓库管理

查看>>

零基础学习Puppet自动化配置管理（文档持续更新中）