程序员经验分享-hwhale

初学者用html制作的发射爱心

2023-05-16

这个图是自己画的，因为当时在学transition就突然间想画了一个小娃娃发射爱心的图，但是可能是后面另一个娃娃脸变红的图不够精细，图太少了导致前面发射心心的过程很清晰，但是另一个娃娃接受心心后脸红的这一部分没有很好的呈现，如果有人使用它的话可以再往后面加几帧。

目录

代码：

所需的图片：

使用到的知识：

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>biu!</title>
    <style>
        div {
            width: 167px;
            height: 126px;
            background: url(WPS.png);
            transition: 2s steps(20);
        }

        div:hover {
            background-position: left -2766px;  
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

所需的图片：

使用到的知识：

 过渡的属性transition

作用：可以让用户看到从一种状态到另一种状态的变化过程

Transtion:过渡时间 过渡属性 运动曲线

过渡时间：单位秒（s）毫秒（ms）

过渡属性：指哪个属性存在过渡效果  默认是all 所有

运动曲线：从一个状态到另一个状态的变化形式 steps（步骤）

注意点：transition不支持display:none与display：block

Transiton如果写在初始位置，鼠标悬停和离开都存在过渡效果

如果写在hover的位置，只有悬停时存在过渡效果

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

初学者用html制作的发射爱心 的相关文章

  • MySQL中多表查询、表连接（内连接和外连接）

    文章目录 表与表的关系 一对一关系 一对多关系 多对多关系 表与表之间的连接 笛卡尔积 什么是笛卡尔积 xff1a 内连接 xff1a 1 通过where关键字进行关联 2 通过inner join on进行关联 外连接 xff1a 1 左

  • MySQL中索引与事务内容总结

    文章目录 x1f440 1 一 索引介绍 1 索引的优缺点 二 索引分类 三 索引的创建与删除 1 在创建表时创建索引 2 在已经存在的表上创建索引 第一种 xff1a 通过create语法创建索引 第二种 xff1a 通过alter语法创

  • Linux Ubuntu 命令行文件系统的创建，挂载，卸载

    我在刚开始操作的时候找不到 dev sdb 即使插入了U盘 xff0c 也没出现 经过翻阅网站 xff0c 才知道要创建新的硬盘 xff08 xff09 其余默认就行 文件系统的创建 1 查看新增硬盘的信息 sudo fdisk l 2 文

  • 408-数据结构-栈应用-括号匹配&表达式求值

    括号匹配 代码中的括号通常符合一下特性 xff1a 括号成对存在左右括号通常类型匹配 xff0c 大括号匹配大括号 如果存在括号序列 xff08 xff08 xff08 xff08 xff09 xff09 xff09 xff08 xff09

  • C语言学习笔记——编写求x的n次方的递归函数，在主函数调用并输出

    题目内容 xff1a 编写求x的n次方的递归函数 xff0c 在主函数调用并输出 x为double型 xff0c n为整型 xff0c 函数类型为double型 xff09 输入格式 lf d 输出格式 xff1a f 输入样例 xff1a

  • Python 输出Print( )函数用法

    目录 print 字符串格式化 格式化符号 format格式化函数 f string print objects sep 61 39 39 end 61 39 n 39 file 61 sys stdout flush 61 False o

  • RVIZ中的fixed frame选项以及“For frame [XX]: Fixed Frame [map] does not exist”

    RVIZ 使用的时候如果fixed frame选项设置不正确 xff0c 那么就会无法显示显示相应的数据信息 xff0c 并提示一下错误 xff1a For frame XX Fixed Frame map does not exist t

  • vim/vi 4种替换方法，批量替换，手动替换

    文件内全部替换 xff1a s abc 123 g 注 xff1a 把abc替换成123 如文件内有 xff0c 可用 替换 s abc 123 g 或者 s str1 str2 g 用str2替换文件中所有的str1 xff09 文件内局

  • C++枚举与字符串之间的转换

    template lt typename EnumType gt struct SEnumName static const char List enum ProgLang e cpp e java e csharp const char

  • kubeadm部署k8s集群

    1 准备环境 虚拟机操作系统 Centos7 角色 IP Master 192 168 150 140 Node1 192 168 150 141 Node2 192 168 150 142 2 系统初始化工作 在三台虚拟机上进行如下操作

  • docker部署redis集群+集群扩缩容

    1 集群规划 3主3从 xff1a nameipportredis node 1192 168 150 1106381redis node 2192 168 150 1106382redis node 3192 168 150 110638

  • ceph-deploy部署指定版本ceph集群

    注意 xff1a 16版本的ceph已经不支持ceph deploy xff0c 安装方法见我的博客 xff1a cephadm快速部署指定版本ceph集群 ggrong0213的博客 CSDN博客 1 集群规划 xff1a 主机名IP组件

  • k8s集群部署Java(springboot)项目

    1 java项目打成jar包 1 1 在IDEA开发工具中使用maven工具将开发完成的SpringBoot项目达成jar包 我自己的项目生成的jar为 xff1a demojenkins jar 1 2 将生成jar包上传到装有docke

  • Netty+MongoDB集群+Kafka集群解决高并发以及实现海量数据存储

    1 环境要求 准备一台安装有Docker的虚拟机 2 Netty简单介绍 Netty 是一个高性能 异步的 基于事件驱动的 NIO 框架 Netty简化和流线化了网络应用的编程开发过程 3 MongoDB简单介绍 MongoDB是一个高可用

  • C语言：从键盘随机输入10个整数，然后输出最大值和最小值

    本题有两种解决方法 xff1a 假设法和选择排序法 1 假设法找最值 include lt stdio h gt int main int a 10 i max mini for i 61 0 i lt 10 i 43 43 scanf s

  • MySQL开启ssl证书

    由于在主从复制中数据是明文的 xff0c 所以就大大降低了安全性 因此需要借助ssl加密来增加其复制的安全性 5 6版本之上 主默认含有证书 MySQL 5 7 18 加密连接mysql ssl rsa setup span class t

  • Vmware16安装（详细）

    目录 1 安装VMware 2 创建虚拟机 3 安装centos 3 IP和主机名称配置 1 安装VMware 之前为了学习Linux系统 xff0c 买了阿里云和腾讯云的服务器 xff0c 不奈什么都没干 xff0c 号就被封了 所有想了

  • mybatis-plus 分页插件

    目录 1 前言 2 配置分页插件 2 1 selectPage 测试 2 2 自定义分页功能 1 前言 大家之前肯定都用过PageHelper来进行分页 xff0c 其实mybatisplus中也提供了一个分页插件PaginationInn

  • STM32cubeIDE学习汇总（二）----外部中断控制LED和流水灯

    基于上篇我们已经基本了解了软件界面和如何创建一个项目了 接着我们看如何利用外部按键来控制LED灯的亮灭 xff0c 即外部中断 xff08 本文讲述的是外部中断控制led取反以及如何实现流水灯 xff09 xff08 如果想了解外部中断如何

  • 技术分享 | Frida 实现 Hook 功能的强大能力

    Frida 通过 C 语言将 QuickJS 注入到目标进程中 xff0c 获取完整的内存操作权限 xff0c 达到在程序运行时实时地插入额外代码和数据的目的 官方将调用代码封装为 python 库 xff0c 当然你也可以直接通过其他的语

随机推荐

  • Lora超全知识归纳，对于lora和lorawan的详细介绍

    目录 LORA介绍 LoRa通讯技术 网关信道 网关负载 LoRa模块信道 节点入网 终端LoRa应用方案 设备唤醒 终端LoRa应用实践 网关详情 Lora和loraWAN LoRaWAN 概貌 LoRaWAN体系结构 LoraWAN g

  • 蒙特卡罗MCNP学习汇总（一）-----MCNP简介及编写第一个程序

    目录 简介 xff1a 什么是MC模拟 介绍 应用 运行 编写第一个程序 格式 程序 讲解 现象 简介 xff1a 什么是MC模拟 一种通过随机抽样解决数学问题的一种数值计算方法 MC方法解决的主要数学问题 数值积分问题 随机物理过程 xf

  • 蒙特卡罗MCNP学习汇总(四)--计数基础-探测器

    MCNP输入文件 Title Card Any information the user desires and describing the particular problem Cell Cards A cell is a 3D reg

  • FPGA学习汇总（六）----数码管显示（1）

    目录 概念 单个数码管显示单个数字 操作 代码 现象 分析 四个数码管定时单个显示数字 分析 代码 四个数码管同时显示 分析 代码 现象 四个数码管同时显示定时转换 分析 代码 概念 我们要搞懂数码管首先要明白几个概念 我们先看一个数码管

  • FPGA学习汇总（七）----数码管显示（2）之计数器

    目录 四位同时显示 16进制计数器 单个数码管十进制计数器 四位数码管十进制计数器 代码 分析 四位同时显示 16进制计数器 module KC8 seg dig clock input clock output 7 0 seg outpu

  • FPGA之四位led灯二进制显示

    代码 xff1a module KC419 led clk 模块名和引脚 output 3 0 led led xff08 四个 xff09 input clk 时钟 reg 3 0 led1 led 四个 reg 24 0 counter

  • JWT签名与本地计算的签名不匹配。JWT有效性无法断言，不应被信任

    JWT签名与本地计算的签名不匹配 JWT有效性无法断言 xff0c 不应被信任 错误 xff1a io jsonwebtoken SignatureException JWT signature does not match locally

  • Java判断回文（正序与反序一样）

    用户输入一串字符串 xff0c Java程序实现对该字符串判断 对回文判断主要分为三种 xff1a 1 纯数字 2 纯字母 3 混合型 1 纯数字 将输入的字符串翻转 xff0c 之后分别转换成int形式 xff0c 比较两个整数大小 xf

  • 数据结构——用栈解决回文字符问题

    回文 回文是指正读反读均相同的字符序列 如 abba 和 abdba 均是回文 xff0c 但 good 不是回文 试写一个算法判定给定的字符序列是否为回文 xff08 提示 xff1a 将一半字符入栈 xff09 所需的知识前提 xff1

  • 使用git在gitee(码云)上创建仓库并且上传代码(超详细)

    一 安装git 可以在git的官网上下载git xff0c 网址为 git scm com 点击下载 xff0c 然后选择自己电脑对应系统的版本下载 博主这里下载的是windows版 xff08 下载慢的同学可以尝试复制下载链接之后到迅雷中

  • MAC OS 安装anaconda之后 conda命令无效

    最近换了mac xff0c 之前安装软件一直被windows惯坏了 xff0c 不是很习惯使用terminal安装 导致安装之后出现了一些小bug xff0c 比如输入conda之后出现 xff1a zsh command not foun

  • #ifdef 和#endif的作用:防止头文件循环引用

    iOS的pch文件中常见的代码解释 一般情况下 xff0c 源程序中所有的行都参加编译 但是有时希望对其中一部分内容只在满足一定条件才进行编译 xff0c 也就是对一部分内容指定编译的条件 xff0c 这就是 条件编译 有时 xff0c 希

  • SQL语句单表查询

    xff1a 代表注释一行 SELECT xff1a 查询关键字 xff0c 遇到select就是做查询 xff1a 代表我们要查询的列 xff0c 位置代表所有列 xff0c 我们也可以相关列 xff0c 当列比较多的时候用逗号分割 FRO

  • 在 Ubuntu 中安装 VSCode

    在 Ubuntu 中安装 VSCode 如果想要通过 ubuntu 安装 vscode 有三种方式 xff0c 可以通过应用中心下载 xff0c 也可以通过安装包下载 xff0c 以及指令安装 方式一 xff1a 首先在 ubuntu 桌面

  • 使用树莓派基于FFmpeg推流视频和摄像头到B站直播间

    文章目录 从B站直播间获取rtmp地址和直播码在终端使用ffpmeg进行视频或摄像头推流用python实现控制树莓派推流如何停止树莓派推流 前提条件 1 首先要有一个树莓派 xff0c 并连接了摄像头 xff0c 且能够访问网络 2 在Bi

  • Godot 学习笔记

    Godot 学习笔记 前言 xff1a 接触Godot的起因源于我想尝试自己制作游戏 xff0c 而常见的游戏引擎有Unity Unreal xff08 虚幻 xff09 xff0c 为什么我会选择Godot呢 xff1f 接下来我会介绍

  • 628. 三个数的最大乘积(傻瓜教程）（python）（LC）

    628 三个数的最大乘积 给定一个整型数组 xff0c 在数组中找出由三个数组成的最大乘积 xff0c 并输出这个乘积 示例 1 输入 span class token punctuation span span class token p

  • 工厂方法模式（python）

    一 模式定义 1 工厂方法模式 Factory Method Pattern 简称工厂模式 xff0c 也叫虚拟构造器 Virtual Constructor 模式或者多态工厂 Polymorphic Factory 模式 xff0c 它属

  • 初学者使用html制作的一个新闻页面

    目录 一些会运用到的知识 xff1a 新闻图示 代码如下 xff1a Css xff1a 中文翻译是层叠样式表 xff08 html的化妆师 xff09 1 Css的语法 2 内部样式表 xff1a 3 选择器 4 Css的属性 新闻图示

  • 初学者用html制作的发射爱心

    这个图是自己画的 xff0c 因为当时在学transition就突然间想画了一个小娃娃发射爱心的图 xff0c 但是可能是后面另一个娃娃脸变红的图不够精细 xff0c 图太少了导致前面发射心心的过程很清晰 xff0c 但是另一个娃娃接受心心

热门标签