1200字范文 > html+css+javascript实现乾坤八卦风水罗盘时钟 (附源码)

html+css+javascript实现乾坤八卦风水罗盘时钟 (附源码)

时间：2020-08-18 08:24:37

❉ html+css+javascript实现乾坤八卦风水罗盘时钟 (免费附源码)

这是一款基于css3实现酷炫的风水罗盘旋转动画特效源码。界面中的风水罗盘各个环状罗盘呈现出不同速度独立旋转的效果。动画特效采用css3技术实现，没有引入任何js脚本元素，整体界面动画效果炫酷华丽，是一款比较典型的css3动画特效源码。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。

❉ 文章目录

❉ html+css+javascript实现乾坤八卦风水罗盘时钟 (免费附源码)❉ 效果演示❉ 代码文件目录一、罗盘时钟(代码实现) html (部分)css (部分)二、做好的网页效果,如何通过发链接给别人看?1.1 解决部署上线~> 部署上线工具(可永久免费使用)1.1部署流程1.2 哇~ 部署成功三、前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 四、❉ 源码获取五、❉更多表白源码

❉ 效果演示

在线演示地址

❉ 代码文件目录

一、罗盘时钟(代码实现)

html (部分)

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><div class="compass-main"><div class="compassdiv"><div class="compass-c"></div><div class="compass w h"><div class="compass-1 w h"></div><div class="compass-2 w h"></div><div class="compass-3 w h"></div><div class="compass-4 w h"></div><div class="compass-5 w h"></div><div class="compass-6 w h"></div><div class="compass-7 w h"></div><div class="compass-8 w h"></div><div class="compass-9 w h"></div><div class="compass-10 w h"></div><div class="compass-11 w h"></div><div class="compass-12 w h"></div><div class="compass-13 w h"></div><div class="compass-14 w h"></div><div class="compass-15 w h"></div><div class="compass-16 w h"></div><div class="compass-17 w h"></div><div class="compass-18 w h"></div><div class="compass-19 w h"></div></div></div></div></body></html>

css (部分)

@charset "utf-8";/* CSS Document */* {margin: 0;padding: 0;list-style: none;}body {min-width: 1190px;background-color: #000002;}a {text-decoration: none;}img {border: none;}.w {width: 700px;}.h {height: 700px;}.compass-main {width: 100%;height: 800px;background-color: #000002;}.compassdiv {width: 1190px;height: 800px;margin: 0 auto;background-image: url(../images/compass/c-a-bj.jpg);position: relative;}.compassdiv .compass-c {width: 1190px;height: 800px;background-image: url(../images/compass/c-a-c.png);position: absolute;top: 0px;left: 0px;z-index: 100;}@-moz-keyframes rotate {100% {-moz-transform: rotate(0deg);}100% {-moz-transform: rotate(360deg);}}@-webkit-keyframes rotate {100% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes rotate {100% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.compassdiv .compass {background-image: url(../images/compass/c-a-0.png);position: absolute;top: 40px;left: 160px;z-index: 1;}.compassdiv .compass .compass-1 {position: absolute;top: 0px;left: 0px;z-index: 2;filter: alpha(opacity=100);-moz-opacity: 1;opacity: 1;background: no-repeat url("../images/compass/c-a-1.png") left top;-webkit-background-size: 700px 350px;-moz-background-size: 700px 350px;background-size: 700px 700px;-webkit-border-radius: 350px;border-radius: 350px;-moz-transition: all .1s;-webkit-transition: all .1s;transition: all .1s;-moz-animation: rotate 1s infinite linear;-webkit-animation: rotate 1s infinite linear;animation: rotate 1s infinite linear;}