七夕表白代码包

boy918.

已于 2024-08-07 18:37:06 修改

阅读量185

点赞数 2

分类专栏： html 文章标签： css css3 html

于 2024-08-07 16:15:51 首次发布

本文链接：https://blog.csdn.net/qq_42532598/article/details/140994378

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.像素爱心代码

2.心动爱心代码

3.问答样式代码

1.像素爱心代码

今年的最火的当然是像素风，一个一个小方块拼成的爱心超级可爱。

(1)桌面新建一个文本档.txt

(2)输入以下代码,可以直接复制

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>520</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

*{margin: 0; padding: 0;}

ul,ol{list-style: none;}

a{text-decoration: none;color: inherit;}

.clearfix:after{content: '';display: block;clear: both;}

.clear{clear: both;}

body{

background-color: #111010;

}

.love{

display: table;

flex-wrap: wrap;

margin: 100px auto;

}

.box{

float:left;

width: 25px;

height: 25px;

border-radius: 2px;

margin-right: 2px;

margin-bottom: 2px

}

.box:hover{

background: #0c0101;

}

.box:not(.transparent){

background-color: rgb(245, 9, 9);

opacity: 0;

transform: translateY(-300px);

animation: move 4s infinite;

}

@keyframes move{

25%{

opacity: 1;

transform: translateY(0);

}

50%{

opacity: 1;

transform: translateY(0);

}

65%{

opacity: 1;

transform: translateY(0);

}

100%{

opacity: 0;

transform: translateY(300px);

}

}

.box.delay1{

animation-delay: .1s;

}

.box.delay2{

animation-delay: .2s;

}

.box.delay3{

animation-delay: .4s;

}

.box.delay4{

animation-delay: .5s;

}

.box.delay5{

animation-delay: .7s;

}

.box.delay6{

animation-delay: .9s;

}

p{

width: 1000px;

margin: 200px auto 0;

color: #fff;

font-size: 40px;

text-align: center;

}

</style>

</head>

<body>

<div class="love">

<div class="box transparent"></div>

<div class="box white delay6"></div>

<div class="box white delay2"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

<div class="box white delay4"></div>

<div class="box white delay3"></div>

<div class="box transparent"></div>

<div class="box clear white delay5"></div>

<div class="box white delay5"></div>

<div class="box white delay6"></div>

<div class="box white delay3"></div>

<div class="box transparent"></div>

<div class="box white delay6"></div>

<div class="box white delay1"></div>

<div class="box white delay4"></div>

<div class="box white delay2"></div>

<div class="box clear white"></div>

<div class="box white delay1"></div>

<div class="box white delay4"></div>

<div class="box white delay2"></div>

<div class="box white delay6"></div>

<div class="box whitedelay3"></div>

<div class="box white delay6"></div>

<div class="box white delay3"></div>

<div class="box white delay1"></div>

<div class="box clear white"></div>

<div class="box white delay3"></div>

<div class="box white delay1"></div>

<div class="box white delay1"></div>

<div class="box white delay6"></div>

<div class="box white delay3"></div>

<div class="box white delay5"></div>

<div class="box white delay2"></div>

<div class="box white delay4"></div>

<div class="box clear transparent"></div>

<div class="box white delay6"></div>

<div class="box white delay1"></div>

<div class="box white delay5"></div>

<div class="box white delay1"></div>

<div class="box white delay5"></div>

<div class="box white delay3"></div>

<div class="box white delay4"></div>

<div class="box transparent"></div>

<div class="box clear transparent"></div>

<div class="box transparent"></div>

<div class="box white delay5"></div>

<div class="box white delay1"></div>

<div class="box white delay5"></div>

<div class="box white delay2"></div>

<div class="box white"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

<div class="box clear transparent"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

<div class="box white"></div>

<div class="box white"></div>

<div class="box white delay2"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

<div class="box clear transparent"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

<div class="box white delay1"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

<div class="box transparent"></div>

</div>

<p>写下你想说的话</p>

</body>

</html>

(3)文件另存为，并修改后缀名为html，将文件类型改为所有文件，选择编码中【UTF-8】，保存

(4)效果展示

2.心动爱心代码

(1)桌面新建一个文本档.txt

(2)输入以下代码,可以直接复制

<!DOCTYPE html>
 <html lang="en">
 <head> 
<meta charset="UTF-8">
 <title>跳动爱心</title> 
<style> *{ padding: 0; margin: 0; } body{ background-color: pink; } #frame{ position: relative; width: 400px; height: 300px; margin: 250px auto; } .left,.right{ top: 0; width: 200px; height: 200px; border-radius: 50%; } .left{ left: 35px; } .right{ right: 35px; z-index: -1; } .bottom{ bottom: 36px; left: 100px; width: 200px; height: 200px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); z-index: -1; } .heart{ position: absolute; box-shadow:0 0 40px #d5093c; animation: beat .8s ease infinite normal; background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%); } @keyframes beat { 0%{ transform: scale(1) rotate(225deg); -webkit-transform: scale(1) rotate(225deg); -moz-transform: scale(1) rotate(225deg); -o-transform: scale(1) rotate(225deg); box-shadow:0 0 40px #d5093c; } 50%{ transform: scale(1.1) rotate(225deg); -webkit-transform: scale(1.1) rotate(225deg); -moz-transform: scale(1.1) rotate(225deg); -o-transform: scale(1.1) rotate(225deg); box-shadow: 0 0 70px #d5093c; } 100%{ transform: scale(1) rotate(225deg); -webkit-transform: scale(1) rotate(225deg); -moz-transform: scale(1) rotate(225deg); -o-transform: scale(1) rotate(225deg); box-shadow: 0 0 40px #d5093c;; } } 
</style> 
</head> 
<body> 
<div id="frame"> <div class="heart left"></div> <div class="heart right"></div> <div class="heart bottom"></div> </div> 
</body> 
</html>

(3)文件另存为，并修改后缀名为html，将文件类型改为所有文件，选择编码中【UTF-8】，保存

(4)效果展示

3.问答样式代码

(1)桌面新建一个文本档.txt

(2)输入以下代码,可以直接复制

msgbox "做我女朋友好吗",vbQuestion,"在吗"

msgbox ("未来每天都和你一起努力")

msgbox ("每年都一起跨年")

msgbox ("说到做到")

dim j


do while j<1

Select Case msgbox("做我女朋友好吗",68,"请郑重的回答我")

Case 6 j=1

Case 7 msgbox("再给你一次机会")

end Select

loop

msgbox("我就知道你会同意的，哈哈哈哈")

(3)打开文档另存为界面，将文件名设置为常用软件名称，文档后缀名.txt改为.vbs。编码设置为ANSI，点击保存

(4)效果展示

boy918.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
七夕表白代码包

今年的最火的当然是像素风，一个一个小方块拼成的爱心超级可爱。(1)桌面新建一个文本档.txt(2)输入以下代码,可以直接复制(3)文件另存为，并修改后缀名为html，将文件类型改为所有文件，选择编码中【UTF-8】，保存。
复制链接

扫一扫

专栏目录