This is one of the 100 website confessions in the programmer's confession series, designed to allow anyone to use and create their own confession website for loved ones to see. There are a total of 100 confession websites in this wave, which can be modified and used at will. Many people will want to confess to their beloved boys and girls. People who are shy by nature dare not confess their love even if that TA stands in front of them. If you can’t say it, tell TA with a short video~ Make a confession webpage to tell TA your heart, the demonstration is as follows.

1. Web page introduction

1 Introduction to the webpage: Based on this HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码, come and make a high-end confession webpage to send (his/her) a romantic confession. It is easy to make and modify, and you can change the background music by yourself, text and pictures can be used

2. Webpage editing: any HTML editing software (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++ and other arbitrary html editing software to run, modify and edit, etc.).

1. Web page effect

insert image description here

2. Code display

1.HTML code

The code is as follows (example): The following only shows part of the code for reference~

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天空中白云飘动CSS3特效</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="satic-area">
	<div class="dynamic-area1"></div>
	<div class="dynamic-area2"></div>
</div>

</body>
</html>

2. CSS code


body, html {
    
     font-size: 100%; 	padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
    
    
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    
    
	content: " ";
	display: table;
}

.clearfix:after {
    
    
	clear: both;
}

body{
    
    
	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}

Three, wonderful columns

When you see this, please [Like, Follow, Favorite] Three consecutive supports, your support is the driving force for my creation.

HTML5 super cool special effects [CSS3 special effects of white clouds floating in the sky] HTML+CSS+JavaScript