随着各种节日的到来，也伴随着许许多多的表白时机，为何不制作几款表白特效让你的行动更加充实呢，此文主要基于HTML+CSS+JS制作网页特效，代码简洁，上手简单。

• 网页特效
• • 爱心
  • 画心
  • 3D爱心
  • 爱在心中
  • 3D旋转相册
• 开发流程
• • 工具安装
  • 创建项目
• 语法简介
• • HTML
  • CSS

网页特效

爱心

画心

3D爱心

爱在心中

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

3D旋转相册

开发流程

工具安装

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

创建项目

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

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

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

语法简介

HTML

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

常用HTML标签

• 标题标签 h1 - h6
  

• 段落标签 p标签，独占一行
  

• 换行标签 br 使用时会让后面的元素换行

• 水平线标签 hr
  

• 图片标签 img
  

• 超链接 a标签，通过设置href属性指向跳转的目标地址
  

• 文本框标签 input

CSS

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

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

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

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

/*这是个注释*/
p
{text-align:center;/*这是另一个注释*/color:black;font-family:arial;
}

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

#para1
{text-align:center;color:red;
}

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

.center {text-align:center;}

CSS 背景属性用于定义HTML元素的背景。

body {background-color:#b0c4de;}

CSS 文本格式，颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}