js实现花俏的转动、旋转之后慢慢张开的窗口特效

要在JavaScript中实现一个花俏的转动、旋转之后慢慢张开的窗口特效，我们可以使用CSS动画和JavaScript来控制动画的开始和结束。这里我将提供一个基本的示例，展示如何使用CSS来创建动画，并使用JavaScript来触发动画的开始。

首先，是HTML部分，定义一个用于展示动画的容器：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画窗口</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="animated-window" id="animatedWindow">
    <!-- 窗口内容 -->
    <p>这是一个动画窗口！</p>
</div>
<button onclick="startAnimation()">开始动画</button>

<script src="script.js"></script>
</body>
</html>

接着是CSS部分（styles.css），用于定义动画效果：


.animated-window {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 100px;
    margin: 50px;
    transition: all 1s ease; /* 平滑过渡效果 */
    transform-origin: center; /* 旋转中心点 */
    opacity: 0; /* 初始透明度 */
}

/* 定义关键帧动画 */
@keyframes rotateAndExpand {
    0% {
        transform: rotate(0deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: rotate(360deg) scale(0.5);
        opacity: 0.5;
    }
    100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

.animated-window.active {
    animation: rotateAndExpand 2s forwards; /* 播放动画，完成后保持最后一帧状态 */
}

最后是JavaScript部分（script.js），用于触发动画：


function startAnimation() {
    var window = document.getElementById('animatedWindow');
    window.classList.add('active'); // 添加类名以触发动画
}

在这个例子中，当用户点击按钮时，`startAnimation`函数会被调用，该函数会给`.animated-window`元素添加一个`active`类名。CSS中定义的`.active`类名关联了一个`rotateAndExpand`的动画，该动画会先旋转并放大元素，然后逐渐缩小并停止旋转，同时透明度从0变为1。

你可以根据具体需求调整动画的时长、旋转角度、缩放比例等参数。