999特效动画

最新推荐文章于 2025-05-05 17:09:09 发布
最新推荐文章于 2025-05-05 17:09:09 发布
阅读量283 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gdragon_nana/article/details/77418132

自行导入js


 <script type="text/javascript" src="js/jquery.min.js"></script>
<style>
.all {
width: 800px;
margin: 0 auto;
margin-top: 50px;
}
.one{
width:25px;
height:25px;
border-radius: 50px;
background-color: #e69696;
display: inline-block;
}
</style>
</head>
<body>
<div class="all">
      <div class="ones">
<div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div> 
     <div>
      <div class="ones">
<div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div> 
     <div>
     <div class="ones">
      <div class="one"></div>
         <div class="one"></div>
         <div class="one" style="margin-left: 363px;"></div>
         <div class="one"></div>
     </div>
     <div class="ones">
      <div class="one"></div>
         <div class="one"></div>
         <div class="one" style="margin-left: 363px;"></div>
         <div class="one"></div>
     </div>
     <div class="ones">
      <div class="one"></div>
         <div class="one"></div>
         <div class="one" style="margin-left: 363px;"></div>
         <div class="one"></div>
     </div>
     <div class="ones">
      <div class="one"></div>
         <div class="one"></div>
         <div class="one" style="margin-left: 363px;"></div>
         <div class="one"></div>
     </div>
     <div class="ones">
<div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div> 
     <div>
      <div class="ones">
<div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div> 
     <div>
     <div class="ones">
        <div class="one" style="margin-left:429px;"></div>
        <div class="one"></div>
      </div>
       <div class="ones">
        <div class="one" style="margin-left:429px;"></div>
        <div class="one"></div>
      </div>
       <div class="ones">
        <div class="one" style="margin-left:429px;"></div>
        <div class="one"></div>
      </div>
       <div class="ones">
        <div class="one" style="margin-left:429px;"></div>
        <div class="one"></div>
      </div>
       <div class="ones">
        <div class="one" style="margin-left:429px;"></div>
        <div class="one"></div>
      </div>
       <div class="ones">
        <div class="one" style="margin-left:429px;"></div>
        <div class="one"></div>
      </div>
       <div class="ones">
<div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div> 
     <div>
      <div class="ones">
<div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
     <div>
</div>


<script>
   $(function() {
     animate();


        function animate() {
            $('.one').each(function() {
                $(this).css({
                    position: 'relative',
                    top: '-400px',
                    opacity: 0
                });


        var time = Math.floor((Math.random() * 3000) + 1);
        $(this).delay(time).animate({
            top: '10px',
            opacity: 1
        }, 2000, function() {
            $(this).delay(time).animate({
                top: '10px',
                opacity: 0
            }, 1000, function() {
                $(this).delay(time).animate({
                    top: '0px',
                    opacity: 1
                }, 500);




            });
        });
    });
}


});




</script>

gdragon_nana
关注
纯CSS3炫酷3D星空动画特效
LY_code的博客
04-17 1万+
效果：源码：&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &a
svg动画特效
m0_73800955的博客
12-21 1397
svg动画特效
HTML5特效动画
热门推荐
hzp666的博客
05-21 1万+
7、 HTML5 Canvas 鼠标滑过3D动画背景 在网页中我们经常会设置元素的背景，简单点的设置背景颜色，复杂的就设置背景图片。今天给大家分享一个将HTML5canvas动画作为网页背景的例子，将canvas置于文本底部，canvas上绘制很多3D图形，当我们将鼠标滑过背景时，canvas上的这些3D图形将会翻转，效果很酷。 在线演示源码下载 6、 基于Three.js的...
HTML图片动画特效
JackieDYH的博客
10-16 5985
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片动画</title> <style type="text/css"> html,body{ height: 100%;/*高度使用百分比,body的高度是100...
3D粒子动画特效
zichenblog的博客
05-05 950
拖动鼠标可交互 | 点击按钮访问5cq.homes3D粒子动画特效 - 5cq.homes
jQuery动画特效
m0_51281306的博客
03-24 2069
1.1基本动画 hide():隐藏HTML元素 show():显示HTML元素 toggle():show()和Hide()的切换。 语法 $(selector).show(speed,easing,callback) speed 可选。规定显示效果的速度。 可能的值：毫秒 "slow" "fast" easing 可选。规定在动画的不同点上元素的速度。 默认值为 "swing"。 可能的值： "swing" - 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动 c
css3波浪动画特效
qq_41820986的博客
03-18 1612
可根据需求添加修改波浪线和背景颜色 全部代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>波浪动画特效</title> <style> @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% {
CSS的动画特效（animation）
qq_51201134的博客
07-26 2958
CSS的动画特效（animation）
JavaScript动画特效——Canvas粒子动画
学而不思则忘
09-15 2348
这次，将制作飘雪的效果，如果用CSS动画样式来做的话，可以想象，那是有多么难。所以就用JavaScript来制作。 Canvas官方教程，很详细：http://canvas.migong.org/category/canvas-animation 要使用Canvas，则需要在HTML中插入相应的DOM结构： <canvas id="myCanvas" width="1000" height=...
Unity3d 10种二代卡通史诗华丽战斗动画特效
06-13
Unity3d 10种二代卡通史诗华丽战斗动画特效 附带人物释放技能动作 10种战斗技能动画特效 可供学习使用 附带特效资源 可以编辑自己的动画效果 拥有人物特效释放场景-免去自己创建demo的麻烦 卡通 史诗 华丽 战斗 动画...
wpf动画集锦 wpf特效集锦 wpf炫酷动画集锦 wpf炫酷特效集锦
09-11
在本文中，我们将深入探讨WPF（Windows Presentation Foundation）中的动画和特效，这些效果在标题和描述中有所提及。WPF是.NET Framework的一部分，它提供了一个丰富的用户界面平台，允许开发者创建具有高度交互性...
openGL特效动画集合
07-02
openGL特效动画包，包含7个动画的工程文件，其中包含水波流动，粒子特效，魔幻特效等效果的动画
CSS3风水罗盘旋转动画特效.rar
06-23
CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效....
Unity3D 100种战斗魔法粒子技能动画特效
06-13
战斗 魔法 粒子 技能 动画 特效 战斗 魔法 粒子 技能 动画 特效 战斗 魔法 粒子 技能 动画 特效 战斗 魔法 粒子 技能 动画 特效 战斗 魔法 粒子 技能 动画 特效 战斗 魔法 粒子 技能 动画 特效 战斗 魔法 粒子 技能 ...
学习一下二维码相关的，集成下 zxing.zip
09-12
学习一下二维码相关的，集成下 zxing.zip
生成二维码，可以带企业logo.zip
09-12
生成二维码，可以带企业logo.zip
帝国CMS7.5仿完美游戏台游戏视频网站模板下载.zip
09-12
本帝国cms模板由网络收集，整理升级为帝国CMS7.5，去除图片附件BUG和部分广告，已测试完美无错。 非常适合游戏视频网站使用，视频源采集的优酷，采集目标站以关闭，删除原火车头采集规则。 自带几万条测试数据，几百M测试图片，如何不需要可以到后台批量删除即可。
MATLAB中的Kolmogorov-Arnold网络_Kolmogorov-Arnold Networks in MA
09-12
MATLAB中的Kolmogorov-Arnold网络_Kolmogorov-Arnold Networks in MATLAB.zip
友得云客房产小程序是一款专为房产行业打造的开源的线上营销获客小程序，功能包括：一手房、二手房、租房房源发布、二维码海报、
最新发布
09-12
友得云客房产小程序是一款专为房产行业打造的开源的线上营销获客小程序，功能包括：一手房、二手房、租房房源发布、二维码海报、置业顾问电子名片，适用于房产开发商、代理商、房产自媒体等行业，拥有众多成功案例。前端采用微信小程序原生开发，后端采用java开发，社区版全部开源免费，您可以在此基础上进行修改和扩展，以适应您自己的业务。本项目所用技术栈有：java_springboot、js_vue.zip
整合多种特效动画代码实现视觉震撼
在当今的网页设计和开发中，特效动画是增强用户体验和界面吸引力的重要工具。本篇将详细介绍如何整合特效动画代码，以及相关的实现技术。 ### 标题：特效动画代码整合 #### 知识点一：什么是特效动画 特效动画通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值