粒子爱心特效||轻松实现浪漫效果||完整代码

关注微信公众号「ClassmateJie」有完整代码以及更多惊喜等待你的发现。

简介/效果展示

你是否曾经想过,在特殊的日子里给你的爱人一个惊喜?或者在朋友的生日派对上,给他们展示一个充满爱意的特效?今天,我要分享一个我亲身试验过的方法,让你轻松实现这个愿望。那就是——HTML粒子爱心特效代码。
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>粒子爱心</title>
</head>
<style>html,body {height: 100%;padding: 0;margin: 0;background: #000;}img {display: block;margin: 0 auto;}label {display: block;margin: 0 auto;color: pink;font-size: 20px;padding-right: 5px;animation: mymove 2.5s infinite;-webkit-animation: mymove 2.5s infinite;}@keyframes mymove {50% {font-size: 40px;}}@-webkit-keyframes mymove {50% {font-size: 40px;}}.middle {width: 100%;height: 100vh;display: flex;align-items: center;}.middle2 {position: absolute;z-index: 2;width: 100%;height: 100%;margin: auto;display: flex;align-items: center;}
</style>
<link rel="stylesheet" href="./style.css">
<body><div class="middle"><div class="middle2"></div><img src="https://pic.imgdb.cn/item/642547f5a682492fcc15cd5d.gif" width="1000" height="650" /></div>
</body>
</html>

代码讲解

这段代码是一个基本的HTML结构,用于展示一个带有动画效果的网页,主要内容是一个粒子爱心的GIF图片。

  • HTML结构
声明文档类型为HTML5。 设定语言为英文。 区块包含了文档的元数据和样式链接。 标签设置了字符集、兼容性视图以及响应式视图的初始缩放。 定义了网页的标题为“粒子爱心”。 引入外部样式表`style.css`,假设其中包含更多的样式定义。 包含了网页的所有可显示内容。 + CSS样式

通过

  • 页面内容

页面主体部分由一个.middle容器构成,里面直接嵌套了一个空的.middle2容器以及一个标签。GIF图片的URL指向一个外部资源,展示了一个粒子组成的爱心动画,尺寸被设定为宽1000px,高650px。

在这里插入图片描述

关注微信公众号「 ClassmateJie
更多惊喜等待你的发掘

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

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

相关文章

VUE3-form表单保存附件与基本信息

element-ui代码 <el-dialog :title"上传附件" v-model"dialogAdds.visible" width"500px" append-to-body> <el-form-item label"唯一标识"> <dict-tag v-if"form.groupId" :options"unique_identifica…

性能怪兽!香橙派 Kunpeng Pro 开发板深度测评,带你解锁无限可能

性能怪兽&#xff01;香橙派 Kunpeng Pro 开发板深度测评&#xff0c;带你解锁无限可能 文章目录 性能怪兽&#xff01;香橙派 Kunpeng Pro 开发板深度测评&#xff0c;带你解锁无限可能一、背景二、香橙派 Kunpeng Pro 硬件规格概述三、使用准备与系统安装1️⃣、系统安装步骤…

【C++】浅论(cin和cout)的解锁、缓冲区的理解、CC++输入方法汇总和详解

一、cin,cout解锁 1.1&#xff1a;cin,cout解锁以及why 首先cin和cout是在c中为了提供类型安全和易用性设计的&#xff0c;它兼容了c语言的输入和输出&#xff0c;以上几点导致它在性能行&#xff08;读取和输出速度)远不如传统c语言的输入和输出。 在看到一些代码里面&…

Python 脚本化 Git 操作:简单、高效、无压力

前言 如何判定此次测试是否达标&#xff0c;代码覆盖率是衡量的标准之一。前段时间&#xff0c;利用fastapi框架重写了覆盖率统计服务&#xff0c;核心其实就是先获取全量代码覆盖率&#xff0c;然后通过diff操作统计增量代码覆盖率&#xff0c;当然要使用diff操作&#xff0c…

Java中Stack的使用详解

Stack是一种运算受限的线性表&#xff0c;其特点在于仅允许在表的一端&#xff08;即表尾&#xff09;进行插入和删除操作。这一端被称为栈顶&#xff0c;而相对的另一端则称为栈底。向一个栈插入新元素的操作称为进栈或入栈&#xff0c;它将新元素放到栈顶元素的上面&#xff…

从杂乱无章到井井有条——五款笔记软件,重塑工作与生活

记得刚入职场那会&#xff0c;我总是被各种繁杂的信息和任务搞得焦头烂额。会议记录、项目计划、灵感闪现……这些都需要我随时记录和整理。 然而&#xff0c;我的桌面总是堆满了便签纸和草稿本&#xff0c;手机相册里充斥着各种截图和备忘录&#xff0c;每次需要查找资料都像…

【数据结构】红黑树——领略天才的想法

个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 祝福语&#xff1a;愿你拥抱自由的风 目录 二叉搜索树 AVL树 红黑树概述 性质详解 效率对比 旋转操作 元素操作 代码实现 二叉搜索树 【数据结构】二叉搜索树-CSDN博客 AVL树 【数据结构】AVL树——平衡二叉搜索…

深度学习实战-yolox训练ExDark数据集(附全过程代码,超详细教程,无坑!)

跳转:数据集获取以及前期准备工作 本人在深度学习实战-yolov5训练ExDark数据集(附全过程代码,超详细教程,无坑!)的数据基础上实现yolox的训练,所以先跳转到该文章下去获取数据集,再继续接下来操作过程。 一、VOC格式数据集制作 1.前期工作 2.转变成voc格式 在datase…

Latex:newcommand

参考文献&#xff1a; latex中自定义的命令———\newcommand-CSDN博客LaTeX技巧924&#xff1a;详解newcommand的参数和默认值 - LaTeX工作室 (latexstudio.net) 文章目录 (re)newcommand自定义的一些命令 (re)newcommand ”定义命令“ 的定义&#xff1a; \newcommand{<…

[每周一更]-(第98期):PHP版本的升级历程

文章目录 大致历程PHP/FI (PHP 1.0)PHP 2.0PHP 3.0PHP 4.0PHP 5.0PHP 5.3 - 5.6PHP 7.0PHP 7.1 - 7.4PHP 8.0PHP 8.1 - 8.2 参考 PHP&#xff0c;即“超文本预处理器”&#xff08;Hypertext Preprocessor&#xff09;&#xff0c;是广泛应用于web开发的服务器端脚本语言。自19…

什么是独特摆动交易策略?fpmarkets1分钟讲清楚

摆动交易策略想必各位投资者都已经接触过了&#xff0c;但是什么是独特摆动交易策略&#xff1f;各位投资者知道吗&#xff1f;其实很简单&#xff0c;这是一种基于斐波纳契工具的独特摆动交易策略。下面fpmarkets1分钟讲清楚&#xff0c;趋势总会经历调整&#xff0c;而这些调…

【机器学习】Python中的决策树算法探索

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 Python中的决策树算法探索引言1. 决策树基础理论1.1 算法概述1.2 构建过程 2. P…

数据集003:猫类识别-12种猫分类数据集 (含数据集下载链接)

数据集简介&#xff1a; 训练集共有2160张猫的图片, 分为12类. train_list.txt是其标注文件 测试集共有240张猫的图片. 不含标注信息. 训练集图像&#xff08;部分&#xff09; 验证集图像&#xff08;部分&#xff09; 标签 部分代码&#xff1a; # 定义训练数据集 class T…

eNSP华为模拟器-DHCP配置

拓扑图 要求 PC1通过DHCP获取192.168.1.1地址PC2和PC3通过DHCP接口地址池方式获取IP地址配置静态路由使其ping通 配置 配置主机名及接口IP地址 # AR1 <Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]sys AR1 [AR1]int g0/0/0 [AR1-Gigabit…

去重复记录和排序——kettle开发09

一、去除重复记录 去除重复记录&#xff0c;就是将数据流中的数据进行字段比较&#xff0c;从而去掉重复值的过程。去除重复记录的前提是需要将数据流中的数据进行排序&#xff0c;然后再进行去重操作。 去除重复记录的逻辑是&#xff0c;如下图&#xff0c;我们将需要比较的…

基础使用-SQL-图形化界面工具DataGrip

一、连接mysql &#xff08;1&#xff09;选择加号&#xff0c;再选择添加一个数据源&#xff08;Data Source&#xff09;&#xff0c;然后选择MySQL &#xff08;2&#xff09;接下来就需要去配置MySQL的连接信息&#xff0c;并且去下载它的驱动&#xff0c;安装驱动时可能要…

微信公众号怎么做留言板功能

在繁忙的都市生活中&#xff0c;你是否常常感到孤单、渴望有一个可以倾诉心声的地方&#xff1f;今天&#xff0c;我要为大家介绍一个特别的角落——我们公众号的留言板功能。它不仅是一个留言板&#xff0c;更是一个情感交流的平台&#xff0c;一个可以让我们彼此心灵相通的桥…

百度发布代码辅助工具,超强

不会用AI的程序员&#xff0c;会跟不会用智能手机的人一样 百度这个代码助手助手感觉还是不错的 https://comate.baidu.com/?inviteCodeijmce7dj 目前看下来这个代码助手是比较强的&#xff0c;比阿里的那个灵码好用&#xff0c;他可以引用到当前的文件&#xff0c;并且能分…

idea改了代码,但是需要紧急切换分支,需要把改动的保存到本地

但是如果有冲突&#xff0c;你没有合并&#xff0c;那也会丢哦&#xff01; 改完那个分支&#xff0c;回到这个分支然后弹出来再。

Delphi 程序例子(DPI变化自动感知及显示器相关功能演示)

目录 一、前言 二、Delphi 演示程序&#xff08;D12版本&#xff0c;用D11也都可以&#xff09; 1. 演示程序功能&#xff1a; 2. 程序界面&#xff1a; 3. 程序源代码下载&#xff08;有偿&#xff09;&#xff1a; 一、前言 系列文章&#xff1a; 彻底搞懂 Windows 显示…