js+html5实现动画版太极小程序

最新推荐文章于 2024-01-03 13:06:05 发布

初尘屿风

最新推荐文章于 2024-01-03 13:06:05 发布

阅读量445

点赞数 4

分类专栏：初尘屿风前端 JavaScript 文章标签： html5 javascript css css3 jquery

本文链接：https://blog.csdn.net/qinluyu111/article/details/118732047

版权

初尘屿风同时被 3 个专栏收录

168 篇文章 7 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

系列文章目录

提示：阅读完文帐，有对此程序感兴趣的可以在底部获取下载地址！

文章目录

前言

每个学习过前端的学习者来说，都接触过生活所见到的方方面面，今天分享玄学小程序——太极小程序，它用到了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);