Html5+Css+JavaScript实现太极动画，自带音效与动画！
计算机基础与编程
计算机前端方面的一手资料，提供全方位的指导，带你走进新时代网络的大门。
Official Account
前言
效果如何？
以图片和视频为例：
视频：
图片：（图中的矩形方块均为动态）
图片1：
图片2：
图片3：
课前准备
1.工具选择
sublime-Text或idea或其他
2.语言使用
html5+Css+JavaScript+jquery-1.8.3等
源码展示
HTML5：
<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>
JavaScript：
var deg = 0var tid = setInterval(function(){var clock_dfc = document.getElementById("clock-dfc");clock_dfc.style.transform = "rotate("+(-deg)+"deg)";deg -=30;},100);
css:
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{}
写在最后