漂浮花朵网页特效的制作

最新推荐文章于 2025-03-03 10:37:45 发布

雪顶咖啡0222

最新推荐文章于 2025-03-03 10:37:45 发布

阅读量713

点赞数

分类专栏：前端笔记整理

本文链接：https://blog.csdn.net/weixin_42446871/article/details/105062837

版权

本文介绍了如何使用JavaScript和CSS制作浮动花朵的网页特效。通过封装JS函数，为花朵分配随机位置，并利用CSS动画使花朵从屏幕一角飘向另一角。详细代码和示例链接已提供。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这种特效在曾经在qq空间很流行, 然而现在…

设计师想要实现这样的效果, 我就只能硬着头皮做了.

最终效果如链接:
https://playground.eca.ed.ac.uk/~s1917425/flover-master/floatflower.html

一开始从网上找了一个纯js 实现图片漂浮的效果, 但只有一张图片, 可我要的显然不是一朵花呀.

图片漂浮的源码:
https://blog.csdn.net/home_zhang/article/details/72675835

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
  <div id="body">
     <!--漂浮图片 2017.5.24-->
   <div id="float_AD" style="position:absolute;z-index:1000;" οnmοuseοver="window.clearInterval(timer)" οnmοuseοut="timer=window.setInterval('changePos()',delay);">
    <a href="http://www.iterchina.cn/"><img src="https://img-blog.csdn.net/20170524093248122" style="width:300px; height:300px;" /></a>
    <span style="CURSOR:hand;color:red;font-weight:bold" οnclick="clearInterval(timer);obj.style.visibility = 'hidden'">X</span>
   </div>
   <script type="text/javascript" language="JavaScript"> 
   var obj=document.getElementById("float_AD"); 
   var clientHeight=document.documentElement.clientHeight; 
   var clientWidth=document.documentElement.clientWidth; 
   var timer; var delay= 20;//移动速度
   function randomNum(size){
    return Math.floor(Math.random()*(size-160+1)); } 
   obj.style.top=randomNum</