用js写一个动态的心形
时间: 2023-05-26 18:02:23 浏览: 46
很高兴为您提供代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Heart Shape with JavaScript</title>
<style type="text/css">
#heart {
margin: 50px auto;
width: 100px;
height: 100px;
position: relative;
}
#heart:before,
#heart:after {
content: "";
position: absolute;
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e58;
-webkit-border-radius: 0 0 50px 50px;
border-radius: 0 0 50px 50px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
#text {
text-align: center;
}
#fade {
margin: 10px 0;
}
</style>
</head>
<body>
<div id="heart"></div>
<div id="text">
<h1>Dynamic Heart Shape with JavaScript</h1>
<p>Click the heart to change the color</p>
</div>
<button onclick="animateHeart()">Animate Heart</button>
<button onclick="stopAnimation()">Stop Animation</button>
<div id="fade">
<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>
</div>
<script type="text/javascript">
// Variables
var heart = document.getElementById("heart");
var colors = ["#fc2e58", "#fd8b2c", "#fedc16", "#34c2e3", "#34495e"];
var animate;
var fade;
// Change Heart Color on Click
function changeColor() {
var color = colors[Math.floor(Math.random() * colors.length)];
heart.style.background = color;
}
// Animate Heart Shape
function animateHeart() {
var left = 50;
var top = 0;
var angle = 0;
var direction = 1;
var speed = 10;
// Function to Move Heart Shape
function move() {
angle += 0.05;
left += direction * speed * Math.sin(angle);
top += direction * speed * (Math.cos(angle) - 1);
heart.style.left = left + "px";
heart.style.top = top + "px";
// Change Direction and Color
if (left > window.innerWidth - 100 || left < 0 || top < -300) {
direction *= -1;
changeColor();
}
animate = requestAnimationFrame(move);
}
animate = requestAnimationFrame(move);
}
// Stop Animation
function stopAnimation() {
cancelAnimationFrame(animate);
}
// Fade In/Out
function fadeIn() {
clearTimeout(fade);
heart.style.opacity = "0";
fade = setTimeout(function() {
heart.style.transition = "opacity 1s";
heart.style.opacity = "1";
}, 200);
}
function fadeOut() {
clearTimeout(fade);
heart.style.opacity = "1";
fade = setTimeout(function() {
heart.style.transition = "opacity 1s";
heart.style.opacity = "0";
}, 200);
}
// Change Heart Color on Click
heart.addEventListener("click", function() {
changeColor();
});
</script>
</body>
</html>
```
此代码将生成一个动态的爱心形状,并允许您单击该形状以更改颜色。还有两个按钮允许您从JavaScript中进行动画和淡入淡出。