目录
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)效果展示