522是16进制的1314

最新推荐文章于 2021-01-12 10:50:50 发布

笨笨的猿

最新推荐文章于 2021-01-12 10:50:50 发布

阅读量4k

点赞数

文章标签： html5 javascript css3

本文链接：https://blog.youkuaiyun.com/qq_43744966/article/details/106857072

版权

本文介绍了一个使用HTML和CSS实现的爱心动画，通过键盘输入触发动画效果，展示了16进制数522转换为十进制后的浪漫寓意1314。代码中包含了HTML结构、CSS样式和JavaScript交互，实现了动态爱心跳动和文字渐显的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>522是16进制的1314</title>
		<style>
			body{
				background-color: #27286B;
			}
			.c1,.c2,.rect{
				width: 200px;
				height: 200px;
				background: #f00;
				border-radius: 50%;
				box-shadow: 0 0 50px 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 .8S 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: 1;
			}
		</style>
	</head>
	<body>
		<div id="love">
			<div class="c1"></div>
			<div class="c2"></div>
			<div class="rect"></div>
		</div>
		<span id="msg">522是十六进制的1314</span>
		<script>
			//初始化跳动状态为停止
			var boom = false;
			//为整个文档绑定按键事件
			document.addEventListener('keydown',function(e){
				//获取按下的按键码(ASCII码)
				var code = e.keyCode;
				//判断是否是回车键
				if(code === 13){
					//根据id获取整个心印象
					var div = document.getElementById('love');
					//根据id获取文本控件对象(span)
					var span = document.getElementById('msg');
					if(boom){
						//停止
						div.className=''; 
						span.style.opacity = 0;
					}else{
						//跳动
						div.className='start';
						//初始化一个变量,表示透明度
						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>

运行效果截图