HTML好玩代码合集(1)

news2024/10/5 18:29:27

VIP代码合集🧧,这一期是场景式HTML代码,里面的文字也是可以修改的,不知道怎么修改可以私信我。

效果(玩个梗,别在意):

好玩代码:

<!DOCTYPE html>
<html>
{#jishugang#}
  <head>
    <meta charset="utf-8" />
    <title>怎么堵船了🛥</title>//还有这里
 
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background: #000;
       overflow: hidden;
      }
      canvas {
        display:block;
        position: absolute;
        width: 100%;
        height: 100%;
 
      }
	#pinkboard{
        animation: anim 1.5s ease-in-out infinite;
        -webkit-animation: anim 1.5s ease-in-out infinite;
        -o-animation: anim 1.5s ease-in-out infinite;
        -moz-animation: anim 1.5s ease-in-out infinite;
	}
      #name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: -20px;
        font-size: 46px;
        color: #ea80b0;
 
      }
      @keyframes anim {
        0% {
          transform: scale(0.8);
        }
        25% {
          transform: scale(0.7);
        }
        50% {
          transform: scale(1);
        }
        75% {
          transform: scale(0.7);
        }
        100% {
          transform: scale(0.8);
        }
      }
      @-webkit-keyframes anim {
        0% {
          -webkit-transform: scale(0.8);
        }
        25% {
          -webkit-transform: scale(0.7);
        }
        50% {
          -webkit-transform: scale(1);
        }
        75% {
          -webkit-transform: scale(0.7);
        }
        100% {
          -webkit-transform: scale(0.8);
        }
      }
      @-o-keyframes anim {
        0% {
          -o-transform: scale(0.8);
        }
        25% {
          -o-transform: scale(0.7);
        }
        50% {
          -o-transform: scale(1);
        }
        75% {
          -o-transform: scale(0.7);
        }
        100% {
          -o-transform: scale(0.8);
        }
      }
      @-moz-keyframes anim {
        0% {
          -moz-transform: scale(0.8);
        }
        25% {
          -moz-transform: scale(0.7);
        }
        50% {
          -moz-transform: scale(1);
        }
        75% {
          -moz-transform: scale(0.7);
        }
        100% {
          -moz-transform: scale(0.8);
        }
      }
    </style>
  </head>
  <body>
    <canvas id='canv'></canvas>
    <canvas id="pinkboard"></canvas>
     <div id="name" style="color: pink;">怎么堵船了🛥</div>//在这里改
   <script>
            var c = document.getElementById('canv');//获取canvas的Id
            var $ = c.getContext('2d');/*设置绘制方式*/
            var u = 0;
 
            var go = function() {
              var sc, g, g1, i, j, p, x, y, z, w, a, cur,
                d = new Date() / 1000,
                rnd = shift(),
                rnd1 = d,
      

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1463487.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【鸿蒙 HarmonyOS 4.0】UIAbility、页面及组件的生命周期

一、背景 主要梳理下鸿蒙系统开发中常用的生命周期 二、UIAbility组件 UIAbility组件是一种包含UI界面的应用组件&#xff0c;主要用于和用户交互。 UIAbility组件是系统调度的基本单元&#xff0c;为应用提供绘制界面的窗口&#xff1b;一个UIAbility组件中可以通过多个页…

300分钟吃透分布式缓存-08讲:MC系统架构是如何布局的?

系统架构 我们来看一下 Mc 的系统架构。 如下图所示&#xff0c;Mc 的系统架构主要包括网络处理模块、多线程处理模块、哈希表、LRU、slab 内存分配模块 5 部分。Mc 基于 Libevent 实现了网络处理模块&#xff0c;通过多线程并发处理用户请求&#xff1b;基于哈希表对 key 进…

软考-中级-系统集成2023年综合知识(一)

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 软考中级专栏回顾 专栏…

H5星空渐变效果引导页源码

H5星空渐变效果引导页源码 源码介绍&#xff1a;H5星空渐变效果引导页源码是一款带有星空渐变效果的源码&#xff0c;内含3个可跳转旗下站点按钮。 下载地址&#xff1a; https://www.changyouzuhao.cn/8344.html

Java 面向对象进阶 16 接口的细节:成员特点和接口的各种关系(黑马)

成员变量默认修饰符是public static final的原因是&#xff1a; Java中接口中成员变量默认修饰符是public static final的原因是为了确保接口的成员变量都是公共的、静态的和不可修改的。 - public修饰符确保了接口的成员变量可以在任何地方被访问到。 - static修饰符使得接口…

进程线程间的通信:2024/2/22

作业1&#xff1a;代码实现线程互斥机制 代码&#xff1a; #include <myhead.h>//临界资源 int num10;//创建一个互斥锁 pthread_mutex_t mutex;//任务一 void *task1(void *arg) {//获取锁资源pthread_mutex_lock(&mutex);num123;sleep(3);printf("task1:num…

jvm垃圾收集器-三色标记算法

1.对象已死吗? 在堆里面存放着Java世界中几乎所有的对象实例&#xff0c;垃圾收集器在对堆进行回收前&#xff0c;第一件事情就是要确定这些对象之中哪些还“存活”着&#xff0c;哪些已经“死去”&#xff08;即不可能再被任何途径使用的对象). 引计数法 引用计数算法是一…

dubbo源码中设计模式——注册中心中工厂模式的应用

工厂模式的介绍 工厂模式提供了一种创建对象的方式&#xff0c;而无需指定要创建的具体类。 工厂模式属于创建型模式&#xff0c;它在创建对象时提供了一种封装机制&#xff0c;将实际创建对象的代码与使用代码分离。 应用场景&#xff1a;定义一个创建对象的接口&#xff0…

深入理解C语言(5):程序环境和预处理详解

文章主题&#xff1a;程序环境和预处理详解&#x1f30f;所属专栏&#xff1a;深入理解C语言&#x1f4d4;作者简介&#xff1a;更新有关深入理解C语言知识的博主一枚&#xff0c;记录分享自己对C语言的深入解读。&#x1f606;个人主页&#xff1a;[₽]的个人主页&#x1f3c4…

C++ 八数码问题理解 `IDA*` 算法原则:及时止损,缘尽即散

1.前言 八数码是典型的状态搜索案例。如字符串转换问题、密码锁问题都是状态搜索问题。 状态搜索问题指由一种状态转换到到最终状态&#xff0c;求解中间需要经过多少步转换&#xff0c;或者说最小需要转换多少步&#xff0c;或者说有多少种转换方案。本文和大家聊聊八数码问…

【QT 5 +Linux下软件桌面快捷方式+qt生成软件创建桌面图标+学习他人文章+第二篇:编写桌面文件.desktop】

【QT 5 Linux下软件桌面快捷方式qt生成软件创建桌面图标学习他人文章第二篇&#xff1a;编写桌面文件.desktop】 1、前言2、实验环境3、自我学习总结-本篇总结1、新手的疑问&#xff0c;做这件事目的2、了解.desktop3、三个关键目录以及文件编写1、目录&#xff1a;/opt/2、目录…

threeJS 全屏或非全屏状态下鼠标点击获取屏幕位置

使用threeJS引入模型进行点击事件&#xff0c;其实有一个是将获取到坐标位置进行webgl坐标系的转换 全屏状态&#xff1a; 全屏状态下直接利用window.innerWidth和 window.innerHeight进行计算即可&#xff0c;代码如下 // 校验控制器旋转的时候不触发点击事件boxClickEvent(…

【2024软件测试面试必会技能】Selenium(6):元素定位_xpath定位

XPATH是什么 XPATH是一门在XML文档中查找信息的语言&#xff0c;XPATH可用来在XML文档中对元素和属性进行遍历&#xff0c;主流的浏览器都支持XPATH&#xff0c;因为HTML页面在DOM中表示为XHTML文档。Selenium WebDriver支持使用XPATH表达式来定位元素。 Xpath常用如下6种定位…

《论文阅读》e-CARE:探索可解释因果推理的新数据集 ACL2022

《论文阅读》e-CARE:探索可解释因果推理的新数据集 ACL2022 前言简介数据集优势数据集语料级别的统计数据集示例评分标准前言 今天为大家带来的是《e-CARE: a New Dataset for Exploring Explainable Causal Reasoning》 出版:ACL 时间:2022 类型:因果推理 关键词:情绪…

virtualbox虚拟机运行中断,启动报错“获取 VirtualBox COM 对象失败”

文章目录 问题现象排查解决总结 问题现象 2月7日下午四点多&#xff0c;我已经休假了&#xff0c;某县的客户运维方打来电话&#xff0c;说平台挂了&#xff0c;无法访问客户是提供的一台Windows server机器部署平台&#xff0c;是使用virtualbox工具安装的CentOS7.9虚拟机和运…

Linux基础知识——Linux是什么及发展史

文章目录 Linux是什么Linux之前Unix发展史MulticsUnicsUnixUNIX分支--BSDUNIX分支--System VMinixGUN计划GPLXFree86Linux 开源软件和闭源软件开源软件闭源软件/专利软件(copyright) Linux的内核版本Linux发行版 Linux是什么 Linux到底是操作系统还是应用程序呢&#xff1f;Li…

2024最佳住宅代理IP服务商

跨境出海已成为了近几年的最热趋势&#xff0c;大批量的企业开始开拓海外市场&#xff0c;而海外电商领域则是最受欢迎的切入口。新兴的tiktok、Temu&#xff0c;老牌的Amazon、Ebay&#xff0c;热门的Etsy、Mecari等等都是蓝海一片。跨境入门并不难&#xff0c;前期的准备中不…

论文精读--Noisy Student

一个 EfficientNet 模型首先作为教师模型在标记图像上进行训练&#xff0c;为 300M 未标记图像生成伪标签。然后将相同或更大的 EfficientNet 作为学生模型并结合标记图像和伪标签图像进行训练。学生网络训练完成后变为教师再次训练下一个学生网络&#xff0c;并迭代重复此过程…

图形系统开发实战课程:进阶篇(上)——6.图形交互操作:拾取

图形开发学院&#xff5c;GraphAnyWhere 课程名称&#xff1a;图形系统开发实战课程&#xff1a;进阶篇(上)课程章节&#xff1a;“图形交互操作:拾取”原文地址&#xff1a;https://www.graphanywhere.com/graph/advanced/2-6.html 第六章 图形交互操作:拾取 \quad 在图形系统…

Linux中安装Nginx及日常配置使用

高性能的http服务器/反向代理服务器。官方测试支持5万并发&#xff0c;CPU、内存等消耗较低且运行稳定 使用场景 Http服务器。 Nginx可以单独提供Http服务&#xff0c;做为静态网页的服务器。虚拟主机。 可以在一台服务器虚拟出多个网站。反向代理与负载均衡。 Nginx做反向代理…