首页 > 其他分享 >有趣的前端代码

有趣的前端代码

时间:2023-11-16 11:14:51浏览次数:26  
标签:style 代码 random transform jump dot 有趣 前端 Math

# 随机位置随机颜色的点
    <script>
        setInterval(function() {
  var dot = document.createElement("div");
  dot.style.position = "fixed";
  dot.style.top = Math.random() * 100 + "%";
  dot.style.left = Math.random() * 100 + "%";
  dot.style.width = "10px";
  dot.style.height = "10px";
  dot.style.borderRadius = "50%";
  dot.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);
  document.body.appendChild(dot);
}, 1000);
    </script>


   
# 元素跳动
 <style>
        @keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.jump-element {
  animation: jump 1s infinite;
}
    </style>

  


标签:style,代码,random,transform,jump,dot,有趣,前端,Math
From: https://www.cnblogs.com/lytcreate/p/17835750.html

相关文章

  • git拉取项目失败怎么办? 前端vue2 都需要install 什么依赖
    gitconfig--list--show-origin查看git文件下面所有对应文件目录下面是设计配置文件http的缓存大小和那个最低时间和速度gitconfig--globalhttp.lowSpeedTime999999gitconfig--globalhttp.lowSpeedLimit0gitconfig--globalhttp.postBuffer1048576000 ......
  • setTimeout可以将字符串当成代码执行,类比eval函数。当遇到setTimeout或者SetInterval,
    请问以下JS代码的输出顺序是?letdate=newDate()setTimeout(()=>{console.log('1')},2000)setTimeout('console.log(2)',1000);setTimeout(function(){console.log('3')},1500);while((newDate()-date)<3000){}A报错B......
  • 微前端 micro-app 传参、通信
    微前端micro-app传参、通信 环境及配置,参考:https://www.cnblogs.com/1285026182YUAN/p/17828681.html 1. 应用传参主应用:<template><divclass="container"><micro-appname="my-app-page1"url="http://localhost:5173/stand&quo......
  • 代码书写格式
    书写格式:1、命名格式:小驼峰:myAgeIs除了第一个单词,后面每个单词首字母大写大驼峰:MyAgeIs所有单词首字母大写2、空格:i=i+1;操作符左右有空格,和;前一位没有空格,后一位有空格控制语句(while,if,for)后有空格while(n){大括号{前有空格。......
  • 【数字识别】基于机器视觉的字符识别语言播报附附Matlab代码
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,代码获取、论文复现及科研仿真合作可私信。......
  • 【路径规划】基于动态窗口法DWA算法的机器人动态避障路径规划研究附Matlab代码
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,代码获取、论文复现及科研仿真合作可私信。......
  • 【misc】[SDCTF 2022]Flag Trafficker --jsFuck代码
    附件下载下来是一个流量包,用wireshark打开该流量包,然后搜索字符串"flag",就会出现如下的jsfuck代码右键onlick显示分组字节可以看到很大一串的jsfuck代码,现在是需要运行这段代码,可利用在线网站运行:JSFuck-在线加解密(bugku.com),运行完就是flag还可以保存为html文件在浏......
  • 【re】brainfuck转python代码
    直接用脚本:defshrinkBFCode(code):  cPos2Vars={} #位置对应的变量  cPos2Change={} #位置中+号增加的值  varPos=0  nCode=[]  incVal=0  lc=None  dataChangeOp=set(['+','-'])  dataShiftOp=set(['>',&#......
  • Chen Shuo's Practical Network Programming - TTCP Lecture代码注释
    下面是C语言版本的TTCP,主要注释的是voidreceive(constOptions&opt);函数,负责在服务器接收客户端发送的数据://muduo/examples/ace/ttcp/ttcp_blocking.cc#include...//接受新的TCP连接staticintacceptOrDie(uint16_tport){...}//完整的写N个字节staticint......
  • 代码整洁之道笔记2
    三.函数短小,只做一件事每个函数一个抽象层级1.要确保函数只做一件事,函数中的语句都要在同一抽象层级上2.自顶向下读代码:向下规则,让代码拥有自顶向下的阅读顺序,让每个函数后面都跟着下一抽象层级的函数,这样一来,在看函数列表时,就能循抽象层级向下阅读了,我把这叫做向下规则switch......