vue+css实现罗盘转动显示时间效果代码
代码语言：html
所属分类：布局界面
代码描述：vue+css实现罗盘转动显示时间效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{ padding: 0; margin: 0; }
[v-cloak] { display: none!important; }
.flex,.flex-o{ flex: 1; -webkit-flex: 1; box-flex:1; -webkit-box-flex:1; display: inline; }
.flex-o{ overflow: hidden; }
.df{ display: -webkit-box; display: box; display: -webkit-flex; display: flex; }
.wao{ -webkit-box-pack: center; box-pack: center; -webkit-justify-content: center; justify-content: center; }
.wal{ -webkit-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; }
.war{ -webkit-box-pack: end; box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; }
.hao{ -webkit-box-align: center; box-align: center; -webkit-align-items: center; align-items: center; }
.hal{ -webkit-box-align: start; box-align: start; -webkit-align-items: flex-start; align-items: flex-start; }
.har{ -webkit-box-align: end; box-align: end; -webkit-align-items: flex-end; align-items: flex-end; }
.bob{ box-sizing: border-box; }
.cf{ /*-webkit-box-direction:normal; box-direction:normal; */-webkit-box-orient:vertical; box-orient:vertical; -webkit-flex-direction:column; flex-direction:column; }
.jcb { -webkit-box-pack: justify; -webkit-justify-content: space-between; box-pack: justify; justify-content: space-between; }
</style>
<style type="text/css">
.clock-box{ overflow: hidden; position: fixed; left: 0; top: 0; bottom: 0; right: 0; color: #000; font-family: '微软雅黑'; }
.clock-area{ width: 800px; height: 800px; position: relative; }
.clock-year{ width: 100px; height: 30px; position: absolute; font-size: 14px; line-height: 16px; left: 50%; top: 50%; margin-left: -50px; margin-top: -15px; }
.clock-month{ width: 160px; height: 160px; position: absolute; left: 50%; top: 50%; margin-left: -80px; margin-top: -80px; }
.clock-month-li{ font-size: 14px; line-height: 16px; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 100%; height: 20px; transform-origin: center; }
.clock-month-li span{ min-width: 20px; text-align: center; }
.clock-day{ width: 280px; height: 280px; position: absolute; left: 50%; top: 50%; margin-left: -140px; margin-top: -140px; }
.clock-day-li{ font-size: 14px; line-height: 16px; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 100%; height: 20px; transform-origin: center; }
.clock-day-li span{ min-width: 20px; text-align: center; }
.clock-hour{ width: 400px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -200px; }
.clock-hour-li{ font-size: 14px; line-height: 16px; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 100%; height: 20px; transform-origin: center; }
.clock-hour-li span{ min-width: 20px; text-align: center; }
.clock-minute{ width: 520px; height: 520px; position: absolute; left: 50%; top: 50%; margin-left: -260px; margin-top: -260px; }
.clock-minute-li{ font-size: 14px; line-height: 16px; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 100%; height: 20px; transform-origin: center; }
.clock-minute-li span{ min-width: 20px; text-align: center; }
.clock-second{ width: 640px; height: 640px; position: absolute; left: 50%; top: 50%; margin-left: -320px; margin-top: -320px; }
.clock-second-li{ font-size: 14px; line-height: 16px; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 100%; height: 20px; transform-origin: center; }
.clock-second-li span{ min-width: 20px; text-align: center; }
.clock-month, .clock-day, .clock-hour, .clock-minute, .clock-second{ -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.clock-result{ position: fixed; left: 50%; top: 50%; right: 0; height: 20px; height: 30px; margin-top: -15px; margin-left: -30px; box-shadow: 0 0 1000px 1000px rgba(255,255,255,0.8); }
.clock-result i{ font-size: 12px; color: #ccc; line-height: 14px; font-style: normal; text-align: center; }
.clock-result i:nth-child(1){ width: 42px; margin-left: 50px; }
.clock-result i:nth-child(2){ width: 40px; margin-left: 16px; }
.clock-result i:nth-child(3){ width: 40px; margin-left: 22px; }
.clock-result i:nth-child(4){ width: 40px; margin-left: 20px; }
.clock-result i:nth-child(5){ width: 40px; margin-left: 20px; }
.clock-result i:nth-child(6){ width: 40px; margin-left: 20px; }
</style>
<style type="text/css">
.clock-month-li:nth-child(1){ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.clock-month-li:nth-child(2){ -webkit-transform: rotate(30deg); transform: rotate(30deg); }
.clock-month-li:nth-child(3){ -webkit-transform: rotate(60deg); transform: rotate(60deg); }
.clock-month-li:nth-child(4){ -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.clock-month-li:nth-child(5){ -webkit-transform: rotate(120deg); transform: rotate(120deg); }
.clock-month-li:nth-child(6){ -webkit-transform: rotate(150deg); transform: rotate(150deg); }
.clock-month-li:nth-child(7){ -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.clock-month-li:nth-child(8){ -webkit-transform: rotate(210deg); transform: rotate(210deg); }
.clock-month-li:nth-child(9){ -webkit-transform: rotate(240deg); transform: rotate(240deg); }
.clock-month-li:nth-child(10){ -webkit-transform: rotate(270deg); transform: rotate(270deg); }
.clock-month-li:nth-child(11){ -webkit-transform: rotate(300deg); transform: rotate(300deg); }
.clock-month-li:nth-child(12){ -webkit-transform: rotate(330deg); transform: rotate(330deg); }
</style>
<style type="text/css">
.clock-day.day28 .clock-day-li:nth-child(1){ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.clock-day.day28 .clock-day-li:nth-child(2){ -webkit-transform: rotate(12.857deg); transform: rotate(12.857deg); }
.clock-day.day28 .clock-day-li:nth-child(3){ -webkit-transform: rotate(25.714deg); transform: rotate(25.714deg); }
.clock-day.day28 .clock-day-li:nth-child(4){ -webkit-transform: rotate(38.571deg); transform: rotate(38.571deg); }
.clock-day.day28 .clock-day-li:nth-child(5){ -webkit-transform: rotate(51.428deg); transform: rotate(51.428deg); }
.clock-day.day28 .clock-day-li:nth-child(6){ -webkit-transform: rotate(64.285deg); transform: rotate(64.285deg); }
.clock-day.day28 .clock-day-li:nth-child(7){ -webkit-transform: rotate(77.142deg); transform: rotate(77.142deg); }
.clock-day.day28 .clock-day-li:nth-child(8){ -webkit-transform: rotate(89.999deg); transform: rotate(89.999deg); }
.clock-day.day28 .clock-day-li:nth-child(9){ -webkit-transform: rotate(102.856deg); transform: rotate(102.856deg); }
.clock-day.day28 .clock-day-li:nth-child(10){ -webkit-transform: rotate(115.713deg); transform: rotate(115.713deg); }
.clock-day.day28 .clock-day-li:nth-child(11){ -webkit-transform: rotate(128.57deg); transform: rotate(128.57deg); }
.clock-day.day28 .clock-day-li:nth-child(12){ -webkit-transform: rotate(141.427deg); transform: rotate(141.427deg); }
.clock-day.day28 .clock-day-li:nth-child(13){ -webkit-transform: rotate(154.284deg); transform: rotate(154.284deg); }
.clock-day.day28 .clock-day-li:nth-child(14){ -webkit-transform: rotate(167.141deg); transform: rotate(167.141deg); }
.clock-day.day28 .clock-day-li:nth-child(15){ -webkit-transform: rotate(179.998deg); transform: rotate(179.998deg); }
.clock-day.day28 .clock-day-li:nth-child(16){ -webkit-transform: rotate(192.855deg); transform: rotate(192.855deg); }
.clock-day.day28 .clock-day-li:nth-child(17){ -webkit-transform: rotate(205.712deg); transform: rotate(205.712deg); }
.clock-day.day28 .clock-day-li:nth-child(18){ -webkit-transform: rotate(218.569deg); transform: rotate(218.569deg); }
.clock-day.day28 .clock-day-li:nth-child(19){ -webkit-transform: rotate(231.426deg); transform: rotate(231.426deg); }
.clock-day.day28 .clock-day-li:nth-child(20){ -webkit-transform: rotate(244.283deg); transform: rotate(244.283deg); }
.clock-day.day28 .clock-day-li:nth-child(21){ -webkit-transform: rotate(257.14deg); transform: rotate(257.14deg); }
.clock-day.day28 .clock-day-li:nth-child(22){ -webkit-transform: rotate(269.997deg); transform: rotate(269.997deg); }
.clock-day.day28 .clock-day-li:nth-child(23){ -webkit-transform: rotate(282.854deg); transform: rotate(282.854deg); }
.clock-day.day28 .clock-day-li:nth-child(24){ -webkit-transform: rotate(295.711deg); transform: rotate(295.711deg); }
.clock-day.day28 .clock-day-li:nth-child(25){ -webkit-transform: rotate(308.568deg); transform: rotate(308.568deg); }
.clock-day.day28 .clock-day-li:nth-child(26){ -webkit-transform: rotate(321.425deg); transform: rotate(321.425deg); }
.clock-day.day28 .clock-day-li:nth-child(27){ -webkit-transform: rotate(334.282deg); transform: rotate(334.282deg); }
.clock-day.day28 .clock-day-li:nth-child(28){ -webkit-transform: rotate(347.139deg); transform: rotate(347.139deg); }
</style>
<style type="text/css">
.clock-day.day29 .clock-day-li:nth-child(1){ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.clock-day.day29 .clock-day-li:nth-child(2){ -webkit-transform: rotate(12.413deg); transform: rotate(12.413deg); }
.clock-day.day29 .clock-day-li:nth-child(3){ -webkit-transform: rotate(24.826deg); transform: rotate(24.826deg); }
.clock-day.day29 .clock-day-li:nth-child(4){ -webkit-transform: rotate(37.239deg); transform: rotate(37.239deg); }
.clock-day.day29 .clock-day-li:nth-child(5){ -webkit-transform: rotate(49.652deg); transform: rotate(49.652deg); }
.clock-day.day29 .clock-day-li:nth-child(6){ -webkit-transform: rotate(62.065deg); transform: rotate(62.065deg); }
.clock-day.day29 .clock-day-li:nth-child(7){ -webkit-transform: rotate(74.478deg); transform: rotate(74.478deg); }
.clock-day.day29 .clock-day-li:nth-child(8){ -webkit-transform: rotate(86.891deg); transform: rotate(86.891deg); }
.clock-day.day29 .clock-day-li:nth-child(9){ -webkit-transform: rotate(99.304deg); transform: rotate(99.304deg); }
.clock-day.day29 .clock-day-li:nth-child(10){ -webkit-transform: rotate(111.717deg); transform: rotate(111.717deg); }
.clock-day.day29 .clock-day-li:nth-child(11){ -webkit-transform: rotate(124.13deg); transform: rotate(124.13deg); }
.clock-day.day29 .clock-day-li:nth-child(12){ -webkit-transform: rotate(136.543deg); transform: rotate(136.543deg); }
.clock-day.day29 .clock-day-li:nth-child(13){ -webkit-transform: rotate(148.956deg); transform: rotate(148.956deg); }
.clock-day.day29 .clock-day-li:nth-child(14){ -webkit-transform: rotate(161.369deg); transform: rotate(161.369deg); }
.clock-day.day29 .clock-day-li:nth-child(15){ -webkit-transform: rotate(173.782deg); transform: rotate(173.782deg); }
.clock-day.day29 .clock-day-li:nth-child(16){ -webkit-transform: rotate(186.195deg); transform: rotate(186.195deg); }
.clock-day.day29 .clock-day-li:nth-child(17){ -webkit-transform: rotate(198.608deg); transform: rotate(198.608deg); }
.clock-day.day29 .clock-day-li:nth-child(18){ -webkit-transform: rotate(211.021deg); transform: rotate(211.021deg); }
.clock-day.day29 .clock-day-li:nth-child(19){ -webkit-transform: rotate(223.434deg); transform: rotate(223.434deg); }
.clock-day.day29 .clock-day-li:nth-child(20){ -webkit-transform: rotate(235.847deg); transform: rotate(235.847deg); }
.clock-day.day29 .clock-day-li:nth-child(21){ -webkit-transform: rotate(248.26deg); transform: rotate(248.26deg); }
.clock-day.day29 .clock-day-li:nth-child(22){ -webkit-transform: rotate(260.673deg); transform: rotate(260.673deg); }
.clock-day.day29 .clock-day-li:nth-child(23){ -webkit-transform: rotate(273.086deg); transform: rotate(273.086deg); }
.clock-day.day29 .clock-day-li:nth-child(24){ -webkit-transform: rotate(285.499deg); transform: rotate(285.499deg); }
.clock-day.day29 .clock-day-li:nth-child(25){ -webkit-transform: rotate(297.912deg); transform: rotate(297.912deg); }
.clock-day.day29 .clock-day-li:nth-child(26){ -webkit-transform: rotate(310.325deg); transform: rotate(310.325deg); }
.clock-day.day29 .clock-day-li:nth-child(27){ -webkit-transform: rotate(322.738deg); transform: rotate(322.738deg); }
.clock-day.day29 .clock-day-li:nth-child(28){ -webkit-transform: rotate(335.151deg); transform: rotate(335.151deg); }
.clock-day.day29 .clock-day-li:nth-child(29){ -webkit-transform: rotate(347.564deg); transform: rotate(347.564deg); }
</style>
<style type="text/css">
.clock-day.day30 .clock-day-li:nth-child(1){ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.clock-day.day30 .clock-day-li:nth-child(2){ -webkit-transform: rotate(12deg); transform: rotate(12deg); }
.clock-day.day30 .clock-day-li:nth-child(3){ -webkit-transform: rotate(24deg); transform: rotate(24deg); }
.clock-day.day30 .clock-day-li:nth-child(4){ -webkit-transform: rotate(36deg); transform: rotate(36deg); }
.clock-day.day30 .clock-day-li:nth-child(5){ -webkit-transform: rotate(48deg); transform: rotate(48deg); }
.clock-day.day30 .clock-day-li:nth-child(6){ -webkit-transform: rotate(60deg); transform: rotate(60deg); }
.clock-day.day30 .clock-day-li:nth-child(7){ -webkit-transform: rotate(72deg); transform: rotate(72deg); }
.clock-day.day30 .clock-day-li:nth-child(8){ -webkit-transform: rotate(84deg); transform: rotate(84deg); }
.clock-day.day30 .clock-day-li:nth-child(9){ -webkit-transform: rotate(96deg); transform: rotate(96deg); }
.clock-day.day30 .clock-day-li:nth-child(10){ -webkit-transform: rotate(108deg); transform: rotate(108deg); }
.clock-day.day30 .clock-day-li:nth-child(11){ -webkit-transform: rotate(120deg); transform: rotate(120deg); }
.clock-day.day30 .clock-day-li:nth-child(12){ -webkit-transform: rotate(132deg); transform: rotate(132deg); }
.clock-day.day30 .clock-day-li:nth-child(13){ -webkit-transform: rotate(144deg); transform: rotate(144deg); }
.clock-day.day30 .clock-day-li:nth-child(14){ -webkit-transform: rotate(156deg); transform: rotate(156deg); }
.clock-day.day30 .clock-day-li:nth-child(15){ -webkit-transform: rotate(168deg); transform: rotate(168deg); }
.clock-day.day30 .clock-day-li:nth-child(16){ -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.clock-day.day30 .clock-day-li:nth-child(17){ -webkit-transform: rotate(192deg); transform: rotate(192deg); }
.clock-day.day30 .clock-day-li:nth-child(18){ -webkit-transform: rotate(204deg); transform: rotate(204deg); }
.clock-day.day30 .clock-day-li:nth-child(19){ -webkit-transform: rotate(216deg); transform: rotate(216deg); }
.clock-day.day30 .clock-day-li:nth-child(20){ -webkit-transform: rotate(228deg); transform: rotate(228deg); }
.clock-day.day30 .clock-day-li:nth-child(21){ -webkit-transform: rotate(240deg); transform: rotate(240deg); }
.clock-day.day30 .clock-day-li:nth-child(22){ -webkit-transform: rotate(252deg); transform: rotate(252deg); }
.clock-day.day30 .clock-day-li:nth-child(23){ -webkit-transform: rotate(264deg); transform: rotate(264deg); }
.clock-day.day30 .clock-day-li:nth-child(24){ -webkit-transform: rotate(276deg); transform: rotate(276deg); }
.clock-day.day30 .clock-day-li:nth-child(25){ -webkit-transform: rotate(288deg); transform: rotate(288deg); }
.clock-day.day30 .clock-day-li:nth-child(26){ -webkit-transform: rotate(300deg); transform: rotate(300deg); }
.clock-day.day30 .clock-day-li:nth-child(27){ -webkit-transform: rotate(312deg); transform: rotate(312deg); }
.clock-day.day30 .clock-day-li:nth-child(28){ -webkit-transform: rotate(324deg); transform: rotate(324deg); }
.clock-day.day30 .clock-day-li:nth-child(29){ -webkit-transform: rotate(336deg); transform: rotate(336deg); }
.clock-day.day30 .clock-day-li:nth-child(30){ -webkit-transform: rotate(348deg); transform: rotate(348deg); }
</style>
<style type="text/css">
.clock-day.day31 .clock-day-li:nth-child(1){ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.clock-day.day31 .clock-day-li:nth-child(2){ -webkit-transform: rotate(11.612deg); transform: rotate(11.612deg); }
.clock-day.day31 .clock-day-li:nth-child(3){ -webkit-transform: rotate(23.224deg); transform: rotate(23.224deg); }
.clock-day.day31 .clock-day-li:nth-child(4){ -webkit-transform: rotate(34.836deg); transform: rotate(34.836deg); }
.clock-day.day31 .clock-day-li:nth-child(5){ -webkit-transform: rotate(46.448deg); transform: rotate(46.448deg); }
.clock-day.day31 .clock-day-li:nth-child(6){ -webkit-transform: rotate(58.06deg); transform: rotate(58.06deg); }
.clock-day.day31 .clock-day-li:nth-child(7){ -webkit-transform: rotate(69.672deg); transform: rotate(69.672deg); }
.clock-day.day31 .clock-day-li:nth-child(8){ -webkit-transform: rotate(81.284deg); transform: rotate(81.284deg); }
.clock-day.day31 .clock-day-li:nth-child(9){ -webkit-transform: rotate(92.896deg); transform: rotate(92.896deg); }
.clock-day.day31 .clock-day-li:nth-child(10){ -webkit-transform: rotate(104.508deg); transform: rotate(104.508deg); }
.clock-day.day31 .clock-day-li:nth-child(11){ -webkit-transform: rotate(116.12deg); transform: rotate(116.12deg); }
.clock-day.day31 .clock-day-li:nth-child(12){ -webkit-transform: rotate(127.732deg); transform: rotate(127.732deg); }
.clock-day.day31 .clock-day-li:nth-child(13){ -webkit-transform: rotate(139.344deg); transform: rotate(139.344deg); }
.clock-day.day31 .clock-day-li:nth-child(14){ -webkit-transform: rotate(150.956deg); transform: rotate(150.956deg); }
.clock-day.day31 .clock-day-li:nth-child(15){ -webkit-transform: rotate(162.568deg); transform: rotate(162.568deg); }
.clock-day.day31 .clock-day-li:nth-child(16){ -webkit-transform: rotate(174.18deg); transform: rotate(174.18deg); }
.clock-day.day31 .clock-day-li:nth-child(17){ -webkit-transform: rotate(185.792deg); transform: rotate(185.792deg); }
.clock-day.day31 .clock-day-li:nth-child(18){ -webkit-transform: rotate(197.404deg); transform: rotate(197.404deg); }
.clock-day.day31 .clock-day-li:nth-child(19){ -webkit-transform: rotate(209.016deg); transform: rotate(209.016deg); }
.clock-day.day31 .clock-day-li:nth-child(20){ -webkit-transform: rotate(220.628deg); transform: rotate(220.628deg); }
.clock-day.day31 .clock-day-li:nth-child(21){ -webkit-transform: rotate(232.24deg); transform: rotate(232.24deg); }
.clock-day.day31 .clock-day-li:nth-child(22){ -webkit-transform: rotate(243.852deg); transform: rotate(243.852deg); }
.clock-day.day31 .clock-day-li:nth-child(23){ -webkit-transform: rotate(255.464deg); transform: rot.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0