情人节-动态爱心背景(html5+css+js)

2023-11-06

一、效果图

二、源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>情人节爱心背景</title>

<style>
body{
  overflow: hidden;
  margin: 0;
}
h1{
  position: fixed;
  top: 40%;
  left: 0;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 40px;
  color: #c70012;
  padding: 0 20px;
}

@media (min-width:1200px){
  h1{
    font-size: 100px;
  }
}
</style>

</head>
<body>

<canvas></canvas>
<h1>情人节快乐!</h1>

<script>
var canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d"
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

情人节-动态爱心背景(html5+css+js) 的相关文章

  • unicode 表情符号在 Chrome 上不显示

    当我将 unicode 表情符号插入 span 使用标准 jQuery 它们不会出现在 Chrome v48 中 但会出现在 Firefox v43 和 Safari v9 中 比较这些屏幕截图 CHROME FIREFOX 这里有什么解释
  • f:ajax 不工作

    我很难得到f ajax从事某项工作h panelGroup 这就是我正在做的 JSF 代码
  • HTML5旋转动画——如何显示“硬币的另一面”?

    考虑到这个 JSFiddle 旋转示例 https jsfiddle net 194288aw HTML div class container div class coin div class face heads Hey div div
  • 是否可以将CSS应用于半个字符?

    我在寻找什么 一种打造风格的方法HALF一个角色的 在这种情况下 一半的字母是透明的 我目前搜索和尝试过的内容 没有运气 设置半个字符 字母样式的方法 使用 CSS 或 JavaScript 设置字符的一部分样式 将 CSS 应用于字符的
  • 使用 Objective-C 将 HTML 文本转换为纯文本

    我有巨大的NSString里面有 HTML 文本 该字符串的长度超过 3 500 000 个字符 我怎样才能将此 HTML 文本转换为NSString里面有纯文本 我正在使用扫描仪 但它运行速度太慢 任何想法 这取决于您的目标 iOS 版本
  • 阻止表单 POSTing,直到 javascript 代码得到满足

    每当我点击提交按钮时它就会触发alert empty username 但直接引导我去checklogin php 我怎样才能避免这种情况并让它保留在页面上 除非该字段不为空 function RequiredFields var user
  • 有没有办法有一个屏蔽数字输入字段?

    我正在 Android 上创建一个 HTML5 应用程序 对于这个特定场景 我们有一个用于信用卡安全代码的输入字段 我们希望强制输入字段仅包含数字并被屏蔽 我没有运气搜索这个特定的案例 从我自己研究 尝试中可以看出 这不能纯粹通过 HTML
  • 设置overflow-y可见,而overflow-x为auto,以便内容可以垂直溢出父容器

    我在用着position absolute and position relative如果将其父级悬停在图像上 则在图像上显示文本 文本和图像父 div 所在的容器设置为overflow x auto 使其具有水平滚动条 我想要看起来垂直溢
  • 如何将div内容添加到jspdf中的新页面?

    如何将div内容添加到jspdf中的新页面 我尝试使用 br 它创建了一个新页面 但我看不到内容 div div style margin 3px 430px First Page div div Place content to Seco
  • 如何用Python抓取动态网页

    我正在努力做什么 抓取下面的网页以获取二手车数据 Issue 刮掉整个页面 在上面的 url 中 仅显示前 30 项 这些可以通过我在下面编写的代码来抓取 其他页面的链接显示为 1 2 3 但链接地址似乎是用 Javascript 编写的
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • Li向左浮动,长度动态:最后一行无边框底部

    情况如下 https jsfiddle net rpepf9xs https jsfiddle net rpepf9xs 我想用选择器 nth last child 删除边框底部 但是 如果列表中只有8个 li 则会出现如下错误 ul di
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • 为什么我不能在 TCPDF 表中使用 č,ć,đ 图表?

    我正在为我的网站构建一个 tcpdf 文件 该 tcpdf 文件中有一个包含一些数据的表格 但我无法使该章程正常工作 对于编码 我使用 windows 1250 宪章女巫不起作用 我已经尝试过 utf 8 但仍然没有得到这个章程 tcpdf
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a

随机推荐