JS动画特效（二）

最新推荐文章于 2024-08-14 17:24:57 发布

还是那个zpp

最新推荐文章于 2024-08-14 17:24:57 发布

阅读量846

点赞数 1

分类专栏：学习笔记

本文链接：https://blog.csdn.net/aaaaa1994/article/details/88554573

版权

本文介绍如何使用JavaScript实现星空闪烁效果和指针钟表动画。在星空闪烁部分，通过创建星星元素并随机定位，结合定时器改变星星位置实现闪烁。而在指针钟表部分，利用CSS3旋转动画，使时、分、秒针随着系统时间同步转动。详细代码及实现原理均有阐述。

摘要由CSDN通过智能技术生成

一、星空闪烁

效果图如下，实际效果是星星动态的闪烁。可用作网页背景等。

代码如下：
html只需要一个盒子容器，并且设置页面背景为黑色即可。

<body style="background:#000">
	<div id="app"></div>
</body>

其中，用作星星的图片是：
在这里插入图片描述
大小为49*7px，共有7段内容。

第一步，要确定星星出现的位置，由于是随机出现，因此定义一个对象原型方法drawStar，用于创建父盒子odiv，封装每一个星星。将其样式设置为相对定位，并随机生成left和top值。设置overflow：hidden的目的是只显示7*7px的父盒子内的图片部分，超出则隐藏。

第二步，创建图片元素，根据“子绝父相”，设置为相对定位，并加入到父盒子odiv中。
第三步，编写闪烁的代码，原理是定时左右移动图片，造成视觉上星星在闪烁的效果。实现起来很简单，只需要定时器和循环改编star元素的位置。

最后，调用相应的函数，并循环产生多个星星。

详细js代码如下：

<script>
	var stars=document.getElementById('app');  //获取id为app的元素
	var Obj=function(){
   }   //创建一个对象
 
	Obj.prototype.drawStar = function(){
        //增加对象原型方法drawStar
		var odiv = document.createElement('div');   //创建div
		odiv.style.width = '7px';
		odiv.style.height = '7px';
		odiv.style.position = 'relative';   //设置div为相对定位
		odiv.style.left = Math.floor(document.body.clientWidth*Math.random())+'px';   //div的left值不能超出屏幕的宽度
		odiv.style.top = Math.floor(document.body.clientHeight*Math.random())+'px';//div的left值不能超出屏幕的高度
		odiv.style.overflow = 'hidden';  //设置div的overflow为hidden,只显示7*7的父盒子内容
		app.appendChild(odiv);   //添加div到app元素上
		var star = document.createElement('img');   //