2024年最全学会这几款表白特效让你明年双十一不再是一个人

于 2024-05-03 03:18:15 发布
阅读量1.6k 收藏 17
点赞数 24
分类专栏： 程序员 文章标签： java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79058506/article/details/138406121
版权

#ui .love:nth-child(63) .love_horizontal {
animation-delay: -18900ms;
}
#ui .love:nth-child(63) .love_vertical {
animation-delay: -18900ms;
}
#ui .love:nth-child(64) .love_horizontal {
animation-delay: -19200ms;
}
#ui .love:nth-child(64) .love_vertical {
animation-delay: -19200ms;
}
#ui .love:nth-child(65) .love_horizontal {
animation-delay: -19500ms;
}
#ui .love:nth-child(65) .love_vertical {
animation-delay: -19500ms;
}
#ui .love:nth-child(66) .love_horizontal {
animation-delay: -19800ms;
}
#ui .love:nth-child(66) .love_vertical {
animation-delay: -19800ms;
}
#ui .love:nth-child(67) .love_horizontal {
animation-delay: -20100ms;
}
#ui .love:nth-child(67) .love_vertical {
animation-delay: -20100ms;
}
#ui .love:nth-child(68) .love_horizontal {
animation-delay: -20400ms;
}
#ui .love:nth-child(68) .love_vertical {
animation-delay: -20400ms;
}
#ui .love:nth-child(69) .love_horizontal {
animation-delay: -20700ms;
}
#ui .love:nth-child(69) .love_vertical {
animation-delay: -20700ms;
}
#ui .love:nth-child(70) .love_horizontal {
animation-delay: -21000ms;
}
#ui .love:nth-child(70) .love_vertical {
animation-delay: -21000ms;
}
#ui .love:nth-child(71) .love_horizontal {
animation-delay: -21300ms;
}
#ui .love:nth-child(71) .love_vertical {
animation-delay: -21300ms;
}
#ui .love:nth-child(72) .love_horizontal {
animation-delay: -21600ms;
}
#ui .love:nth-child(72) .love_vertical {
animation-delay: -21600ms;
}
#ui .love:nth-child(73) .love_horizontal {
animation-delay: -21900ms;
}
#ui .love:nth-child(73) .love_vertical {
animation-delay: -21900ms;
}
#ui .love:nth-child(74) .love_horizontal {
animation-delay: -22200ms;
}
#ui .love:nth-child(74) .love_vertical {
animation-delay: -22200ms;
}
#ui .love:nth-child(75) .love_horizontal {
animation-delay: -22500ms;
}
#ui .love:nth-child(75) .love_vertical {
animation-delay: -22500ms;
}
#ui .love:nth-child(76) .love_horizontal {
animation-delay: -22800ms;
}
#ui .love:nth-child(76) .love_vertical {
animation-delay: -22800ms;
}
#ui .love:nth-child(77) .love_horizontal {
animation-delay: -23100ms;
}
#ui .love:nth-child(77) .love_vertical {
animation-delay: -23100ms;
}
#ui .love:nth-child(78) .love_horizontal {
animation-delay: -23400ms;
}
#ui .love:nth-child(78) .love_vertical {
animation-delay: -23400ms;
}
#ui .love:nth-child(79) .love_horizontal {
animation-delay: -23700ms;
}
#ui .love:nth-child(79) .love_vertical {
animation-delay: -23700ms;
}
#ui .love:nth-child(80) .love_horizontal {
animation-delay: -24000ms;
}
#ui .love:nth-child(80) .love_vertical {
animation-delay: -24000ms;
}
#ui .love:nth-child(81) .love_horizontal {
animation-delay: -24300ms;
}
#ui .love:nth-child(81) .love_vertical {
animation-delay: -24300ms;
}
#ui .love:nth-child(82) .love_horizontal {
animation-delay: -24600ms;
}
#ui .love:nth-child(82) .love_vertical {
animation-delay: -24600ms;
}
#ui .love:nth-child(83) .love_horizontal {
animation-delay: -24900ms;
}
#ui .love:nth-child(83) .love_vertical {
animation-delay: -24900ms;
}
#ui .love:nth-child(84) .love_horizontal {
animation-delay: -25200ms;
}
#ui .love:nth-child(84) .love_vertical {
animation-delay: -25200ms;
}
#ui .love:nth-child(85) .love_horizontal {
animation-delay: -25500ms;
}
#ui .love:nth-child(85) .love_vertical {
animation-delay: -25500ms;
}
#ui .love:nth-child(86) .love_horizontal {
animation-delay: -25800ms;
}
#ui .love:nth-child(86) .love_vertical {
animation-delay: -25800ms;
}
#ui .love:nth-child(87) .love_horizontal {
animation-delay: -26100ms;
}
#ui .love:nth-child(87) .love_vertical {
animation-delay: -26100ms;
}
#ui .love:nth-child(88) .love_horizontal {
animation-delay: -26400ms;
}
#ui .love:nth-child(88) .love_vertical {
animation-delay: -26400ms;
}
#ui .love:nth-child(89) .love_horizontal {
animation-delay: -26700ms;
}
#ui .love:nth-child(89) .love_vertical {
animation-delay: -26700ms;
}
#ui .love:nth-child(90) .love_horizontal {
animation-delay: -27000ms;
}
#ui .love:nth-child(90) .love_vertical {
animation-delay: -27000ms;
}
#ui .love:nth-child(91) .love_horizontal {
animation-delay: -27300ms;
}
#ui .love:nth-child(91) .love_vertical {
animation-delay: -27300ms;
}
#ui .love:nth-child(92) .love_horizontal {
animation-delay: -27600ms;
}
#ui .love:nth-child(92) .love_vertical {
animation-delay: -27600ms;
}
#ui .love:nth-child(93) .love_horizontal {
animation-delay: -27900ms;
}
#ui .love:nth-child(93) .love_vertical {
animation-delay: -27900ms;
}
#ui .love:nth-child(94) .love_horizontal {
animation-delay: -28200ms;
}
#ui .love:nth-child(94) .love_vertical {
animation-delay: -28200ms;
}
#ui .love:nth-child(95) .love_horizontal {
animation-delay: -28500ms;
}
#ui .love:nth-child(95) .love_vertical {
animation-delay: -28500ms;
}
#ui .love:nth-child(96) .love_horizontal {
animation-delay: -28800ms;
}
#ui .love:nth-child(96) .love_vertical {
animation-delay: -28800ms;
}
#ui .love:nth-child(97) .love_horizontal {
animation-delay: -29100ms;
}
#ui .love:nth-child(97) .love_vertical {
animation-delay: -29100ms;
}
#ui .love:nth-child(98) .love_horizontal {
animation-delay: -29400ms;
}
#ui .love:nth-child(98) .love_vertical {
animation-delay: -29400ms;
}
#ui .love:nth-child(99) .love_horizontal {
animation-delay: -29700ms;
}
#ui .love:nth-child(99) .love_vertical {
animation-delay: -29700ms;
}
#ui .love:nth-child(100) .love_horizontal {
animation-delay: -30000ms;
}
#ui .love:nth-child(100) .love_vertical {
animation-delay: -30000ms;
}

@keyframes horizontal {
from {
transform: translateX(0px);
}
to {
transform: translateX(450px);
}
}
@keyframes vertical {
0% {
transform: translateY(180px);
}
10% {
transform: translateY(45px);
}
15% {
transform: translateY(4.5px);
}
18% {
transform: translateY(0px);
}
20% {
transform: translateY(4.5px);
}
22% {
transform: translateY(34.61538px);
}
24% {
transform: translateY(64.28571px);
}
25% {
transform: translateY(112.5px);
}
26% {
transform: translateY(64.28571px);
}
28% {
transform: translateY(34.61538px);
}
30% {
transform: translateY(4.5px);
}
32% {
transform: translateY(0px);
}
35% {
transform: translateY(4.5px);
}
40% {
transform: translateY(45px);
}
50% {
transform: translateY(180px);
}
71% {
transform: translateY(428.57143px);
}
72.5% {
transform: translateY(441.17647px);
}
75% {
transform: translateY(450px);
}
77.5% {
transform: translateY(441.17647px);
}
79% {
transform: translateY(428.57143px);
}
100% {
transform: translateY(180px);
}
}

小姐姐
我喜欢你
和我
在一起
好吗
小姐姐
我喜欢你
和我
在一起
好吗
小姐姐
我喜欢你
和我
在一起
好吗
小姐姐
我喜欢你
和我
在一起
好吗
小姐姐
我喜欢你
爱
和我
在一起
好吗
biu~biu~
小姐姐
我喜欢你
和我
在一起
好吗
爱
小姐姐
我喜欢你
和我
在一起
好吗
love
小姐姐
我喜欢你
和我
在一起
好吗
啵啵啵
小姐姐
我喜欢你
和我
在一起
好吗
爱
小姐姐
我喜欢你
和我
在一起
好吗
love
小姐姐
我喜欢你
和我
在一起
好吗
爱
爱你哟
么么哒
Love 

### 3D旋转相册


![在这里插入图片描述](https://img-blog.csdnimg.cn/a653b7744600496085256616282aecc7.gif)
致青春

}


## 开发流程


### 工具安装



> 
> 下载一个HBuilder，体积很小，代码高亮也很友好
> 
> 
> 


![在这里插入图片描述](https://img-blog.csdnimg.cn/44cc2c621f1e4258afb7c0dcb89684f6.png)


### 创建项目



> 
> 在HBuilder左侧项目管理器空白处单击右键，选择新建项目
> 
> 
> 


![在这里插入图片描述](https://img-blog.csdnimg.cn/378b69922b5f41758b6c06ff806b1b73.png)



> 
> 输入项目名称，选择基本HTML项目模板即可
> 
> 
> 


![在这里插入图片描述](https://img-blog.csdnimg.cn/6981cecaf4674e838eafd5af730fa7f3.png)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/7a0e21b2edf14060a681603a535b4de1.png)



> 
> 将文章中的代码块复制过去后保存运行即可在浏览器看到效果
> 
> 
> 


![在这里插入图片描述](https://img-blog.csdnimg.cn/d0e24e60ab504a5bbf23e4703530fa11.png)


## 语法简介


### HTML



> 
> HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
> 
> 
> 


![在这里插入图片描述](https://img-blog.csdnimg.cn/b0c9cc593e184ddbb953e9baa0fc430f.png)



> 
> 常用HTML标签
> 
> 
> 


* 标题标签 h1 - h6  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/068aa60113fe4eeea03823f62cae05d4.png)
* 段落标签 p标签，独占一行  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/0ddf1cc1bd4444559444cd46f1c2cc4d.png)
* 换行标签 br 使用时会让后面的元素换行


![在这里插入图片描述](https://img-blog.csdnimg.cn/2fdfe0a7410740e7a047c1bb7425678c.png)


* 水平线标签 hr  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/bb8ec1e529d34dff8084f103c855d16d.png)
* 图片标签 img  
 ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/afcba20bfd1051bed50a725d9c67c080.png)
* 超链接 a标签，通过设置href属性指向跳转的目标地址  
 ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/904fb0d391d268e7a7435b9ddefbefac.png)
* 文本框标签 input


![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6ea5131582d72c7e5d87026fb2019b91.png)


### CSS



> 
> 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
> 
> 
> 



> 
> CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
> 
> 
>

p {color:red;text-align:center;}



> 
> CSS 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 /\* 开始, 以 \*/ 结束, 实例如下:
> 
> 
>

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/

img
img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

)

  • 图片标签 img
    在这里插入图片描述
  • 超链接 a标签，通过设置href属性指向跳转的目标地址
    在这里插入图片描述
  • 文本框标签 input

在这里插入图片描述

CSS

层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

CSS 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/\*这是个注释\*/
p
{
    text-align:center;
    /\*这是另一个注释\*/


[外链图片转存中...(img-UlO41ALh-1714677451727)]
[外链图片转存中...(img-3tNXMkcW-1714677451727)]
[外链图片转存中...(img-k9lPzxjf-1714677451728)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值