Google doodle 2012-4-9 模仿秀

最新推荐文章于 2025-08-08 17:07:36 发布
原创 最新推荐文章于 2025-08-08 17:07:36 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#google #javascript #jquery #chrome #脚本 #优化

本文展示了如何通过更改CSS背景属性实现动画效果，并提供了使用jQuery模仿的源代码。更新部分介绍了纯JavaScript实现的方法及性能对比。

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

首先,请看成品:
http://xctest.sinaapp.com/animate/

今天谷歌的doodle是一个动画.自己察看了一下代码,发现原理是通过更改css的background属性来实现的.于是我用jquery模仿了一下.源码就在页面里,请大家笑纳.


Update:

今天把代码改成了纯JavaScript实现.

http://xctest.sinaapp.com/animate/google/doodle/js/index.php

源码请自便

(在chrome下察看,好像性能差距不大,cpu几乎无差别,脚本内存优化了27%)

css-doodle——华丽炫酷的CSS
Emporor的博客
10-23 473
今天的主角是css-doodle，不知道有多少人知道的，反正我是第一次了解这个东西，首先我先介绍一下我是如何发现这个东西的，智慧树我们都用过，但是大家有没有观察过智慧树的登录页面的背景。大家可以点击登录界面查看一下。感觉是不是很神奇，能够和鼠标进行互动的动态粒子特效。
css-doodle螺旋动画js特效
ICode联盟
06-16 172
下载地址css-doodle.js实现的螺旋动画特效，感觉比较消耗资源。dd:
css-doodle 学习第二天，css-doodle能怎么使用
qq_36418362的博客
05-03 1851
1、我们能怎么来使用css-doodle css-doodle的使用有如下几种 1.1、Grid（表格形式） 1.2、Selectors（选择器形式） 1.3、Properties（属性形式） 1.4、Functions（功能（函数）形式） 1.5、JS API（应该是引用其它API形式） 2、Grid 2.1、先看一段使用Grid的代码（官网代码，size属性是我自己加的，这些属...
css 毛玻璃_CSS实现雨滴动画效果
weixin_39782782的博客
11-29 372
今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。其实就是给一张图片，做了个模糊化的效果，看起来像毛玻璃的效果一滴雨雨滴的效果就很巧妙了，让我们看下一滴雨完整的效果图这滴雨其实分为两个部分，第一部分是底部的阴影部分，其实是个边框来的，代码如下：.border { position: absolute; margin-left: 92px...
css-doodle 学习第一天
qq_36418362的博客
05-03 530
1、学习css-doodle的起因 在写网页的过程中被css-doodle吸引了，什么是css-doodle呢？ css-doodle是一个用来绘制CSS图案的WEB组件，它是基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。创建出来的...
推荐开源项目：Doodle-js - HTML5 Canvas 动画库
gitblog_00075的博客
05-28 542
推荐开源项目：Doodle-js - HTML5 Canvas 动画库 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 Doodle-js 是一个专为HTML5 Canvas设计的JavaScript动画库。尽管当前项目状态标记为不活跃，但它的代码仍然极具参考价值，尤其是对于那些来自Flash世界的开发者来说。这个项目启发了作者创作了《Foundation HTML5 ...
2021- css-doodle
itwangyang520的博客
10-24 404
css-doodle 一、 入门 1. 安装 1.1. 直接下最新版本或直接从 CDN ： <script src = "https://unpkg.com/css-doodle@0.19.2/css-doodle.min.js" ></script> <css-doodle > /* 把你的代码放在这里 */ </css-doodle> 1.2. npm 或者 yarn导入 yarn add css-doodle # or npm install c
css-doodle学习第四天 属性
qq_36418362的博客
05-26 425
在上一篇中我们讲诉了选择器的使用，在这一篇中，主要讲述的是属性（对不起大家哈，之前准备软考去了，也没考好，状态有点不在） 下图是官网中css-doodle的属性 首先向大家描述的则是第一个属性：@grid属性 这个属性是用来定义整个表格的格子数和格子的一些属性的，之前在csss-doodle的标签中演示过，使用grid标签属性也能够定义一个表格，那这个属性和标签属性肯定是有不同的区别的，...
All Doodle games-1.0.zip
12-26
如果您是GoogleDoodle游戏的粉丝，那么将GoogleDoodle制作的所有游戏聚合到一个地方的扩展程序对您来说可能是一个方便的工具。通过此扩展，您可以回到过去并玩针对特定事件的爱和关怀制作的游戏。游戏集合始终是最新...
doodle-champion-island-games-Google:谷歌对Doodle Champion Island Games的离线修改
08-03
这是 Google 和 Studio 4°C 的 Doodle Champion Island Games 的离线备份副本。 游戏已被修改为强制加载英文文本并强制全屏，以及其他一些小改进，例如关闭基于 Gecko 的浏览器的平滑（并强制使用 moz-opaque），...
谷歌师兄的leetcode刷题笔记-google-doodle-2:谷歌涂鸦斗
06-30
谷歌师兄的leetcode刷题笔记谷歌涂鸦 2 我的 Google Doodle 将围绕我对 Subarus 的喜悦以及对 Subarus 拉力赛年代（1995-1997）的一种致敬。 我将使用我兄弟的汽车作为我的 SVG 的基础，我将在屏幕上漂移，在它后面...
Doodle Trump-crx插件
03-11
帮助Doodle Trump变得越来越高 他真的很喜欢墙！ 两个有趣的东西一起倒入锅中。 女士们，先生们...向涂鸦特朗普问好！ 嘟嘟特朗普一直希望自己名列前茅。 把他送到那里是你的工作。 您可以使用键盘在平台上引导他。 ...
Doodle Riddle-JavaScript Windows 8游戏
04-07
Windows 8平板PC的设计考虑到了触控操作，因此在开发《Doodle Riddle》时，开发者需要特别关注触控事件的处理，确保游戏适配各种触摸手势，如滑动、点击、捏合等。此外，为了适应不同的屏幕尺寸和分辨率，游戏可能...
ref存储对象和reactive深度响应式递归地对对象的嵌套属性进行响应式处理
lf_1234的博客
08-06 872
摘要：ref 不会递归处理对象的嵌套属性，仅对顶层数据进行响应式处理。若需深度响应式，应使用 reactive。示例中，ref 存储的嵌套对象 profile 修改后视图不会更新，而 reactive 能确保嵌套属性（如 age）触发更新。总结：ref 适合基本类型或简单对象（需 .value），reactive 适合复杂对象（自动深度响应式）。
使用萤石云播放视频及主题模版配置
多看书少吃饭的博客
08-07 495
本文介绍了如何在H5页面中集成萤石云视频播放功能。首先需要安装ezuikit-js依赖，然后通过EZUIKitPlayer组件传入accessToken和视频URL即可实现基础播放功能。文章详细说明了两种版本（UIKIT和UIKITPRO）的区别，并提供了完整的代码示例，包括视频容器设置、自动播放配置和样式调整。此外，还介绍了如何通过template字段自定义视频主题模板，包括官方模板和自定义模板两种方式。最后提及了WEB端和H5端均可进行模板配置，为开发者提供了完整的萤石云视频接入解决方案。
【JS】扁平树数据转为树结构
此人太懒，没有任何简介
08-07 187
摘要：本文展示了如何将扁平数据结构转换为树形结构的JavaScript实现。通过buildTree函数，可以根据指定的ID和父ID字段将扁平数据转换为嵌套的树形结构，并可选地删除空子节点。示例代码演示了如何将包含公司部门信息的扁平数据转换为层级分明的树状结构，结果输出为JSON格式的树形数据。该工具函数适用于处理组织机构、菜单等需要层级展示的数据场景。
Vite 深度解析：现代前端开发引擎
最新发布
weixin_43822134的博客
08-08 718
Vite 代表了前端工具链从"打包时代"向"原生ESM时代"的演进，其核心价值在于将开发者从构建等待中解放出来。虽然Webpack在复杂场景下仍有优势，但Vite已成为现代前端开发的默认选择。
Vue3 学习教程，从入门到精通， Vue 3 实例选项语法详解与案例代码(29）
qq_45746668的博客
08-07 981
本文详细介绍了Vue 3的实例选项语法，包括数据选项、DOM选项、生命周期钩子等核心概念。通过一个完整的待办事项应用示例，展示了各选项的实际应用场景，如data定义响应式数据、methods编写组件方法、computed计算属性、watch监听数据变化等。示例代码包含详细注释，涵盖组件注册、指令定义、事件处理等常见功能，并演示了从父组件到子组件的数据传递和通信方式。文章适合Vue 3初学者全面了解组件选项的用法和组合方式。
JavaScript Array（数组）
wjs2024的博客
08-07 583
Array 对象是 JavaScript 中的一个内置对象，它提供了一系列用于数组操作的函数和方法。使用 Array 对象可以方便地创建、访问、修改和删除数组元素。本文详细介绍了 JavaScript 中的 Array 对象，包括其基本用法、方法、属性以及在实际开发中的应用。掌握 Array 对象，有助于提高 JavaScript 编程水平，提升开发效率。希望本文对您有所帮助。2278字标题包含关键词“JavaScript”和“Array”，提高搜索排名。
最新Google涂鸦通知插件：Doodle Notifier-crx发布
标题中的“Google:trade_mark: Doodle Notifier-crx插件”表明这是一个以“Google Doodle Notifier”为名的浏览器插件，并且它是一个CRX格式的文件。CRX是Google Chrome浏览器扩展程序的标准文件格式。通常，用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值