用HTML去表白
程序员文章站
2024-03-18 22:46:58
...
你有想要表白的人吗?作为一个程序猿,就要用我们独特的方式表白,不妨用我们的双手制作一个心,对心爱的人表达我们的感情,如果你知识不过关,那恭喜你,在这成千上万个博客中找到了我,小编今天就告诉你一种简单方法,用HTML去向你钟意的人表白吧!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>520表白</title>
<style type="text/css">
body{
/* 颜色取值0-9 a-f */
background: mediumseagreen;
}
.c1,.c2,.rect{
width: 200px;
height: 200px;
background: #f00;
border-radius: 50%;
box-shadow: 0 0 30px rgb(255,0,0);
}
.rect{
margin-top: -200px;
border-radius: 0;
}
.c2{
margin-top: -100px;
margin-left: -100px;
}
#love{
position: absolute;
left: 30%;
top:10%;
transform: rotate(45deg);
}
.start{
animation: boom .5s infinite linear;
}
/* 创建自定义动画 */
@-webkit-keyframes boom{
30%{
transform:scale(1.1) rotate(45deg);
}
50%{
transform:scale(1.2) rotate(45deg);
}
}
#msg{
position: absolute;
top: 80%;
left:20%;
font-size: 1.2em;
font-family:"微软雅黑" ;
line-height: 40px;
color: #fff;
opacity: 0; /* 文字透明度 */
}
</style>
</head>
<body>
<div id="love" >
<div class="c1"></div>
<div class="c2"></div>
<div class="rect"></div>
</div>
<span id="msg">世界上最遥远的距离，不是生与死</br>而是你站在我对面，我却看不到</span>
<script>
// 初始化跳动状态为停止
var boom =false;
// 为整个文档绑定一个案例事件
document.addEventListener('keydown',function(e){
// 获取按下的按键码(ascil码)
var code =e.keyCode;
// 判断按下的是否是回车键
if(code===13){
// 根据id获取整个心
var div=document.getElementById('love');
// 根据id获取文本控件对象
var span=document.getElementById('msg');
if(boom){
// 停止
div.className='';
//boom=flase;
span.style.opacity=0;
}else{
// 跳动
div.className='start';
//boom=true;
// 初始化一个变量,表示透明度
var opacity=0.1;
// 定时任务,每隔0.3s执行一次函数,改变透明度
var f= setInterval(function(){
opacity+=0.1;
// 设置span元素的透明度
span.style.opacity=opacity;
// 当透明度等于1时则表示完全显示,此时需要终止定时任务
if(opacity>=1){
clearInterval(f);
}
},300);
}
boom=!boom;
}
});
</script>
</body>
</html>
中间的数据可以自己随意发挥哦,下面是我运行的效果