HTML5仿照百度搜索黑洞效果

港控/mmm° 2022-06-15 06:23 130阅读 0赞

<html>

<head>

<title>仿照百度搜索黑洞效果</title>

</head>

<style>

@-webkit-keyframes rotates \{

0% \{

-webkit-transform: rotate(0deg);

\}

100% \{

-webkit-transform: rotate(360deg);

\}

\}

</style>

<body>

<img src="blackhole.png" id="img" class="ops-blackhole" style="display: block; width: 0px; height: 0px; animation: rotates 3s linear infinite; position: fixed; z-index: 302; left: 0px; top: 0px; padding: 0px;">

</body>

<script>

var img = document.getElementById('img');

var flag = true;

setInterval(function()\{

var imgWidth = img.style.width;

var imgHeight = img.style.height;

var tempWidth = imgWidth.substring(0,imgWidth.length-2);

var tempHeight = imgWidth.substring(0,imgHeight.length-2);

if((flag && tempWidth < 1500) || parseInt(tempWidth) == 0 )\{

img.style.width = (tempWidth != 0 ? parseInt(tempWidth) : 0) + Math.random()\*100 + 'px';

img.style.height = (tempHeight != 0 ? parseInt(tempHeight) : 0) + Math.random()\*100 + 'px';

flag = true;

\}else\{

img.style.width = parseInt(tempWidth) - Math.random()\*10 + 'px';

img.style.height = parseInt(tempHeight) - Math.random()\*10 + 'px';

flag = false;

\}

img.style.left = Math.random()\*img.style.width - Math.random()\*img.style.width/2 + 'px';

img.style.top = Math.random()\*img.style.height - Math.random()\*img.style.height/2 + 'px';

\},10);

</script>

</html>

效果:

![Center][]

[Center]: /images/20220615/2952fac2e507489fa9dd6439340e3c60.png

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关模拟百度搜索

> 通过jsonp的跨域，实现对百度搜索接口的调用，最终实现模拟搜索的功能。 ![20200313093834129.gif][] <!DOCTYPE html>

不念不忘少年蓝@/ 2023年07月13日 15:16/ 0 赞/ 32 阅读

相关百度搜索技巧汇总

搜索A屏蔽B的信息格式：A -B 例如：科学 -技术注意：- 前必须有空格搜索包含A的信息或者包含B的信息格式：A|B 例如：学习|知识把搜索

叁歲伎倆/ 2022年12月10日 02:29/ 0 赞/ 204 阅读

相关 html5仿百度模板,html5仿百度舆情数据展示页面滚动模板

![b7ef3c80661795b5d4bd5042c6f5ad9d.png][] html5页面滚动展示模板，百度舆情展示页面模板下载资源下载此资源下载价格为4D币，请

本是古典何须时尚/ 2022年10月07日 04:47/ 0 赞/ 152 阅读

相关百度搜索小技巧

> 今日重点： > > 1、百度搜索语法那些不为人知的语法，精准搜索事半功倍。 > > 2、最后放了几个刺激的搜索实战案例。事情是这样的搜索引擎是大家

￡神魔★判官ぃ/ 2022年10月04日 15:43/ 0 赞/ 341 阅读

相关百度通用搜索代码

![20170207162931324][] <iframe id="baiduframe" marginwidth="0" marginheight="0" scr

矫情吗；*/ 2022年07月12日 02:22/ 0 赞/ 209 阅读

相关百度通用搜索代码

![20170207162931324][] <iframe id="baiduframe" marginwidth="0" marginheight="0" scr

￡神魔★判官ぃ/ 2022年07月12日 02:22/ 0 赞/ 263 阅读

相关 HTML5仿照百度搜索黑洞效果

<html> <head> <title>仿照百度搜索黑洞效果</title> </head> <style> @-webkit-keyframes rota

港控/mmm°/ 2022年06月15日 06:23/ 0 赞/ 131 阅读

相关百度搜索框

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <tit

旧城等待，/ 2022年05月06日 03:58/ 0 赞/ 388 阅读

相关 js模拟百度搜索

总体思路：用户在文本框里输入的是什么，就来数组中遍历每个元素，找输入的内容是否在遍历到的元素里面，如果在，就把这个元素做成li标签加到ul里，如果不在就不

怼烎@/ 2022年04月25日 02:22/ 0 赞/ 301 阅读

相关【html5百度地图】简单使用

今天本想着使用下google地图的API，没想到呢，国内这网速又要让我吐槽一番。然后想想，好吧，百度好歹也是国产精英，然后去百度开发者网站看了下，果然不赖，而且和googl

╰半夏微凉°/ 2022年04月21日 14:21/ 0 赞/ 406 阅读