系列文章目录
提示：阅读完文帐，有对此程序感兴趣的可以在底部获取下载地址！
文章目录
前言
每个学习过前端的学习者来说，都接触过生活所见到的方方面面，今天分享玄学小程序——太极小程序，它用到了HTML5+JavaScript的内容，相信你一定会有所收获的。
提示：以下是本篇文章正文内容
一、为何开发此程序？
1.作为新手：加深记忆，学会不同的开发思想。
2.生活所需。
3.拿来即用，方便。
二、效果展示
1.图片展示
（示例）：
2.视频展示
（示例）：
https://live.csdn.net/v/169592
三、源码展示
html5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太极</title>
<link rel="stylesheet" href="taiji.css">
</head>
<body>
<div class="clockdiv" id="clock-dfc">
<div class="pointer pointer5"></div>
<div class="pointer pointer11"></div>
<!-- 背景覆盖 -->
<div class="bk "></div>
<div class="bk2"></div>
<!-- 风叶 -->
<div class="page page1"> <div class="innerPage page2"></div></div>
<div class="page page3"><div class="innerPage page4"></div></div>
<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
src="taiji.mp3">
</audio>
<style type="text/css">
audio{
display: none;
}
body{background-image: url("taiji.jpg");background-repeat:no-repeat; background-size:100% 900px}
</style>
</div>
<script src="taiji.js"></script>
</body>
</html>css3:
div { text-align: center; width: 960px; font-family:"微软雅黑";}
.clockdiv { margin: 50px auto; width: 500px; height: 500px; border: 0;
border-radius: 250px; background: #28A7E1; position: relative;}
.clockdiv div { width: 300px;}
div.pointer { width: 500px; height: 2px; background: #fff; position: absolute;
top: 250px; transform: rotate(15deg); -webkit-transform: rotate(15deg); /* Safari and Chrome */}
div.pointer5{ transform: rotate(90deg); -webkit-transform: rotate(90deg); /* Safari and Chrome */}
div.pointer11{ transform: rotate(180deg); -webkit-transform: rotate(180deg); /* Safari and Chrome */}
/*内心圆*/
body {background-image: taiji.jpg}
div.page { width: 250px; height: 250px; background: #fff;
position: absolute; border-radius:125px ; left: 125px; }
div.innerPage { width: 80px; height: 80px; background: #000;
position: absolute; border-radius:65px ; left: 88px; top: 88px;}
div.page3 { top: 250px; background: #000; left: 125px;}
div.page4 { background: #fff;}
/*背景覆盖*/
div.bk { position: absolute; width: 250px; height: 500px; background: #fff;
border-top-left-radius: 250px; border-bottom-left-radius: 250px;}
div.bk2 { position: absolute; width: 250px; height: 500px; background: #000;
border-top-left-radius: 0; border-bottom-left-radius: 0px;
border-top-right-radius: 250px; border-bottom-right-radius: 250px; left: 250px;}
body{}JavaScript：
var deg = 0
var tid = setInterval(function(){
var clock_dfc = document.getElementById("clock-dfc");
clock_dfc.style.transform = "rotate("+(-deg)+"deg)";
},100);总结
以上就是今天要讲的内容，本文仅仅简单介绍了太极动画的实现效果，你也可以加以改进，而HTML提供了大量能使我们快速便捷地实现关注世界的效果，希望对此兴趣的人继续探索深入。
源码下载地址：