帮我写一个复杂js正面的动态生日蛋糕
时间: 2023-08-28 19:18:59 浏览: 51
好的,以下是一个稍微复杂一些的JavaScript正面的动态生日蛋糕的代码示例,您可以将其复制并在浏览器中运行查看效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态生日蛋糕</title>
<style>
/* 设置蛋糕的样式 */
#cake {
position: relative;
width: 400px;
height: 500px;
margin: 50px auto 0;
background-color: pink;
border-radius: 50% 50% 20% 20%;
overflow: hidden;
transform-style: preserve-3d;
transform: translateZ(-100px);
animation: rotate 10s linear infinite;
}
#cake:before {
content: "";
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-color: white;
border-radius: 50%;
box-shadow: -10px 10px 0 white;
transform: rotateY(45deg);
}
#cake:after {
content: "";
position: absolute;
width: 60%;
height: 60%;
top: 20%;
left: 20%;
background-color: red;
border-radius: 50%;
box-shadow: -10px 10px 0 red;
transform: rotateY(45deg);
}
#cake .candle {
position: absolute;
width: 20px;
height: 80px;
bottom: 100%;
left: 50%;
margin-left: -10px;
background-color: yellow;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 10px yellow, 0 0 20px yellow, 0 0 30px yellow;
animation: blink 1s infinite;
transform-style: preserve-3d;
}
#cake .flame {
position: absolute;
width: 10px;
height: 80px;
bottom: 100%;
left: 50%;
margin-left: -5px;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 10px yellow, 0 0 20px yellow, 0 0 30px yellow;
animation: flicker 0.5s infinite alternate;
transform-style: preserve-3d;
}
/* 设置蜡烛闪烁的动画 */
@keyframes blink {
50% {
opacity: 0.5;
}
}
/* 设置火苗闪烁的动画 */
@keyframes flicker {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/* 设置旋转的动画 */
@keyframes rotate {
0% {
transform: translateZ(-100px) rotateY(0);
}
100% {
transform: translateZ(-100px) rotateY(360deg);
}
}
/* 设置切换照片的样式 */
#photos {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s;
}
/* 设置显示照片的动画 */
.show-photos #photos {
opacity: 1;
}
/* 设置按钮的样式 */
#btn {
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -50px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: pink;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: transform 0.5s;
}
#btn:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div id="cake">
<div class="candle">
<div class="flame"></div>
</div>
</div>
<div id="photos"></div>
<div id="btn">查看照片</div>
<script>
// 获取蜡烛和火苗元素
var candle = document.querySelector(".candle");
var flame = document.querySelector(".flame");
// 设置蜡烛上升的动画和火苗跟随的动画
function animateCandle() {
candle.style.bottom = "100%";
candle.style.animation = "rise 3s forwards";
flame.style.animation = "follow 3s forwards";
}
// 设置蜡烛熄灭的动画和火苗消失的动画
function extinguishCandle() {
candle.style.animation = "extinguish 1s forwards";
flame.style.animation = "extinguish 1s forwards";
}
// 监听鼠标点击事件,触发动画效果
candle.addEventListener("click", function() {
animateCandle();
setTimeout(extinguishCandle, 3000);
});
// 获取照片和按钮元素
var photos = document.querySelector("#photos");
var btn = document.querySelector("#btn");
// 设置切换照片的函数
function togglePhotos() {
document.body.classList.toggle("show-photos");
}
// 监听按钮点击事件,触发切换照片的效果
btn.addEventListener("click", togglePhotos);
</script>
</body>
</html>
```
该代码会在浏览器中生成一个动态的生日蛋糕,包含一个蜡烛和火苗,当您点击蜡烛时会触发动态效果,蜡烛会上升并熄灭,同时火苗也会消失。在页面下方还有一个按钮,点击按钮可以切换显示不同的照片。您可以将代码复制到一个HTML文件中并在浏览器中打开,查看效果。