爱心代码演示

Y T

已于 2024-02-06 01:09:58 修改

阅读量553

点赞数 16

文章标签：前端 javascript html

于 2024-02-06 01:08:24 首次发布

本文链接：https://blog.csdn.net/yy1214520/article/details/136050176

版权

本文介绍了如何使用HTML、CSS和JavaScript创建一个动态爱心形状的代码示例，包括图形绘制、CSS样式和3D旋转动画效果。

摘要由CSDN通过智能技术生成

这次的爱心代码绝对好

在编程中，创建一个爱心形状的代码演示通常涉及到图形绘制。

先上效果图

部分代码

html的代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Hi。娇娇！</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link href="main.css" rel="stylesheet">
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript" src="main.js"></script>
	</body>

</html>

css的代码

* {
	box-sizing: border-box
}

body,
html {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.styleEditor {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden
}

.rain {
	position: absolute
}

最后是js的部分代码（因为代码太多了，要源码的私聊就好了，免费的）

	F = function(e) {
			function t() {
				var e, n;
				d()(this, t);
				for (var r = arguments.length, o = new Array(r), a = 0; a < r; a++) o[a] = arguments[a];
				return (n = y()(this, (e = b()(t)).call.apply(e, [this].concat(o)))).fullStyle = [
					"/*\n* Hi。娇娇！\n* 这么久了。还没和你说过我的事情呢！\n* 我是个学习软件技术的一名学生，比如前端设计。\n* 前端设计就如这个页面，就是个什么也没有的网页。\n* 我的工作就是给这种空白的页面加点儿东西。\n* 嗯。说起来手机和电脑还得区分一下。\n* 你现在用的是。。。"
					.concat(A ? "电脑" : "手机",
						"\n*/\n\n/* 首先给所有元素加上过渡效果 */\n* {\n  -webkit-transition: all .5s;\n  transition: all .5s;\n}\n/* 白色背景太单调了。来点背景 */\nbody, html {\n  color: #fff;\n  background-color: darkslategray;\n}\n\n/* 文字太近了 */\n.styleEditor {\n  overflow: auto;\n  "
					).concat(A ? "width: 48vw;\n  height: 96vh;" : "width: 96vw;\n  height: 48vh;",
						"\n  border: 1px solid;\n  font-size: 14px;\n  line-height: 1.5;\n  padding: 10px;\n}\n\n/* 这些代码颜色都一样。加点儿高亮区别来 */\n.token.selector{ color: rgb(133,153,0) }\n.token.property{ color: rgb(187,137,0) }\n.token.punctuation{ color: yellow }\n.token.function{ color: rgb(42,161,152) }\n.token.comment{ color: rgb(177,177,177) }\n\n/* 加个 3D 效果 */\nhtml{\n  perspective: 1000px;\n  -webkit-perspective: 1000px;\n}\n\n.styleEditor {\n  "
					).concat(A ?
						"transform: rotateY(10deg) translateZ(-100px) ;\n  -webkit-transform: rotateY(10deg) translateZ(-100px);" :
						"transform: rotateX(-10deg) translateZ(-100px);\n  -webkit-transform: rotateX(-10deg) translateZ(-100px);",
						" ").concat(A ? "" :
						"\n  transform-origin: 50% 0% 0;\n  -webkit-transform-origin: 50% 0% 0;",
						"\n}\n\n/*\n* 娇娇，今天给你看看一个惊喜。\n* 用代码画一个爱心。\n*/\n\n/* 首先，来一个画板 */\n.heartWrapper {\n  ")
					.concat(A ? "width: 48vw;\n  height: 96vh;" : "width: 96vw;\n  height: 48vh;",
						"\n  position: relative;\n  border: 1px solid;\n  background-color: white;\n  ")
					.concat(A ?
						"transform: rotateY(-10deg) translateZ(-100px);\n  -webkit-transform: rotateY(-10deg) translateZ(-100px);" :
						"transform: rotateX(10deg) translateZ(-100px);\n  -webkit-transform: rotateX(10deg) translateZ(-100px);"
					).concat(A ? "" :
						"\n  transform-origin: 50% 0% 0;\n  -webkit-transform-origin: 50% 0% 0;",
						"\n}\n\n/* 画一个方块，当左心室和右心室 */\n.heart {\n  width: 100px;\n  height: 100px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  margin: -50px 0 0 -50px;\n  border-radius: 20px;\n  background: #E88D8D;\n  transform: rotate(45deg);\n}\n\n/* 画上左心房 */\n.heart::before {\n  content: '';\n  background: #E88D8D;\n  border-radius: 50%;\n  width: 100px;\n  height: 100px;\n  position: absolute;\n  left: -38px;\n  top: 1px;\n}\n\n/* 再画上右心房 */\n.heart::after {\n  content: '';\n  background: #E88D8D;\n  border-radius: 50%;\n  width: 100px;\n  height: 100px;\n  position: absolute;\n  right: -1px;\n  top: -38px;\n}\n\n/* 太单调了，让心跳动起来 */\n@keyframes throb {\n  0% {\n    transform: scale(1) rotate(45deg);\n    opacity: 1;\n  }\n\n  100% {\n    transform: scale(1.65) rotate(45deg);\n    opacity: 0\n  }\n}\n\n.bounce {\n  opacity: 0.2;\n  animation: throb 1s infinite linear;\n}\n/*\n* Ok，完成！\n* 婷婷，我会永远记住你的！\n*/\n\n"
					)

最后是祝所有人能和自己爱的人白头偕老