HTML5庆祝生日蛋糕烟花特效
以下是一个简化的版本，仅包含核心代码，用于创建一个蛋糕并使其旋转：
<!DOCTYPE html>
<html>
<head>
<title>Cake Rotation</title>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.cake {
position: absolute;
width: 100px;
height: 150px;
background: #eec437;
border-radius: 100px 100px 0 0;
box-shadow: 0 0 20px #eec437;
transform-origin: 50% -100px;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="cake"></div>
</body>
</html>这段代码使用了CSS3的@keyframes规则来创建无限循环的旋转动画。.cake类定义了一个蛋糕的基本样式，并将其旋转原点设在其左下角。animation属性设置了动画名称、持续时间、动画时间函数以及动画的无限循环。
评论已关闭