学会这几款表白特效让你明年双十一不再是一个人
创始人
2024-04-09 05:50:05
0次

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

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

网页特效

爱心

在这里插入图片描述





canvas 心


画心

在这里插入图片描述

  
  
    
Heart   
    
    
        
 

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);}

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...